Bootstrap Table 使用教程进阶篇 之 父子表【父表下N个子表-不带条件】

  • A+
所属分类：Bootstrap Table

Bootstrap Table 使用教程进阶篇 之 父子表【父表下N个子表-不带条件】

Html

  1. <table id="Table"></table>  

JavaScript

  1. $('#Table').bootstrapTable({  
  2.     detailView: true,//父子表  
  3.     url: 'JsonCominfo',//服务器数据的加载地址  
  4.     columns: [],  
  5.     //注册加载子表的事件。注意下这里的三个参数！  
  6.     onExpandRow: function (index, row, $detail) {  
  7.         group(index, row, $detail)  
  8.     }  
  9. });  
注意：

子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数，
index：父表当前行的行索引。
row：父表当前行的Json数据对象。
$detail：当前行下面创建的新行里面的td对象。
第三个参数尤其重要，因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。

Group()方法

  1. function group(index, row, $detail)  
  2. {  
  3.     var parentid = row.REG_DOC_SN;  
  4.     var group_com = $detail.html('<table></table>').find('table');  
  5.     $(group_com).bootstrapTable({  
  6.         queryParams: { strParentID: parentid },  
  7.         detailView: true,  
  8.         columns: [{  
  9.             field: 'name',  
  10.         }],  
  11.         data: [{  
  12.             name:'社保'  
  13.         }, {  
  14.             name:'福利'  
  15.         }],  
  16.         onExpandRow: function (index, row, $detail)  
  17.         {  
  18.             if (row.name == "社保") {  
  19.                 InitSubTable(index, row, $detail, parentid);  
  20.             } else {  
  21.                 BizContr(index, row, $detail, parentid);  
  22.             }  
  23.         }  
  24.     });  
  25. }  

InitSubTable()方法

  1. function InitSubTable(index, row, $detail) {  
  2. var parentid = row.MENU_ID;  
  3. var cur_table = $detail.html('<table></table>').find('table');  
  4. $(cur_table).bootstrapTable({  
  5.     url: 'JsonAgm?REG_DOC_SN=' + row.REG_DOC_SN,  
  6.     method: 'get',  
  7.     queryParams: { strParentID: parentid },  
  8.     ajaxOptions: { strParentID: parentid },  
  9.     clickToSelect: true,  
  10.     //detailView: true,//父子表  
  11.     uniqueId: "AGM_ID",  
  12.     pageSize: 10,  
  13.     pageList: [10, 25],  
  14.     columns: [],  
  15.     //无线循环取子表，直到子表里面没有记录  
  16.     //onExpandRow: function (index, row, $Subdetail) {  
  17.     //    InitSubTable(index, row, $Subdetail);  
  18.     //}  
  19. });  
  20. };  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: