jqGrid的使用之---subGird
直接上代码，其它与后台交互和一般Grid没有区别：
html代码：
<table id="kpiTable" cellpadding="0" cellspacing="0"></table>
<div id="kpiPager"></div>
?
?
js代码：
jQuery("#kpiTable").jqGrid({
???? ?url:"../dashbord/getParentKPI.do",
???datatype: "json",
???height: 400,
???width:915,
???? ?colNames:['ID','KPI分类', '分类名称'],
???? ?colModel:[
???? ??{name:'id',index:'id', width:55, sortable:true},
???? ??{name:'type',index:'type', width:150,editable:true},
???? ??{name:'label',index:'label', width:150,editable:true}??
???? ?],
???? ?rowNum:8,
???? ?rowList:[8,10,20,30],
???? ?pager: '#kpiPager',
???? ?sortname: 'id',
????? viewrecords: true,
????? sortorder: "desc",
???multiselect: false,
???subGrid: true,
???editurl:"../dashbord/editParentType.do",
???jsonReader : {
????id : '0'
???},
???caption: "KPI分类",
???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+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
????jQuery("#"+subgrid_table_id).jqGrid({
?????url:"../dashbord/getSonKPI.do?pid="+row_id,
?????datatype: "json",
?????colNames: ['ID','分类ID','KPI指标ID','指标名称'],
?????colModel: [
??????{name:"id",index:"id",width:80,key:true,align:"center"},
??????{name:"pid",index:"pid",width:80,editable:true},
??????{name:"type",index:"type",width:80,align:"center",editable:true},
??????{name:"label",index:"label",width:120,align:"left",editable:true}
?????],
?????? ?rowNum:20,
?????? ?width:868,
?????? ?pager: pager_id,
?????? ?viewrecords : true,
?????forceFit : true,
?????editurl:"../dashbord/editSonType.do",
?????jsonReader : {
??????id : '0'
?????},
?????? ?sortname: 'id',
?????? ?height:"100%"
????});
????jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:true})
???}
??}).navGrid("#kpiPager",{
???edit : true,
???add : true,
???del : true
??});