本文共 2644 字，大约阅读时间需要 8 分钟。

       有一次可以提出了一个既要分页显示表格而且还得将表格显示成树形结构，通过网上百度，我最终选择功能强大的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("
   ");				//得到字表的表格头部				oneTableHeader(subgrid_table_id,row_id);	      			    	}	  	});	  	jQuery("#sg2").jqGrid('navGrid','#psg2',{add:false,edit:false,del:false});

colNames我异步加载数组，给数组中通过下标给其赋值。同样表体也做这样的处理。

那么如果我在点击按钮时，在次调用这个方法是否可行呢？通过几经测试，发现无果。最终没办法，再次疯啃API，发现JdGrid通过调用这个方法，来实现这个效果：

jQuery("#sg2").jqGrid('setGridParam', {            url: url,            page: 1        }).trigger("reloadGrid");

     以上记录，感觉JdGrid很坑爹

转载地址：http://mdagi.baihongyu.com/