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()