Bootstraptable建立父子表需要一个属性detailView: true, //父子表这样就可以建立好父子表了

最新推荐文章于 2024-07-31 21:57:52 发布

轙_mac

最新推荐文章于 2024-07-31 21:57:52 发布

阅读量1w

点赞数 3

分类专栏：代码类文章标签： bootstrap css javascript

本文链接：https://blog.youkuaiyun.com/weixin_41438039/article/details/78832994

版权

代码类专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用Bootstrap Table插件实现复杂的表格布局，包括基本配置、数据填充、分页设置及子表展开功能。通过具体示例展示了如何定义表格样式、设置排序方式和展示父子表结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我自己写的页面代码。需要引入js

<script src="../../../js/common/jquery.min.js"></script>

<script src="../../../js/common/bootstrap.min.js"></script>

<script src="../../../js/common/bootstrap-table.js"></script>

<script src="../../../js/common/bootstrap-table-zh-CN.js"></script>

代码$(function() {

       var oTableInit = new Object();  

       var oInit = new Object();  

   $('#tb_agentService').bootstrapTable({

      data: [

          { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

      ],

      paginationPreText: '<', //上下翻页

        paginationNextText: '>',

      detailView: true, //父子表

      striped: true, //是否显示行间隔色

      pagination: true, //是否显示分页（*）

      sortOrder: "asc", //排序方式

      pageNumber: 1, //初始化加载第一页，默认第一页

      height: 400,

      pageSize: 10, //每页的记录行数（*）

      pageList: [10, 20], //可供选择的每页的行数（*）

      columns: [{

                  title: "序号",

                  formatter: function(value, row, index) {

                     return index + 1;

                  },

                  rowspan: 1,

                  align: 'center',

                  width: '50px'

               },{

            field: 'no',

            title: '位号',

            align: 'left',

         }, {

            field: 'type',

            title: '生产单元',

            align: 'left',

         }, {

            field: 'name',

            title: '报警标识',

            align: 'center',

            

         }, {

            field: 'money',

            title: '数量',   

            align: 'right',

         }

      ],

      onExpandRow: function(index, row, $detail) {

         oTableInit.InitSubTable(index, row, $detail);

      }

   });







oTableInit.InitSubTable = function(index, row, $detail) {

   var parentid = row.MENU_ID;

   var cur_table = $detail.html('<table></table>').find('table');

   $(cur_table).bootstrapTable({

      data: [{ "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

         { "no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' },

      ],

      method: 'get',

      queryParams: { strParentID: parentid },

      ajaxOptions: { strParentID: parentid },

      clickToSelect: true,

      pagination: true, //是否显示分页（*）

      sortOrder: "asc", //排序方式

      pageNumber: 1, //初始化加载第一页，默认第一页

      height: 260,

      pageSize: 6, //每页的记录行数（*）

      pageList: [6, 12, 24, 48], //可供选择的每页的行数（*）

        paginationPreText: '<', //上下翻页

        paginationNextText: '>',

      columns: [{

                  title: "序号",

                  formatter: function(value, row, index) {

                     return index + 1;

                  },

                  rowspan: 1,

                  align: 'center',

                  width: '50px'

               },{

            field: 'no',

            title: '子位号',

            align: 'left',

         }, {

            field: 'type',

            title: '生产单元',

            align: 'left',

         }, {

            field: 'name',

            title: '报警标识',

            align: 'center',

         }, {

            field: 'money',

            title: '报警数',

            align: 'right',

         },

         {

            field: 'time',

            title: '可预测性(%)',

            align: 'right',

         },

         {

            field: 'matter',

            title: '重要的(%)',

            align: 'right',

         }

      ],

      //无线循环取子表，直到子表里面没有记录

      onExpandRow: function(index, row, $Subdetail) {

         oInit.InitSubTable(index, row, $Subdetail);

      }

   });

   return oTableInit; 

};



});