Bootstrap Table 使用教程进阶篇 之 父子表

  • A+
所属分类:Bootstrap Table

Bootstrap Table 使用教程进阶篇 之 父子表

Html

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

JavaScript

  1. $('#Table').bootstrapTable({  
  2.     toolbar: '#toolbar',//一个jQuery 选择器,指明自定义的toolbar  
  3.     search: true,//是否启用搜索框  
  4.     showRefresh: true,//是否显示 刷新按钮  
  5.     showToggle: true,//是否显示 切换试图(table/card)按钮  
  6.     showColumns: true,//是否显示 内容列下拉框  
  7.     showExport: true,//是否显示导出  
  8.     detailView: true,//父子表  
  9.     minimumCountColumns: '2',//当列数小于此值时,将隐藏内容列下拉框。  
  10.     showPaginationSwitch: true,//是否显示 数据条数选择框  
  11.     pagination: true,//设置为 true 会在表格底部显示分页条  
  12.     idField: 'ID',//指定主键列  
  13.     sortName: 'ID',  
  14.     sortOrder: 'desc',  
  15.     uniquestyle: 'COM_STYLE',  
  16.     pageList: '[10, 25, 50, 100, ALL]',//如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。  
  17.     sidePagination: 'client',//设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法  
  18.     url: 'JsonCominfo',//服务器数据的加载地址  
  19.     columns: [],  
  20.     //注册加载子表的事件。注意下这里的三个参数!  
  21.     onExpandRow: function (index, row, $detail) {  
  22.         InitSubTable(index, row, $detail);  
  23.     }  
  24. });  

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

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,然后再注册这个对象的表格初始化即可。

效果图

Bootstrap Table 使用教程进阶篇 之 父子表

钰玺

发表评论

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