bootstrapTable显示隐藏列保存至cookie 根据上次设置动态隐藏显示列
只是隐藏显示列,每次进页面都固定显示几列,只在columns里在要隐藏的列上加visible:false即可
{
field: 'birthday',
title: '出生日期',
visible : false
},
根据上次设置动态隐藏显示列
首先要引入jquery.cookie.js(点击下载jquery.cookie.js,官网的请放心)
需要给visible一个函数
{
field: 'birthday',
title: '出生日期',
//visible : false
visible: visible("birthday")
},然后再加一个
//field表示你勾选的列，checked表示是否勾选，把这两个发送给后端即可
onColumnSwitch: function (field, checked) {
//把它存到cookie里
$.cookie(field, checked);
},visible函数:
//根据cookie显示隐藏显示列
function visible(name) {
//获取cookie的值
var cookieVal = $.cookie(name); //读取name为visibleVal的值
//如果没有设置cookie
if (cookieVal == undefined) {
//设置几个默认值
if (name == "birthday") {
return false;
}
if (name == "professionName") {
return true;
}
if (name == "residentialAddress") {
return true;
}
} else {
//如果有返回true,否则返回false
if (($.cookie(name)) == "true") {
return true
} else {
return false
}
}
}完整代码如下:
function load(url) {
$('#exampleTable')
.bootstrapTable({
method: 'get', // 服务器数据的请求方式 get or post
url: url, // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
showColumns: true,
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 设置为true会有隔行变色效果
dataType: "json", // 服务器返回的数据类型
pagination: true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect: false, // 设置为true将禁止多选
// contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize: 10, // 如果设置了分页，每页数据条数
pageNumber: 1, // 如果设置了分布，首页页码
// search : true, // 是否显示搜索框
showColumns: true, // 是否显示内容下拉框（选择显示的列）
minimumCountColumns: 5, // 设置最少显示列个数
sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
queryParams: function (params) {
return {
//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
limit: params.limit,
offset: params.offset,
sort: null == params.sort ? null : params.sort.replace(/([A-Z])/g, "_$1").toLowerCase(), //驼峰转下划线
order: params.order,
customerName: $('#customerName').val(),
phone: $('#phone').val()
};
},
//fixedColumns: true,//固定列
//fixedNumber:6,//固定前6列
// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns: [{
checkbox: true
}, {
field: 'customerName',
title: '客户姓名',
formatter: function (value, row, index) {
var e = ' ' + row.customerName + '';
return e;
}
}, {
field: 'phone',
title: '手机号码'
}, {
field: 'sexName',
title: '性别',
//sortable : true
}, {
field: 'birthday',
title: '出生日期',
//visible : false
visible: visible("birthday")
}, {
field: 'age',
title: '年龄',
sortable: true
}, {
field: 'professionName',
title: '职业',
visible: visible("professionName")
}, {
field: 'residentialAddress',
title: '居住地址',
visible: visible("residentialAddress")
}, {
field: 'label',
title: '标签',
visible: visible("label"),
sortable: true
}, {
title: '操作',
field: 'id',
align: 'center',
formatter: function (value, row, index) {
var e = '编辑 ';
var g = '申请变更 ';
var d = ' ';
var f = ' ';
return e + g;
}
}
],
//field表示你勾选的列，checked表示是否勾选，把这两个发送给后端即可
onColumnSwitch: function (field, checked) {
//把它存到cookie里
$.cookie(field, checked);
},
});
}
//根据cookie显示隐藏显示列
function visible(name){
//获取cookie的值
var cookieVal = $.cookie(name); //读取name为visibleVal的值
//如果没有设置cookie
if(cookieVal == undefined){
//设置几个默认值
if(name == "birthday"){
return false;
}
if(name == "professionName"){
return true;
}
if(name == "residentialAddress"){
return true;
}
}else{
//如果有返回true,否则返回false
if(($.cookie(name))=="true"){
return true
}else{
return false
}
}
}