BootStrapTable X-editable特定行可編輯的解決方案

工作中遇到一個需求：在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)" target="_blank" rel="external nofollow" ',
			' 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;
           

直接使用該元素傳回。