以 JSON 格式将 jquery 数据表数据发布到服务器

Question

我知道这个问题已经在 SO 和数据表网站上被问过很多次，但我无法使用提供的解决方案让它工作。

我正在客户端构建我的数据表，现在想以 json 格式将客户端数据发布到我的 wep api 控制器。

客户端在添加/删除行时工作正常。 但是当我尝试使用以下方法创建我的 JSON 时：

    var table = $('#detailTable').DataTable();
var details = JSON.stringify(table.rows().data().toArray());

我得到以下结果：

[["11046","ABC","bis","123","123",15129]]

所以基本上我的 JSON 对象中缺少列名，因此 web api 无法将其拾取并将其转换为：

List<ReceiptEntryViewModel> ReceiptDetails

那么我怎样才能让数据表生成以下格式的 JSON：

[["ItemId":"11046","ItemCode":"ABC","ItemName":"bis","Price":"123","Quantity":"123","Total":15129]]

Answer 1

如果你只是想收集列名并将它们用作 JSON 中的属性名，那么你可以这样构建一个列名数组：

var fieldNames =  [], json = []
table.settings().columns()[0].forEach(function(index) {
  fieldNames.push($(table.column(index).header()).text())  
})

我正在使用text() 过滤掉任何 HTML。然后按照上面的方法执行，但要遍历每一行，并使用收集的 fieldNames 为每一行构造一个对象文字（JSON 项）：

table.rows().data().toArray().forEach(function(row) {
  var item = {}
  row.forEach(function(content, index) {
     item[fieldNames[index]] = content
  })
  json.push(item)
})  

现在您有一个有效的 JSON，您可以stringify 并发送到服务器。

小样演示 -> http://jsfiddle.net/5j9wgorj/

请注意，这只是一个示例。如果你有更大的数据集，你应该避免使用forEach，而是使用for-loops。此外，不需要盲目地重新构建标题名称数组，因为您作为开发人员，既知道列名，也知道您希望属性被预先命名为什么。

---

使用最终的解决方案进行更新。如果 dataTable 本身已准备好使用 JSON，则可以避免构建 JSON 的扭曲。定义一个columns 部分：

var table = $('#example').DataTable({
  columns : [
    {  data : 'myField' }
  ]
})

并以 JSON / 文字形式插入新行：

table.row.add({ myField: 'some value' }).draw()

现在

JSON.stringify( table.rows().data().toArray() )

将返回一个可以传递给服务器脚本的有效 JSON 字符串。

演示 -> http://jsfiddle.net/d07f6uvf/