JdGrid树形表格分页
2016-04-09 16:57
281 查看
有一次可以提出了一个既要分页显示表格而且还得将表格显示成树形结构,通过网上百度,我最终选择功能强大的JdGrid。官网API:http://blog.mn886.net/jqGrid/
从后端取出数据,构成JSON字符串,并且按照官网提出的固定格式交给前端JdGrid,这个json字符串的组合不落窠臼,这里不做过多陈述。
我主要讲第一次加载,和第二次点击查询按钮点击出现结果的情况。
第一次页面加载:
jQuery("#sg2").jqGrid({
url:url,
datatype: "json",
height: 350,
width:1165,
colNames:colNames,
colModel:[
{name:colNames[0],index:"id",hidden:true},
{name:colNames[1],index:"banhezhanminchen"},
{name:colNames[2],index:"gongchengmingcheng"},
{name:colNames[3],index:"jiaozuobuwei"},
{name:colNames[4],index:"qiangdudengji"},
{name:colNames[5],index:"gujifangshu"},
{name:colNames[6],index:"chuliaoshijian"},
{name:colNames[7],index:"sha1_shijizhi"},
{name:colNames[8],index:"shi1_shijizhi"},
{name:colNames[9],index:"sha2_shijizhi"},
{name:colNames[10],index:"shi2_shijizhi"},
{name:colNames[11],index:"guliao5_shijizhi"},
{name:colNames[12],index:"shuini1_shijizhi"},
{name:colNames[13],index:"shuini2_shijizhi"},
{name:colNames[14],index:"kuangfen3_shijizhi"},
{name:colNames[15],index:"feimeihui4_shijizhi"},
{name:colNames[16],index:"fenliao5_shijizhi"},
{name:colNames[17],index:"fenliao6_shijizhi"},
{name:colNames[18],index:"shui1_shijizhi"},
{name:colNames[19],index:"shui2_shijizhi"},
{name:colNames[20],index:"waijiaji1_shijizhi"},
{name:colNames[21],index:"waijiaji2_shijizhi"},
{name:colNames[22],index:"waijiaji3_shijizhi"},
{name:colNames[23],index:"waijiaji4_shijizhi"}
],
rowNum:20,
rowList:[15,30,60,120],
pager: '#psg2',
sortname: 'chuliaoshijian',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "树形表格列表",
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"expandOnLoad" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table>");
//得到字表的表格头部
oneTableHeader(subgrid_table_id,row_id);
}
});
jQuery("#sg2").jqGrid('navGrid','#psg2',{add:false,edit:false,del:false}); 对于界面上的每个参数来讲,这里不做累述,在JdGrid官网API中对于每个参数都有详情解释。而这里的表头
以上记录,感觉JdGrid很坑爹
从后端取出数据,构成JSON字符串,并且按照官网提出的固定格式交给前端JdGrid,这个json字符串的组合不落窠臼,这里不做过多陈述。
我主要讲第一次加载,和第二次点击查询按钮点击出现结果的情况。
第一次页面加载:
jQuery("#sg2").jqGrid({
url:url,
datatype: "json",
height: 350,
width:1165,
colNames:colNames,
colModel:[
{name:colNames[0],index:"id",hidden:true},
{name:colNames[1],index:"banhezhanminchen"},
{name:colNames[2],index:"gongchengmingcheng"},
{name:colNames[3],index:"jiaozuobuwei"},
{name:colNames[4],index:"qiangdudengji"},
{name:colNames[5],index:"gujifangshu"},
{name:colNames[6],index:"chuliaoshijian"},
{name:colNames[7],index:"sha1_shijizhi"},
{name:colNames[8],index:"shi1_shijizhi"},
{name:colNames[9],index:"sha2_shijizhi"},
{name:colNames[10],index:"shi2_shijizhi"},
{name:colNames[11],index:"guliao5_shijizhi"},
{name:colNames[12],index:"shuini1_shijizhi"},
{name:colNames[13],index:"shuini2_shijizhi"},
{name:colNames[14],index:"kuangfen3_shijizhi"},
{name:colNames[15],index:"feimeihui4_shijizhi"},
{name:colNames[16],index:"fenliao5_shijizhi"},
{name:colNames[17],index:"fenliao6_shijizhi"},
{name:colNames[18],index:"shui1_shijizhi"},
{name:colNames[19],index:"shui2_shijizhi"},
{name:colNames[20],index:"waijiaji1_shijizhi"},
{name:colNames[21],index:"waijiaji2_shijizhi"},
{name:colNames[22],index:"waijiaji3_shijizhi"},
{name:colNames[23],index:"waijiaji4_shijizhi"}
],
rowNum:20,
rowList:[15,30,60,120],
pager: '#psg2',
sortname: 'chuliaoshijian',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "树形表格列表",
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"expandOnLoad" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table>");
//得到字表的表格头部
oneTableHeader(subgrid_table_id,row_id);
}
});
jQuery("#sg2").jqGrid('navGrid','#psg2',{add:false,edit:false,del:false}); 对于界面上的每个参数来讲,这里不做累述,在JdGrid官网API中对于每个参数都有详情解释。而这里的表头
colNames我异步加载数组,给数组中通过下标给其赋值。同样表体也做这样的处理。
那么如果我在点击按钮时,在次调用这个方法是否可行呢?通过几经测试,发现无果。最终没办法,再次疯啃API,发现JdGrid通过调用这个方法,来实现这个效果:
<pre name="code" class="javascript">jQuery("#sg2").jqGrid('setGridParam', { url: url, page: 1 }).trigger("reloadGrid");
以上记录,感觉JdGrid很坑爹
相关文章推荐
- 环形队列的实现原理
- Swift之 ? 和 !
- 【VLC核心一】播放流程梳理->live555收流+ffmpeg:AVCodec解码
- 算法导论----<递归插入>及实例
- js测试
- 电梯调度问题之成长总结篇(二)
- Myeclipse里导入jQuery.js 时出现错误打红叉的解决方法
- Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统 nsswitch.conf配置文件
- c/c++字符、字符串输入输出
- 转发 重定向
- C语言求向量和的两则问题解答分享
- 使用Java语言编写一款日记软件
- JavaScript基础之函数与数组
- psr-4
- MySQL(help?)
- Git 2.0 更改 push default 为‘simple’
- Java 爬虫 菜逼教程 00
- CGAL编译与配置
- SDOI2016 Round1 滚粗记
- JQuery解析XML数据的几个例子