jqGrid框架中如何设置动态展示自定义的列
2017-11-11 11:22
316 查看
前提:用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,
...
}
需求:有时候我们的表格展示了太多列,这时候我们想自定义需要展示的列
解决方法:
最开始是想用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,
...
}
相关文章推荐
- 如何自定义一个View,并动态设置style?
- 如何动态设置ImageView的宽高以及位置
- ios如何设置主题,框架
- 【转】如何使用代码动态设置水晶报表中的文本,字段等对象呢?
- 【原创】如何在Android中为TextView动态设置drawableLeft等
- android如何设置全屏的DialogFragment以及自定义提示框支持横竖屏显示
- Extjs 如何在分页工具栏中设置动态条数Pageszie 的例子
- 如何设置JavaScript某个自定义的对象属性为只读
- 如何开发一个java开源框架-----Jvn框架之实现自定义Annotation以及拦截器(第五讲)
- 如何动态改变框架的大小[转]
- jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
- java 如何自定义异常 用代码展示 真心靠谱
- 如何在Web页中动态配置和保存自定义数据
- 移动端应该如何动态设置字体大小?
- C#如何动态设置屏幕分辨率
- 如何给datawindow某一列动态设置成dddw或者ddlb,并且赋值?
- [置顶] 手把手教你如何自定义DAO框架(重量级干货)
- 如何利用jqGrid表格方法重新设置caption属性值
- QT中如何在ComboBox中设置存放自定义类型
- 如何自定义设置系统中Tabbar上的文字和图标的颜色