关于jqgrid插件中，树形表格的应用

今天遇到这样的一个需求，需要在表格中有树形的功能，也就是在一行的前面有个按钮，点了之后能够下拉出 子行，这个之前没有弄过，今天终于把它弄出来了，做个记录吧，主要还是参考了一些资料，也希望对大家有帮助吧

废话不多说，直接上代码：

	var grid = $("#gradeList").jqGrid({
			autowidth: true,
			shrinkToFit: true,
			width: width,
			height: "auto",
			colNames:colNamesArray,
			colModel:colModelArray,
            postData:{"examid":examid},
			url:"<%=path%>/stdhanaly.do?dispatch=schoolAvgZradarData",
			mtype: "post",
			leftCustomCtl: $('#leftBtn'),
            header: 'theader',
            pager: 'pager',
            datatype: "xml",
            sortname:'schoolid',
            sortorder:'desc',
        	rowNum:10,
        	rowList: [10,20,50],
		 	scrollrows: true,
			useColSpanStyle:true,
			groupHeaders:groupHeader,
			onSelectRow:function(id){
				alert("id:"+id);
				
			},
			subGrid : true,
			subGridRowExpanded: function(subgrid_id, row_id) {
				var schoolid = row_id;
				 var subgrid_table_id; 
		            subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id  
		              
		            var subgrid_pager_id;  
		            subgrid_pager_id = subgrid_id + "_pgr"  // (4)根据subgrid_id定义对应的子表格的pager的id  
		              
		            // (5)动态添加子报表的table和pager  
		            $("#" + subgrid_id).html("
");  
		            
		            $("#" + subgrid_table_id).jqGrid({ 
			            postData:{"examid":examid,"schoolid":schoolid},
		                url: '<%=path%>/stdhanaly.do?dispatch=schoolAvgZradarData',  // (7)子表格数据对应的url，注意传入的contact.id参数  
		                datatype: "xml",
						shrinkToFit: true,
						autowidth: true,
						
						colNames:colNamesArray,
						colModel:colModelArray,  
		                jsonReader: {   // (8)针对子表格的jsonReader设置  
		                    root:"gridModel",  
		                    records: "record",  
		                    repeatitems : false  
		                },  
		               // pager: subgrid_pager_id,  
		                viewrecords: true,  
		                height: "auto",  
		                rowNum: 99999,
		                loadBeforeSend:function(){
		                	var p= $("#"+subgrid_table_id).parent().parent().parent()
							p=$(p).find("table").first().hide();
			                
			            },
				loadComplete:function(){
				        //隐藏第一行标题栏
					//	var p= $("#"+subgrid_table_id).parent().parent().parent()
					//	p=$(p).find("table").first().hide();
				},
						
				onSelectRow:function(id){
					alert("id:"+id);
							
				}
		           }); 
			           
		            $("#" + subgrid_table_id).jqGrid('setGroupHeaders',{
		            	useColSpanStyle: true,
		    	        groupHeaders:groupHeader
			         });
			}
         
		});

其实原理也比较简单，就是在原有的gridl里面再写一个grid

注意:

subGrid : true,

subGridRowExpanded: function(subgrid_id, row_id)

这两个属性。

另外附上 subgrid的属性，事件 ，和方法说明

下列的属性请在grid的options(选项)中使用--注：详见options ColModel(选项和列设置)

属性	类型	描述	默认值
subGrid	boolean	若使用subgrid功能将此属性设置为true，此时在基本的Grid左侧会出现额外的显示加号图标的一列,表明用户可以点击加号展开该行显示subgrid数据，默认所有行是收缩的。	false
subGridOptions	object	一组对subgrid设置的属性，默认所有属性使用下列的默认值{ plusicon : “ui-icon-plus”, minusicon : “ui-icon-minus”, openicon: “ui-icon-carat-1-sw”, expandOnLoad: false, selectOnExpand : false, reloadOnExpand : true } plusicon and minusicon定义收缩和展开时的图标样式，名称必须符合Theme Roller的规范openicon当subgrid展开时minusicon下面的图标样式expandOnload为真时当数据装载时所有行自动展开selectOnLoad为真时当鼠标点击加号图标该行处于选中状态reloadOnExpand 为假时subgrid中的数据只装载一次，随后的点击仅仅显示隐藏数据并不会有ajax交互。
subGridModel	array	这是一组描述subgrid列属性和subgrid数据的数组，只有当subGrid为真才生效，语法如： subGridModel : [ { name : ['name_1','name_2',…,'name_n'], width : [width_1,width_2,…,width_n] , align : ['left','center',…,'right'] , params : [param_1,…,param_n], mapping:['name_1_map','name_2_map',…,'name_n_map']} ] name: 包含列去标签索引(labels)的数组 width: 包含列宽度的数组，个数要与name中的一致 align: 包含列中文字对齐状态的数组，值可为left、center、right，默认left params: 类型数组，默认只将行id传给服务端，可以添加一个额外的参数传给服务端，名称可以是colModel中的name属性值 mapping:当repeateditems为false才可用，我们用name映射subgrid中的name，
subgridtype	mixed	装入subgrid的数据类型。默认按父grid中的数据类型	null
subGridWidth	integer	设置subgrid列的宽度	true
subGridUrl	string	当subGrid属性为真才有效，获取subgrid数据的路径，jqGrid将行的ID增加此url中，若要添加其他参数，使用subGridModel
ajaxSubgridOptions	object	设置ajax的全局属性作用于当subgrid获得数据时，会覆盖当前ajax的所有设置，包括完成事件	0

在配置subgrid前你需要先在xmlReader或jsonReader中配置subgrid项，默认的设置是

xmlReader : {
…
subgrid: {
root: “rows”,
row: “row”,
repeatitems: true,
cell: “cell”
}
}
jsonReader : {
…
subgrid: {
root: “rows”,
repeatitems: true,
cell: “cell”
}
}

映射规则与基本grid中的相同，了解更多jqGrid中文文档(3)–数据操作

下面是一个subGridType从服务端获取的例子

1. jQuery("#grid_id").jqGrid({
2. ...
3. subgridtype: function(rowidprm) {
4. jQuery.ajax({
5. url:'url_to_the_service',
6. data:rowidprm,
7. dataType:"json",
8. complete: function(jsondata,stat){
9. if(stat=="success") {
10. var thegrid = jQuery("#grid_id")[0];
11. thegrid.subGridJson(eval("("+jsondata.responseText+")"),rowidprm.id);
12. }
13. }
14. });
15. },subgrid

rowidprms是一个包含行id和其他参数的数组，作为需要来设置subGridModel的参数和subGridJson方法

事件：

pID:点击行时会创建子表格subGrid，是个div元素，它的id就是pID
id：要展开行显示子表格的行id
sPostData：当subgrid响应时发布的数据

事件	参数	描述
subGridBeforeExpand	pID，id	展开grid前触发，事件应返回false或true，当返回false，subgrid中的行不会被展开也不会打开。
subGridRowExpanded	pID，id	subgrid生效并且点击展开加号图标钮时触发，可以在subgrid中设置自定义数据
subGridRowColapsed	pID，id	当点击收缩图标时触发，事件应返回false或true；当为false行不会收缩。
serializeSubGridData	pID，id	此事件被用作经过ajax响应后初始化数据，需返回初始化的数据(XML、JSON等格式)

方法：

事件	参数	描述
subGridBeforeExpand	pID，id	展开grid前触发，事件应返回false或true，当返回false，subgrid中的行不会被展开也不会打开。
subGridRowExpanded	pID，id	subgrid生效并且点击展开加号图标钮时触发，可以在subgrid中设置自定义数据
subGridRowColapsed	pID，id	当点击收缩图标时触发，事件应返回false或true；当为false行不会收缩。
serializeSubGridData	pID，id	此事件被用作经过ajax响应后初始化数据，需返回初始化的数据(XML、JSON等格式)