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.         var Json = [];  
  8.         var sb = { 'name': "社保" };  
  9.         var gjj = { 'name': "公积金" };  
  10.         if (row.WT_SB == "Y(已填单)") { Json.push(sb); }  
  11.         if (row.WT_GJJ == "Y(已填单)") { Json.push(gjj); }  
  12.         group(index, row, $detail, Json)  
  13.     }  
  14. });  

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

Group()方法

  1. function group(index, row, $detail, Json) {  
  2. var parentid = row.ID;  
  3. var group_com = $detail.html('<table></table>').find('table');  
  4. $(group_com).bootstrapTable({  
  5.     queryParams: { strParentID: parentid },  
  6.     detailView: true,  
  7.     columns: [{  
  8.         field: 'name',  
  9.     }],  
  10.     data: Json,  
  11.     onExpandRow: function (index, row, $detail) {  
  12.         if (row.name == "公积金信息") {  
  13.             InitSubTable(index, row, $detail, parentid);  
  14.         } else if (row.name == "社保信息") {  
  15.             TableJsonWTDSB(index, row, $detail, row.ID);  
  16.         }   
  17.     }  
  18. });  
  19. }  

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. };  

由此可以看出生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。

钰玺

发表评论

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