[jqGrid] Subgrid as Grid 설명

 [ jqGrid 한글 API 문서 링크 ]

실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



Subgrid as Grid

 - grid.subgrid.js 모듈이 로드 되어야 한다.
 - 일반적으로 많이 쓰이지 않지만 가능한 이벤트와 메소드를 가지고 더 좋은 해결방법일 수도 있다.
 - 부모 그리드와 같은 기능을 가진 서브그리드를 부모레코드 아래에 나타낼 수 있다.

정의

 - 옵션배열에 설명된 2가지 이벤트를 사용한다.
  (subGridRowExpanded, subGridRowColapsed)
 - 이러한 이벤트를 정의하면 서브그리드에 있는 데이터가 자동으로 채워지지 않으며, subGridUrl을 이용하여 사용자정의 데이터로 row가 펼쳐질 때 데이터를 넣을 수 있고 서브그리드 역할을 하는 다른 그리드를 쉽게 구성이 가능하다.
  (row가 축소될 때 콘텐츠가 있는 div태그가 삭제되기 때문에 subGridRowColapsed는 정의하지 않았다.)
1004lucifer

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
    // we pass two parameters
    // subgrid_id is a id of the div tag created within a table
    // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) - which returns associative array in type name-value
    // here we can easy construct the following
       var subgrid_table_id;
       subgrid_table_id = subgrid_id+"_t";
       jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
       jQuery("#"+subgrid_table_id).jqGrid({
          url:"subgrid.php?q=2&id="+row_id,
          datatype: "xml",
          colNames: ['No','Item','Qty','Unit','Total'],
          colModel: [
            {name:"num",index:"num",width:80,key:true},
            {name:"item",index:"item",width:130},
            {name:"qty",index:"qty",width:80,align:"right"},
            {name:"unit",index:"unit",width:80,align:"right"},           
            {name:"total",index:"total",width:100,align:"right",sortable:false}
          ],
          height: '100%',
          rowNum:20,
          sortname: 'num',
          sortorder: "asc"
       });
   }
  }); 
}); 
</script>

참조
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid