您的位置:首页 > 其它

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中对于每个参数都有详情解释。而这里的表头
colNames我异步加载数组,给数组中通过下标给其赋值。同样表体也做这样的处理。
那么如果我在点击按钮时,在次调用这个方法是否可行呢?通过几经测试,发现无果。最终没办法,再次疯啃API,发现JdGrid通过调用这个方法,来实现这个效果:
<pre name="code" class="javascript">jQuery("#sg2").jqGrid('setGridParam', {
url: url,
page: 1
}).trigger("reloadGrid");



     以上记录,感觉JdGrid很坑爹
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: