Bootstrap-table 可编辑扩展和 x-editable 写回 JSON答案

【问题标题】：Bootstrap-table editable extension and x-editable writeback JSONBootstrap-table 可编辑扩展和 x-editable 写回 JSON
【发布时间】：2017-03-09 08:18:34
【问题描述】：

这是我使用的项目（Bootstrap-table）
http://bootstrap-table.wenzhixin.net.cn/documentation/

我使用带有这些选项的表格：

  data-toggle="table"
  data-url="api/api.php/"
  data-side-pagination="client"
  data-query-params="queryParams"
  data-response-handler="responseHandler"
  data-pagination="true"
  data-page-list="[10, 25, 50, 100, ALL]"
  data-page-size="20"
  data-sort-name="nr"
  data-sort-order="desc"
  data-striped="true"
  data-show-refresh="true"
  data-show-columns="true"
  data-height="720"
  data-detail-view="true"
  data-detail-formatter="detailFormatter"
  data-sortable="true"
  data-search="true"
  data-show-export="true"
  data-export-types="['excel']"

一切正常。它从我的 API 以 JSON 格式接收显示表格的数据。

现在解决问题：
我想添加一些可编辑的字段。我在示例中包含了这些内容：

[example]
http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html
 
[included stuff] 
JS:
bootstrap-table/extensions/editable/bootstrap-table-editable.js
http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js
CSS:
http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css<br>

我添加了一个用于测试“data-editable="true" 属性到我的表格中的一个字段。结果是它在光学上改变了字段，但它不会写回我的 API。它只在浏览器上显示更改，如果我刷新页面，更改就消失了。

你认为我需要使用 jquery 吗？我是否需要在 Table 或 Tableoptions 的任何地方定义一个 PK 才能使其正常工作？有人可以给我一个例子，我该如何写回（POST）到 API（URL）并格式化应该发布到 API 的 JSON？

非常感谢大家！

【问题讨论】：

标签： jquery twitter-bootstrap x-editable bootstrap-table

【解决方案1】：

使用 onEditableSave 方法。下面给出的示例代码供您参考：

        onEditableSave: function (field, row, oldvalue, $el) {
        //console.log(field, row, oldvalue);
        // write an ajax call to post back the values to your database
    },

【讨论】：

我没有让 console.log 工作..似乎没有调用这个函数。 function onEditableSave(field, row, oldvalue, $el) { console.log(field, row, oldvalue); // write an ajax call to post back the values to your database }
请你再给我一个例子吗？

【解决方案2】：

jQUERY 必须加载在页眉而不是页脚中：/ 然后它可以工作：

我现在可以使用的测试函数：

$('#table').on('editable-save.bs.table', function(e, field, row, oldValue, $el){
    console.log(row);
    // write an ajax call to post back the values to your database
})

【讨论】：