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属性即可实现。但该方法要刷新页面重载后才能有效。