使用JQGrid中可见列并存入Cookie

引入js与css

<link href="~/Content/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/js/jqGrid-master/jqGrid-master/css/addons/ui.multiselect.css" rel="stylesheet" />
<link href="~/Content/js/jqGrid-master/jqGrid-master/css/ui.jqgrid.css" rel="stylesheet" />

<link href="~/Content/js/jqgrid/jqgrid.css" rel="stylesheet" />




<script src="~/Content/js/jqGrid-master/jqGrid-master/jquery.js"></script>
<script src="~/Content/js/jquery-ui/jquery-ui.min.js"></script>
<script src="~/Content/js/jqGrid-master/jqGrid-master/js/addons/ui.multiselect.js"></script>
<script src="~/Content/js/jqGrid-master/jqGrid-master/js/jquery.jqGrid.js"></script>
<script src="~/Content/js/jqGrid-master/jqGrid-master/js/i18n/grid.locale-cn.js"></script>

 

打开ui.multiselect.js 写入存储cookie

在最前声明全局变量

var cok = ""; var bol = "";

var getSec = function (str) {
    var str1 = str.substr(0, str.length - 1);  //时间数值
    var str2 = str.substr(str.length - 1, 1);    //时间单位
    if (str2 == "s") {
        return str1 * 1000;
    }
    else if (str2 == "m") {
        return str1 * 60 * 1000;
    }
    else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
    }
    else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
    }
}
/**
   * cookie中存值
   * */
//添加cookie
var addCookie = function (name, value) {
    var strSec = getSec('1h');
    var exp = new Date();
    exp.setTime(exp.getTime() + strSec * 1);
    //设置cookie的名称、值、失效时间
    document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
}

function setCookie(name, value) {
    if (value) {
        var strSec = getSec('200000d');
        var exp = new Date();
        exp.setTime(exp.getTime() + strSec * 1);
        //设置cookie的名称、值、失效时间
        document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
        //var days = '1h'; //定义一天
        //var exp = new Date();
        //exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
        //// 写入Cookie, toGMTString将时间转换成字符串
        //document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString;
    }
};

/**
* cookie中取值
* */
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); //匹配字段
    if (arr = document.cookie.match(reg)) {
        return unescape(arr[2]);
    } else {
        return null;
    }
};
/**
* 清除指定cookie值
* */
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = setCookie(name);
    if (cval && cval != null) {
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()
    }
};

 

 

 在此处给li增加一个id，保存使用的标识

在  _setSelected: function (item, selected) {方法中添加

            
            if ($(".selected li").length <= 16) {//限制显示最小列数

                return false;
            }
            
            cok += item[0].id + ",";//cookie name
            bol += selected + ",";//cookie value

 

在 _create: function () 方法中添加一个按钮点击事件用来存入cookie

     
            $('.confirm').on('click', function () {
                var ali = $('ul.selected>li')
                
                bol = bol.substring(0, bol.length - 1);
                cok = cok.substring(0, cok.length - 1);
             
                var stringbol = bol.split(',');
                var stringcok = cok.split(',');

                for (var i = 0; i < stringbol.length; i++) {

                    if (stringbol[i] == "true") {
                        setCookie(stringcok[i], "1");
                       
                    } else {
                        setCookie(stringcok[i], "2");
                       
                    }
                }
                setCookie(a, "0");

                $(".ui-jqgrid-bdiv").width($("#body").width());//
                $(".ui-corner-top").width($("#body").width());//调整宽度
                $("#gview_jqGrid").width($("#body").width());//
              

            });

 

 

 给这个按钮添加一个.confirm 类用来对应方法

然后就可以使用了。

注意JQ版本我使用的是5.5版本