Bootstrap-table-edit实现动态控制table列的编辑状态

Bootstrap-table-edit实现控制table列的编辑状态

前段时间开发基于bootstarp-table和bootstrap-table-editable的一个小项目遇到一个需求是能够控制table中的指定列的编辑状态，根据后端查询的登录的账号权限查询改账号对该table的那些字段拥有修改权限。没有修改权限的字段不能够修改，也就是field不能有editable属性。bootstrap-table我就不介绍了，相信各位了解的更多。

1.bootstrap和bootstrap-table-editab初始化column定义：

{
			field:'baseName',
			title:'基地名',
			align:'center',
			editable:{
					type:'text',
					title:'基地名',
					validate:function(v){
						if(!v) return '基地名不能为空';
							}
				    }
				},{
			field:'iso',
			title:'基地代码',
			align:'center',	
			editable:{
				type:'text',
				title:'基地代码',
				validate:function(v){
					if(!v) return '基本标准不能为空';
						}
			    }
				},

在代码中可以看到需要提前将field添加editable属性，但是添加了之后就默认一直能够编辑table中的该列，而我们需要达到的目的是能够动态控制指定列的编辑状态。这时候就需要得到bootstrap-table的options，options中有已定义好的column的结构数组。然后在tableOnRefreshOptions函数中重新根据后端定义的table编辑控制新刷新column的editable定义，需要注意的一点是需要提前为filed写好editable信息，不然的话即使重写table的options也无法实现该列为编辑状态。

var options  = $("#manageDataList").bootstrapTable('getOptions').columns;
	tableOnRefreshOptions(options);  //动态指定table列的编辑状态

tableOnRefreshOptions（options）函数如下：

function tableOnRefreshOptions(options)
{
	var tableColumns = options[0];
	// 若拥有修改字段的权限
	if(update){
	// tableCon是从后端接收到的json字符串，其中的信息是指定该table中的列field是否能够被编辑 {id: true, baseName: false, iso: false, provice: true, areaIn: true, …}
		var columns = tableCon;
		for(var k=0;k<tableColumns.length;k++){
			var filedName = tableColumns[k].field;
			for(var i in columns){
				if(i = filedName){
					if(!columns[i]){              
						delete tableColumns[k].editable;
					}
				}
			}
		}
	}
	// 若没有修改的权限，则删除filed的editable属性
	else{
		for(var k=0;k<tableColumns.length;k++){
			delete tableColumns[k].editable;
		}
	}
	//  重写bootstrap-table的options中的columns后刷新表格，这里特别说明一定，在定义bootstrapTable的初始化时可以不用指定url，不然数据会被加载两次。。。在此处指定url后，table才会根据这个url获取数据，加载信息。
	$("#manageDataList").bootstrapTable('refreshOptions',{columns:tableColumns,url:"/GreeCC/getCapitalCCList.action"});
}

至此，动态控制bootstrap-table的列的编辑状态的需求就差不多完成了，还需要注意一点的是，我们还需要去修改boostrap-table-editable.js中的代码为如下（只需修改注释下方的代码即可）。

    BootstrapTable.prototype.initTable = function() {
        var that = this;
        _initTable.apply(this, Array.prototype.slice.apply(arguments));
        if (!this.options.editable) {
            return;
        }
        $.each(this.columns, function(i, column) {
            if (!column.editable) {
                return;
            }
            var editableOptions = {},
                editableDataMarkup = [],
                editableDataPrefix = 'editable-';
            var processDataOptions = function(key, value) {
                // Replace camel case with dashes.
                var dashKey = key.replace(/([A-Z])/g, function($1) {
                    return "-" + $1.toLowerCase();
                });
                if (dashKey.slice(0, editableDataPrefix.length) == editableDataPrefix) {
                    var dataKey = dashKey.replace(editableDataPrefix, 'data-');
                    editableOptions[dataKey] = value;
                }
            };
            $.each(that.options, processDataOptions);
            column.formatter = column.formatter || function(value, row, index) {
                    return value;
                };
            column._formatter = column._formatter ? column._formatter : column.formatter;
            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;
                // ----- 因为我们删除了editable属性，所以如果不判断一下column.editable属性是否为undefined的话，加载table会提示column.editable为undefined导致table初始化失败，无法显示数据。故这里如editable为undefined的话就不需要在做editable属性的初始化，直接显示数据。
                if(column.editable != undefined){
                	   if (column.editable.hasOwnProperty('noeditFormatter')) {
                           var process = column.editable.noeditFormatter(value, row, index);
                           if(!process.hasOwnProperty('class')){
                               process.class = '';
                           }
                           if(!process.hasOwnProperty('style')){
                               process.style = '';
                           }
                           _dont_edit_formatter = ['<a href="javascript:void(0)"',
                               ' data-name="'+process.filed+'"',
                               ' data-pk="1"',
                               ' data-value="' + process.value + '"',
                               ' class="'+process.class+'" style="'+process.style+'"',
                               '>' + process.value + '</a>'
                           ].join('');
                       }
                	   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(''),
                               '>' + value + '</a>'
                           ].join('');
                       } else {
                           return _dont_edit_formatter;
                       }
                }
                else{
                	  if (_dont_edit_formatter === false) {
                          return ['<p  data-name="' + column.field + '"',
                              ' data-pk="' + row[that.options.idField] + '"',
                              ' data-value="' + result + '"',
                              editableDataMarkup.join(''),
                              '>' + value + '</p>'
                          ].join('');
                      } else {
                          return _dont_edit_formatter;
                      }
                }

            };
        });
    };

至此，动态控制bootstrap-table的列的编辑状态的需求完成,效果图就不贴了，和没有指定editable属性一样的。