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属性即可实现。但该方法要刷新页面重载后才能有效。
来源:oschina
链接:https://my.oschina.net/u/4265966/blog/3324264