bootstrap-table-editable 实现表格行编辑

自闭症网瘾萝莉.ら 提交于 2020-11-27 04:30:44
https://bootstrap-table.com
http://github.com/vitalets/x-editable

$("#table").bootstrapTable({ url: "", editable: true, columns: [ { title: that.columns['Operate'], field: '_', align: 'center', }, { title: that.columns['x1'], field: 'x1', align: 'center', editable: { canEdit: true, type: 'number', validate: function (v) { if (v.length > 9) { return "数字超出范围"; } } }, cellStyle: function (value, row, index) { if (value == undefined || value == "" || isNaN(value)) { return { css: { "background-color": "yellow" } } } else { return { css: { "background-color": "white" } } } }, formatter: function (value, row, index) { if (value == null || value == 'NaN') { return ""; } else { return value; } } }]

这里要注意一点
canEdit: true  是修改原代码增加的属性,因为原代码判断 editable 属性存在就认为可编辑,与需求有一定出入。因此在原代码

$.each(this.columns, function(i, column) {
if (!column.editable) {
return;
}

if (!column.editable.canEdit) {
return;
} 增加如下代码  

table.options.editable 属性标识整行是否可以编辑,如果要实现列编辑动态锁定,更改canEdit属性即可实现。但该方法要刷新页面重载后才能有效。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!