Bootstrap-table editable 扩展和 x-editable 回写 JSON
Bootstrap-table editable extension and x-editable writeback JSON
这是我使用的项目(Bootstrap-table)
http://bootstrap-table.wenzhixin.net.cn/documentation/
我将 Table 与这些选项一起使用:
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 in JSON.
接收用于显示 Table 的数据
现在解决问题:
我想添加一些 editable 字段。
我包括了这些东西,就像我在示例中看到的那样:
[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>
我为测试 table 上的一个字段添加了“data-editable="true" 属性。
结果是它光学地改变了字段,但它没有写回我的 API。
它只在浏览器上显示更改,如果我刷新页面,更改就会消失。
您认为我需要使用 jquery 吗?
我是否需要在 Table 或 Table 选项的任何位置定义 PK 才能使其正常工作?
有人可以给我一个例子,我如何写回 (POST) 到 API (URL) 并格式化 JSON 应该 post 到 API好吗?
非常感谢大家!
使用 onEditableSave 方法。下面给出示例代码供您参考:
onEditableSave: function (field, row, oldvalue, $el) {
//console.log(field, row, oldvalue);
// write an ajax call to post back the values to your database
},
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
})
这是我使用的项目(Bootstrap-table)
http://bootstrap-table.wenzhixin.net.cn/documentation/
我将 Table 与这些选项一起使用:
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 in JSON.
接收用于显示 Table 的数据现在解决问题:
我想添加一些 editable 字段。
我包括了这些东西,就像我在示例中看到的那样:
[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>
我为测试 table 上的一个字段添加了“data-editable="true" 属性。 结果是它光学地改变了字段,但它没有写回我的 API。 它只在浏览器上显示更改,如果我刷新页面,更改就会消失。
您认为我需要使用 jquery 吗? 我是否需要在 Table 或 Table 选项的任何位置定义 PK 才能使其正常工作? 有人可以给我一个例子,我如何写回 (POST) 到 API (URL) 并格式化 JSON 应该 post 到 API好吗?
非常感谢大家!
使用 onEditableSave 方法。下面给出示例代码供您参考:
onEditableSave: function (field, row, oldvalue, $el) {
//console.log(field, row, oldvalue);
// write an ajax call to post back the values to your database
},
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
})