工作中遇到一个需求:在bootstrapTable中存在一个树结构,只有叶子节点才可编辑一些列。
/*初始化添加迭代待办事项表格 */
$('#addItrMngBackLogTable').bootstrapTable({
url : "/post",
method: "POST",
dataType: "json",
treeView : true,
treeId : "fd",
treeField : "fd",
treeRootLevel : 1,
uniqueId : "id",
pagination: false,
editable: true,
columns : [
{field:'checkBox',title:'checkBox',checkbox:true},
{
field: 'fd',
title: '树结构'
},
{field: 'priority', title: '优先级'},
{field: 'status', title: '状态'},
{field: 'description', title: '描述'},
{
field: 'canedietcol',
title: '可编辑列',
editable: {
type: 'text', //编辑框的类型。支持text|textarea|select|date|checklist等
emptytext: "点击输入",
noeditFormatter: function (value,row,index) {
if(row.isParent == "Y"){
return "";
} else{
return false;
}
}
}
}
]
});
noeditFormatter属性返回false可屏蔽当前设置,返回其他即作为单元格输出样式。
源码分析:
column.formatter = function(value, row, index) {
var result = column._formatter ? column._formatter(value, row, index) : value;
$.each(column, processDataOptions);
$.each(editableOptions, function(key, value) {
editableDataMarkup.push(' ' + key + '="' + value + '"');
});
var _dont_edit_formatter = false;
if (column.editable.hasOwnProperty('noeditFormatter')) {
_dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
}
if (_dont_edit_formatter === false) {
return ['<a href="javascript:void(0)"',
' data-name="' + column.field + '"',
' data-pk="' + row[that.options.idField] + '"',
' data-value="' + result + '"',
editableDataMarkup.join(''),
'>' + '</a>'
].join('');
} else {
return _dont_edit_formatter;
}
};
通过源码可以看出,editable支持添加属性noeditFormatter。
if (column.editable.hasOwnProperty('noeditFormatter')) {
通过这个属性可编辑自己想要的格式。
if (column.editable.hasOwnProperty('noeditFormatter')) {
_dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
}
if (_dont_edit_formatter === false) {
通过给noeditFormatter属性返回false,可用editTable原生的格式。返回其他则
return _dont_edit_formatter;
直接使用该元素返回。