JAVA Jquery jqgrid的subGrid子表格

最近用jguery 里用到的jgrid不少，因此总结下jqgrid怎么使用子表格

jqGrid的一项高级功能就是嵌套子表格，使用起来也很是简单。使用的方式有两种：

• 使用普通的subGrid子表格；
• 使用一个完整jqGrid做为子表格；

显然第二种方式更加通用，功能更增强大，所以我主要使用第二种方式。至于第一种方式，我还没试过

使用完整jqGrid做为子表格 

使用子表格，涉及到jqGrid的三个选项：

• subGrid ：首先必须将jqGrid的subGrid选项设置为true，默认为false；当此项设为true的时候，Grid表格的最左边将会添加一列，里面有一个“+”图标，用于展开子格；
• subGridRowExpanded ：当点击“+”展开子表格时，将触发此选项定义的事件方法；
• subGridRowColapsed ：当点击“-”收起子表格时，将触发此选项定义的事件方法；

注1 ：subGridRowExpanded定义的事件方法函数将会获得两个参数：

• subgrid_id ：子表格的id；当子表格展开的时候，在主表格中会建立一个div元素用来容纳子表格，subgrid_id就是这个div的id。
• row_id ：主表格中所要展开子表格的行的id。

注2 ：在subGridRowExpanded定义的事件方法函数中，便可根据以上两个参数，建立新的jqGrid对象，其中的options选项可参考主表格的jqGrid选项来运用。能够理解为在主表格中在嵌套一个新的jqGrid对象。固然，在subGridRowExpanded定义的事件函数中，也不必定非得嵌套一个新的jqGrid到主表格，能够将其放置于任何本身但愿的位置，甚至作些别的操做，根本不去里理会子表格，好比使用$.ajax()向Server发送ajax请求，并根据返回的json，作些自定义的操做。

注3 ：应当注意subGridRowColapsed的拼写并太符合规范，但却不得不遵循这个拼写。哈哈~

注4 ：相对于subGridRowExpanded必须定义事件函数来完成操做，subGridRowColapsed不用刻意定义对应的事件函数；由于当行收起的时候，上面提到的那个动态建立用来容纳子表格的div，其里面的内容将会被自动移除(removed)。

2.js代码使用示例：（主要代码为标红处）

//刷新页面

function flashPage() {

//判断是不是初始化

if(initFlag){

$("#StartOprateTime").val(formatDate("end"));

$("#EndOprateTime").val(formatDate("end"));

}

initFlag=false;

$("#dictlist").empty();

$("#dictlist").append('');

//列表

var jq = jQuery("#list4").jqGrid({

   url: "${pageContext.request.contextPath}/account_DayAccountSearchController/getDaySearchListController.json",

  datatype: "json",

  colNames:['CUSTNO','客户名称','昨日余额','入帐总金额','出帐总金额','余额','日结日期'],

  colModel:[

  {name:'CUSTNO',index:'CUSTNO', sortable:false,align:"center",hidden : true},

  {name:'CUST_NAME',index:'CUST_NAME',sortable:false,width:200},

  {name:'LASTBALANCE',index:'LASTBALANCE', sortable:false,width:160,align:"right"},

  {name:'INACCOUNT',index:'INACCOUNT', sortable:false,width:160,align:"right"}, 

  {name:'OUTACCOUNT',index:'OUTACCOUNT',sortable:false,width:160,align:"right"},

  {name:'BALANCE',index:'BALANCE',sortable:false,width:160,align:"right"},

  {name:'ENDDATE',index:'ENDDATE', sortable:false,width:80,align:"center"}

  ],

rownumbers: true, //设置列表显示序号,须要注意在colModel中不能使用rn做为index   

   multiselect: false, //多选框   

   multiboxonly: true, //在点击表格row时只支持单选，只有当点击checkbox时才多选，须要multiselect=true是有效   

  postData:{ 

CUST_NO :$("#CUST_NO").val(),

StartOprateTime : $("#StartOprateTime").val(),

EndOprateTime : $("#EndOprateTime").val()

},

  jsonReader: {

  repeatitems : false

  },

  pager: "pager2", //翻页

  rowNum: 20, //条数

rowList: [10,20,30,50,100], //可选值

viewrecords: true, //显示记录数

  autowidth: true, //表宽自动调整

  shrinkToFit: false, //列宽按比例调整

  subGrid: true,// (1)开启子表格支持

subGridRowExpanded: function(subgrid_id, row_id) {//(2)子表格容器的id和须要展开子表格的行id，将传入此事件函数 

var rowDate = $("#list4").jqGrid('getRowData', row_id);//经过索引获取当前行对象

strCustNo = rowDate.CUSTNO;

strEndDay = rowDate.ENDDATE;

var subgrid_table_id, pager_id;

subgrid_table_id = subgrid_id+"_t";//(3)根据subgrid_id定义对应的子表格的table的id

pager_id = "p_"+subgrid_table_id;//(4)根据subgrid_id定义对应的子表格的pager的id 

$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");   // (5)动态添加子报表的table和pager  

jQuery("#"+subgrid_table_id).jqGrid({// (6)建立jqGrid对象  

url: "${pageContext.request.contextPath}/account_DayAccountSearchController/getDaySearchDetailController.json",//(7)子表格数据对应的url  

  datatype: "json",

colNames:['CUSTNO','客户名称','卷别','昨日余额','入帐总金额','出帐总金额','余额','日结日期'],

  colModel:[

  {name:'CUSTNO',index:'CUSTNO', sortable:false,align:"center",hidden : true},

  {name:'CUST_NAME',index:'CUST_NAME',sortable:false,width:200,hidden : true},

  {name:'VALUE_KEY_NAME',index:'VALUE_KEY_NAME',sortable:false,width:170},

  {name:'LASTBALANCE',index:'LASTBALANCE', sortable:false,width:160,align:"right"},

  {name:'INACCOUNT',index:'INACCOUNT', sortable:false,width:160,align:"right"}, 

  {name:'OUTACCOUNT',index:'OUTACCOUNT',sortable:false,width:160,align:"right"},

  {name:'BALANCE',index:'BALANCE',sortable:false,width:160,align:"right"},

  {name:'ENDDATE',index:'ENDDATE', sortable:false,width:80,align:"center"}

  ],

  rownumbers: true, //设置列表显示序号,须要注意在colModel中不能使用rn做为index 

  postData:{ 

CUST_NO : strCustNo,

ENDDATE : strEndDay 

},  

               jsonReader: {   // (8)针对子表格的jsonReader设置  

                  // root:"gridModel",  

                 //  records: "record",  

                   repeatitems : false  

               },

  rowNum:5,

  pager: subgrid_pager_id,

  sortname: 'num',

   sortorder: "asc",

   height: '100%'

});

每一个公司的框架不同，但用法差很少，这里仅供参考。