Grid作为Subgrid

　　此方法和事件比较像解决方案，而不是专门的方法。作为子表格的替代，调用父表格subGrid方法创建的为一个表格，不是子表格，拥有父表格的所有属性和功能，只是出现在展开记录的下面，效果如下图所示

Grid as Subgrid

安装

要使用这个方法，需要在下载页面勾选Subgrid后再下载jqGrid，下载地址：http://www.trirand.com/blog/?page_id=6。源文件grid.subgrid.js在src目录中。

定义

　　在配置中使用2个事件：subGridRowExpanded 和 subGridRowColapsed 。当定义了这2个事件，不会执行子表格的数据。因此可以使用subGridUrl获取自定义的数据并放到扩展的行里面，这样就可以很容易告知另外一个表格作为子表格，示例如下

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"
       });
   }
  }); 
});

注意 subGridRowColapsed 没有定义。这样行收缩时将会移除包含子表格内容的div元素（This is true because when the row is collapsed the contents of the div tag are removed.）

来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid

 

加支付宝好友偷能量挖...


原创文章，转载请注明出处：Grid作为Subgrid

评论(0)Web开发网
阅读(1921)喜欢(1)jqGrid中文API