JdGrid树形表格分页

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值