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属性一样的。