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