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屬性即可實現。但該方法要刷新頁面重載后才能有效。