Question

我想将jqxgrid中的所有数据导出到json中，然后通过AJAX将其发送到另一个页面。我的问题是当我单击导出按钮时，网格中的数据和导出前的数据不一样。它将浮点数改为Interger。这是我的代码：

使用Javascript：

$('#export_bt').on('click', function(){
  var row = $("#jqxgrid").jqxGrid('exportdata', 'json');
  $('#debug').html(row);
  console.log(row);
});

var tableDatas = [
  {"timestamp":"06:00:00","A":99.49,"B":337.77,"C":155.98},
  {"timestamp":"07:00:00","A":455.67,"B":474.1,"C":751.68},
  {"timestamp":"08:00:00","A":1071.02,"B":598.14,"C":890.47}
];

var tableDatafields = [
  {"name":"timestamp","type":"string"},
  {"name":"A","type":"number"},
  {"name":"B","type":"number"},
  {"name":"C","type":"number"}
];

var tableColumns = [
  {"text":"Times","datafield":"timestamp","editable":"false","align":"center","cellsalign":"center","width":150},
  {"text":"A","datafield":"A","editable":"false","align":"center"},
  {"text":"B","datafield":"B","editable":"false","align":"center"},
  {"text":"C","datafield":"C","editable":"false","align":"center"}
];

function setTableData(table_data,table_column,table_datafields)
{
  sourceTable.localdata = table_data;
  sourceTable.datafields = table_datafields;
  dataAdapterTable = new $.jqx.dataAdapter(sourceTable);
  $("#jqxgrid").jqxGrid({columns:table_column});
  $("#jqxgrid").jqxGrid('updatebounddata');
  $('#jqxgrid').jqxGrid('sortby', 'timestamp', 'asc');
  $("#jqxgrid").jqxGrid('autoresizecolumns');

  for(var i=0;i<table_column.length;i++){
    $('#jqxgrid').jqxGrid('setcolumnproperty',table_column[i].datafield,'cellsrenderer',cellsrenderer);
  }
}

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
  if (value||value===0) {
    return value;
  }
  else {
    return '-';
  }
};

var sourceTable ={ localdata: '', datatype: 'array'};

var dataAdapterTable = new $.jqx.dataAdapter(sourceTable);
dataAdapterTable.dataBind();

$("#jqxgrid").jqxGrid({
  width: '500',
  autoheight:true,
  source: dataAdapterTable,
  sortable: true,
  columnsresize: false,
  selectionmode: 'none',
  columns: [{ text: '', datafield: 'timestamp', width:'100%' , editable: false, align:'center'}]
});

setTableData(tableDatas,tableColumns,tableDatafields);

HTML：

<div id="jqxgrid"></div>
<button id="export_bt">Export</button>
<div id="debug"></div>

http://jsfiddle.net/jedipalm/jHE7k/1/

Answer 1

您可以在源对象中添加数据类型，如下所示。

datafields: [{ "name": "timestamp", "type": "number" }]

我还建议您在列定义中应用cellsformat。

{ text: 'timestamp', datafield: 'timestamp', cellsalign: 'right', cellsformat: 'd' }

可以看到可能的格式here。

希望有所帮助

Answer 2

您可以非常快速地导出数据，就像id为jqxGrid一样

var rows = $("#jqxGrid").jqxGrid("getrows");

它将是json数组。

从jqxgrid导出数据

2 个答案: