bootstrap-table可编辑扩展和x-editable writeback JSON

时间:2017-03-09 08:18:35

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

感谢您阅读我的文字。 这是我使用的项目(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']"

一切都运作良好。它从JSON中的API接收显示表的数据。

现在问题:
我想添加一些可编辑的字段。 我把这些东西包括在一个例子中:

[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>

我添加了测试&#34;数据可编辑=&#34; true&#34;属于我桌上的一个字段。 结果是它在光学上改变了字段,但它没有回写到我的api它只显示浏览器的变化。如果我刷新页面,则更改消失。

直到我不使用jquery,我想我还需要它吗?我是否需要在Table或Tableoptions上的任何位置定义PK以使其正常工作? 有人可以给我一个例子,我可以回复(POST)到API(URL)并格式化应该发布到API的JSON吗?

希望有人使用这个项目,可以帮助我。 对不起,如果事情不清楚或我做错了。我不是开发人员。 我不确定&#34;标签&#34;这里。希望它是正确的。

非常感谢你们!

2 个答案:

答案 0 :(得分: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
    },

答案 1 :(得分:0)

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
})