目前在做一个项目要求列要可排序,可筛选,可编辑,并且支持显示和隐藏,排序、编辑、筛选都比较好做,唯一的一个显示和隐藏正常情况下我们只需加上
showColumns: true, //显示下拉框勾选要显示的列
即可
但现在的要求是要勾选后,把显示隐藏项发送给后端,下次再登录时,直接显示上次的配置。
看了官网文档没法先解决方案,后来看源码发现有一个方法
onColumnSwitch: function (field, checked)
{
//field表示你勾选的列,checked表示是否勾选,把这两个发送给后端即可
},
如果帮到你了,麻烦给个赞
刚看到有小伙伴评论要详细点,所以更新一下:
//点击显示隐藏
function onColumnSwitch( field, checked )
{
//调用fnAssembledata方法获取列表中每一项的状态
var ColumnVisibleData = fnAssembledata();
//alert( JSON.stringify( ColumnVisibleData ) )
//把每一项的状态更新给后台,刷新后请求后台吧返回的_columns 重新赋值给columns 即可
UpdateARRank( ColumnVisibleData )
}
//获取列表中每一项的状态
function fnAssembledata( ReviseVal, FieldId)
{
if (!FieldId){
FieldId = "";
ReviseVal = "";
}
var columntotal = $( '#LedgersheetTable' ).bootstrapTable( 'getOptions' ).columns[0].length;
var tableData = $( '#LedgersheetTable' ).bootstrapTable( 'getOptions' ).columns[0];
var ReorderTable = [];
for ( var i = 0; i < columntotal; i++ )
{
var field = tableData[i].field;
var fieldIndex = tableData[i].fieldIndex;
var visible = tableData[i].visible;
var title = (tableData[i].field == FieldId?ReviseVal:tableData[i].title);
var sortable = tableData[i].sortable;
var align = tableData[i].align;
var valign = tableData[i].valign;
var formatter = tableData[i].formatter;
ReorderTable.push( { "field": field, "fieldIndex": fieldIndex, "visible": visible, "title": title, "sortable": sortable, "align": align, "valign": valign, "formatter": formatter } )
}
return ReorderTable;
};
//UpdateARRank
function UpdateARRank( e )
{
for ( var i = 0; i < e.length; i++ )
{
var item = e[i];
if ( item.formatter )
{
item.formatter = item.formatter.toString();
}
item.title = item.title.toString();
}
var da = JSON.stringify( e );
$.ajax( {
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/api/Dashbrands/ARRankUpdate',
data: da,
success: function ( data )
{
if ( data.Success )
{
for ( var i = 0; i < data.Result.length; i++ )
{
var item = data.Result[i];
if ( item.formatter )
{
item.formatter = eval( "(" + item.formatter + ")" );
}
}
//eval()
//*重点看这里,重新赋值给columns即可
columns = data.Result;
}
else
{
alert( '鑾峰彇columns澶辫触' );
}
$( '#LedgersheetTable' ).bootstrapTable( "destroy" );
GetARRank(true);
//refreshData();
},
error: function ( err )
{
},
} );
}