jqGrid框架中如何设置动态展示自定义的列

前提：用jqGrid框架实现的表格列

需求：有时候我们的表格展示了太多列，这时候我们想自定义需要展示的列

解决方法：

最开始是想用cookie来实现的，但是后面发现原始的列数据太多，经过cookie加密后发现超过4K了，而我们知道cookie的大小限制各个浏览器基本都是4K，所以cookie的方法不推荐，这里推荐的是H5的本地存储方法localStorage

以下为解决的部分代码及思路：

学过jqGrid的同学应该知道jqGrid有个加载数据的方法，我们这里暂且为加载json数据，其实其他类似xml数据也是一样的，因为我们主要操作的是其中的一个属性colModel的组装，我们知道colModel的形式大概如下：

colModel:[{name : 'NAME',label : '名称',width : 90,index : 'NAME'},{name : 'SEX',label : '性别',width : 90,index : 'SEX'}]

其实我们要做的就是在加载这个colModel之前先去查下本地存储是否有组装好的colModel数据，如果有则执行本地存储的，没有就执行初始化的

那么我们接下来就是要组装colModel了，首先我们建立一个html，大概如下(因为还要组装名称所以我们在value里用分隔符@分隔下)

<table>

<tr>

<td><input type="checkbox" name="colModel" value="NAME@名称" />名称</td>

<td><input type="checkbox" name="colModel" value="AGE@年龄" />年龄</td>

</tr>

</table>

<div style="margin-top:100px;">

<button type="button" id="selectAll" class="btn btn-primary btn-min-width">全选</button>

<button type="button" id="selectNone" class="btn btn-primary btn-min-width">全不选</button>

<button type="button" id="setDefineShow" class="btn btn-success btn-min-width">确定</button>

<button type="button" id="cancelBtn" class="btn btn-default btn-min-width">取消</button>

</div>

然后在js进行处理：

function selectAll_click(){// 全选，为防止只生效一次的问题，用prop不用attr

$("input[name='colModel']").prop("checked",true);

}

function selectNone_click(){// 全不选

$("input[name='colModel']").prop("checked",false);

}

function setDefineShow_click(){// 保存到localStorage

var that = this;

var chk_value =[];

$('input[name="colModel"]:checked').each(function(){

chk_value.push($(this).val());

});

if(chk_value.length==0){

alert("你还没有选择任何内容！");

}else{

var colModel = '['

+ '{"name":"ID","label":"ID","index":"ID","key":true,"hidden":true}';

for(var i=0,len=chk_value.length;i<len;i++){

var v1 = chk_value[i].split('@')[0];

var v2 = chk_value[i].split('@')[1];

colModel += ',{"name":"'+v1+'","label":"'+v2+'","index":"'+v1+'","width":100}';

}

colModel += ']';

// 不使用cookie因为cookie限制大小4K

var storage=window.localStorage;

storage['colModel']=colModel;

alert("设置成功，重新打开此标签页生效!");

}

}

还有个要注意的就是，我们点击自定跳转到自定义页面时我们希望能展示我们之前已经定义的即之前已经定义好的希望复选框勾上，那么有个初始化操作如下：

function resizeGridShow(){// 加载之前选中的

var storage=window.localStorage;

if(storage['colModel']){

colModelTemp = storage['colModel'];

var colModel = JSON.parse(colModelTemp);

var checkBoxAll = $("input[name='colModel']");// 获取所有复选框对象

for(var i=0,len=colModel.length;i<len;i++){

$.each(checkBoxAll,function(j,checkbox){

var checkValue=$(checkbox).val().split('@')[0];

if(colModel[i].name==checkValue){

$(checkbox).attr("checked",true);

}

});

}

}

}

到此为止我们基本上已经做完了设置自定义列并且已经保存到本地存储中了，接下来就是加载加载这个colModel之前先去查下本地存储是否有组装好的colModel数据，如果有则执行本地存储的，没有就执行初始化的，要注意的是在整个加载函数前判断，部分代码如下：

var storage=window.localStorage;

if(storage['colModel']){// 本地存储存在，加载其中的colModel

var colModelTemp = storage['colModel'];

....

colModel:colModel:JSON.parse(colModelTemp),

rowNum: 50,

recordtext:"{0}-{1} 共{2}条",

pgtext : " 第{0}页/共{1}页",

rowList: [5, 10, 15,20, 50, 100, 200, 500],

pager: true,

...

}else{// 原始加载

....

colModel:[{name : 'NAME',label : '名称',width : 90,index : 'NAME'},{name : 'SEX',label : '性别',width : 90,index : 'SEX'}],

rowNum: 50,

recordtext:"{0}-{1} 共{2}条",

pgtext : " 第{0}页/共{1}页",

rowList: [5, 10, 15,20, 50, 100, 200, 500],

pager: true,

...

}