当前位置: 首页 > 工具软件 > x-editable > 使用案例 >

BootStrapTable X-editable特定行可编辑的解决方案

萧鸿轩
2023-12-01

工作中遇到一个需求:在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;

直接使用该元素返回。

 类似资料: