bootstrap-table-editable 实现表格行编辑 - 假面佛

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

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