jqGrid的使用之---subGird

直接上代码，其它与后台交互和一般Grid没有区别：

html代码：

<table id="kpiTable" class="scroll" 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
  });