JdGrid树形表格分页

来源：互联网发布：js页面自动跳转方法编辑：程序博客网时间：2024/06/03 18:27

有一次可以提出了一个既要分页显示表格而且还得将表格显示成树形结构，通过网上百度，我最终选择功能强大的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很坑爹

0 0