bootstrapTable显示隐藏列保存至cookie 根据上次设置动态隐藏显示列

只是隐藏显示列,每次进页面都固定显示几列,只在columns里在要隐藏的列上加visible:false即可

 {
     field: 'birthday',
     title: '出生日期',
     visible : false 
 },

 

根据上次设置动态隐藏显示列

首先要引入jquery.cookie.js(点击下载jquery.cookie.js,官网的请放心)

<script src="/js/jquery.cookie.js"></script>

需要给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 = '<a title="详情" onclick="edit(\'' + row.customerId + '\')"> ' + row.customerName + '</a>';
                            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 = '<a class="btn btn-primary btn-sm ' + s_edit_h + '" href="#" mce_href="#" title="编辑" onclick="edit(\'' + row.customerId + '\')"><i class="fa fa-edit"></i>编辑</a> ';
                            var g = '<a class="btn btn-primary btn-sm ' + s_edit_h + '" href="#" mce_href="#" title="编辑" onclick="dataEdit(\'' + row.customerId + '\')"><i class="fa fa-edit"></i>申请变更</a> ';
                            var d = '<a class="btn btn-warning btn-sm ' + s_remove_h + '" href="#" title="删除"  mce_href="#" onclick="remove(\'' + row.customerId + '\')"><i class="fa fa-remove"></i></a> ';
                            var f = '<a class="btn btn-success btn-sm" href="#" title="备用"  mce_href="#" onclick="resetPwd(\'' + row.customerId + '\')"><i class="fa fa-key"></i></a> ';
                            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
		}
	}
}