关于JAVA Jquery jqgrid的subGrid子表格

此前写的关于JAVA导出EXCEL 报表文章比较居多。最近用jguery 里用到的jgrid很多。

下面是关于，jqgrid行上嵌套子表格的技术分析。

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

使用普通的subGrid子表格；

使用一个完整jqGrid作为子表格；

1.选项含义

使用子表格，涉及到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，做些自定义的操作。

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("

"); // (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: pager_id,

  sortname: 'num',

   sortorder: "asc",

   height: '100%'

});

//jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})

}

});

//火狐下初始化自适应

myLayout.resizeAll();

}

对于如何从前台到后台传值取值，代码里都写清楚了。相信IT们都能看懂。

3.参考及demo

http://www.trirand.com/blog/jqgrid/jqgrid.html

>>advanced>>Subgrid /grid as subgrid