bootstrap 可编辑列表，实现某个单元格动态控制是否可编辑状态

bootstrap行内编辑列表的实现可借助x-editable组件，也可借助列的formatter属性通过格式化单元格来达到目的。这里要介绍的是如何动态控制单个单元格的是否可编辑状态。

第一种情况：使用x-editable组件下的动态控制

下面以表格中某一列的初始化代码为例
在editable中添加属性：toggleDisabled（这个属性相当于一个函数，通过传入参数，来控制是否可编辑）

...
{title: '合同名称', field: 'contractName', align: 'center',halign:'center',
    formatter:function (value, row, index) {
        return value;
    },
    editable: {
        type: 'text',
        showbuttons:true,
        validate: function (v) {
            if ($.trim(v) == '') {
                return '合同名称不能为空！';
            }
        },
        toggleDisabled:function(isEnable){
            if (isEnable){
                this.enable();// 可编辑
            } else {
                this.disabled();// 不可编辑
            }
        }
    }
},
...

下面是控制该单元格是否可编辑的代码，其中关于某个单元格的选择，视具体情况而定

// 可编辑状态
$("#TrackingTable tr[data-index='0'] a[data-name='contractName']").editable('toggleDisabled',true)

// 不可编辑状态
$("#TrackingTable tr[data-index='0'] a[data-name='contractName']").editable('toggleDisabled',false)

---

第二种情况：使用formatter格式化后的日期单元格

此处以bootstrap datetimepicker插件为例进行说明

...
{title: '合同签订日期', field: 'contractDate', align: 'center',halign:'center',
    formatter:function (value, row, index) {
        if(value==undefined){
            return "<input type='text' value='' class='form-control datetimepicker'>";
        }
        else{
            return "<input type='text' value='"+new Date(value).format("yyyy-MM-dd")+"' class='form-control datetimepicker'>";
        }
    }
},
...

// 可编辑状态
$("#TrackingTable tr[data-index='0'] .datetimepicker").prop("disabled", false).datetimepicker()

// 不可编辑状态（为灰色，不可点击）
$("#TrackingTable tr[data-index='0'] .datetimepicker").prop("disabled", true).datetimepicker()