jquery - Recuperar datos de handsontable a Struts2 Action a través de JSON no funciona

ajax struts2-json-plugin

Question

Estoy usando el plugin struts2-json para generar datos JSON y Ajax para poblar la tabla (handsontable) con datos de ese JSON ( según la fuente ).

Ahora, necesito recuperar los datos de la tabla en Struts2 Action usando Ajax by JSON. Primero implementé la tabla de llenado con datos pasados ​​por JSON de Struts2 Action a Handsontable, eso fue bastante fácil y funciona. Pero, ¿por qué guardar no funciona como puede ver en el siguiente código adjunto?

Como veo en un firebug, se envía la POST y en la depuración la solicitud se recupera en mi acción JSONSaveAction, pero los datos del campo no se completan con datos JSON, ¿por qué? Los datos no se deben vincular automáticamente al objeto java mediante el plugin struts2-json? ¿Qué estoy haciendo mal?

En la parte handsontable, la función handsontable.getData() es responsable de obtener datos completos de la tabla. Así que lo estoy usando así, pero sin éxito:

$.ajax({
url: "../json/saveJSONDataAction.action",
data: {data: handsontable.getData()}, //returns all cells'' data
dataType: ''json'',
type: ''POST'',
success: function (res) {
if (res.result === ''ok'') {
$console.text(''Data saved'');
}
else {
$console.text(''Save error'');
}
}
});

La función handsontable.getData() realmente recupera todos los datos que he marcado, pero en lugar de eso, los datos no están vinculados a los objetos java List<Report> data en mi acción JSONSaveAction. ¿Sabes por qué?

Aquí está la captura de pantalla con mi tabla y la información Firebug después de la solicitud POST:

Acción que envía JSON a handsontable (funciona bien):

@ParentPackage("json-default")
@Action(value="getJSONDataAction")
@Result(name="success", type="json")
public class JSONDataAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private List<Report> data = new ArrayList<Report>();
public JSONDataAction(){
data.add(new Report(1, "Chris", true, "2008-01-01", "orange"));
data.add(new Report(2, "Kate", false, "2013-03-03", "blue"));
data.add(new Report(3, "Blade", true, "2013-05-03", "black"));
data.add(new Report(4, "Zack", false, "2013-01-01", "yellow"));
}
public String execute() {
return SUCCESS;
}
public List<Report> getData() {
return data;
}
public void setData(List<Report> data) {
this.data = data;
}
}

JSON que se envía a rellenar la tabla generada automáticamente:

{"data":[
{"active":true,"color":"orange","date":"2008-01-01","id":1,"name":"Chris"},
{"active":false,"color":"blue","date":"2013-03-03","id":2,"name":"Kate"},
{"active":true,"color":"black","date":"2013-05-03","id":3,"name":"Blade"},
{"active":false,"color":"yellow","date":"2013-01-01","id":4,"name":"Zack"}]
}

Acción recuperar datos de la tabla a través de JSON (no funciona):

Aquí los datos de la List<Report> data campo List<Report> data siempre son nulos, no se rellenan con datos de JSON :(

@ParentPackage("json-default")
@Action(value="saveJSONDataAction")
@Result(name="success", type="json")
public class JSONSaveAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private List<Report> data;
public JSONSaveAction(){
}
public String execute() {
try {
JSONObject jsonData = (JSONObject) JSONSerializer.toJSON(data);
String name = jsonData.getString("name");
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
public List<Report> getData() {
return data;
}
public void setData(List<Report> data) {
this.data = data;
}
}

Clase de informe:

public class Report {
private int id;
private String name;
private boolean active;
private String date;
private String color;
//getters and setters
}

Cargar y guardar datos en y desde la tabla a través de JSON:

<div id="spreadsheet">
<p>
<button type="button" name="load">Load</button>
<button type="button" name="save">Save</button>
</p>
</div>
<div id="console" class="console"></div>
<script>
var $container = $("#spreadsheet");
var $console = $("#console");
var $parent = $container.parent();
$container.handsontable({
startRows: 4,
startCols: 20,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
columns: [
{data: "id", type: ''text''},
{data: "name", type: ''text''},
{data: "active", type: ''checkbox''},
{data: "date", type: ''date''},
{data: "color",
type: ''autocomplete'',
source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
}
]
});
var handsontable = $container.data(''handsontable'');
$parent.find(''button[name=load]'').click(function () {
$.ajax({
url: "../json/getJSONDataAction.action",
dataType: ''json'',
type: ''GET'',
success: function (res) {
handsontable.loadData(res.data);
$console.text(''Data loaded'');
}
});
});
$parent.find(''button[name=save]'').click(function () {
$.ajax({
url: "../json/saveJSONDataAction.action",
data: {data: handsontable.getData()}, //returns all cells'' data
dataType: ''json'',
type: ''POST'',
success: function (res) {
if (res.result === ''ok'') {
$console.text(''Data saved'');
}
else {
$console.text(''Save error'');
}
},
error: function () {
$console.text(''Save error.'');
}
});
});
</script>

Por favor, ayúdenme a recuperar datos de la tabla al objeto Java correctamente, porque realmente me bloqueó. No sé lo que estoy haciendo mal ...

Muchas gracias por cualquier entrada!

Answer 1

No he revisado su código a fondo, pero a primera vista parece que está borrando la recopilación de data cuando crea uno nuevo con ese new ArrayList<Report>() en su Action . Solo deje en blanco la declaración de datos private List<Report> data; .

Answer 2

Lo he arreglado

1: en struts.xml agrega:

<interceptor-ref name="json">
<param name="enableSMD">true</param>
</interceptor-ref>

2: en la solicitud de Ajax, agregue:

contentType: ''application/json''

3: Cambia el formato JSON que está mal formateado automáticamente por handontable. Hubo en JSON algunos caracteres como:% 5B% 5D% 7B% 7D% 22 en lugar de: [] {} "

Los he reemplazado por la función fixedEncodeURI ():

var data = ''{"data":'' + fixedEncodeURI(JSON.stringify(handsontable.getData())) + ''}'';
$.ajax({
url: "../json/saveJSONDataAction.action",
data: data, //returns all cells'' data
dataType: ''json'',
contentType: ''application/json'',
type: ''POST'',
success: function (res) {
}
});
function fixedEncodeURI (str) {
return encodeURI(str).replace(/%5B/g, ''['').replace(/%5D/g, '']'').replace(/%7B/g, ''{'').replace(/%7D/g, ''}'').replace(/%22/g, ''"'');
}