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)"',
            ' 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;

直接使用该元素返回。