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%'

});

每一個公司的框架不同，但用法差很少，這裏僅供參考。