bootstrapTable tabla padre-hijo

Crear tabla principal

$('#atptable').bootstrapTable({
            url: 'url',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#atptoolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: false,                   //是否显示分页(*)
            iconSize: 'outline',
            sortable: true,                     //是否启用排序
            sortOrder: "DESC",                   //排序方式
            queryParams: queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 1000,                       //每页的记录行数(*)
            pageList: [5, 10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: false,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            uniqueId: "id",                     //每一行的唯一标识,一般为主键列
            detailFormatter: "detailFormatter",
            detailView: true,                   //是否显示父子表
            // cardView:true,
            initialState: 'expanded',
            singleSelect: true,
            responseHandler: function (res) {    
            // 对服务器返回的数据进行编辑 
                return {
                    total: pay_task_list.length,
                    rows: pay_task_list
                }
            },
            // 注册加载子表的事件。注意下这里的三个参数! row会传递数据到子表
            onExpandRow: function (index, row, $detail) {
                InitSubTable(index, row, $detail);
            },
            columns: [

                { checkbox: true, },
                {
                    title: '序号',
                    width: 40,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
            ],
            onSort: function (name, order) {
            },
            onCheck: function (row, $element) {
                parent_index = $element.data('index');
                $('#atptable').bootstrapTable('expandRow', parent_index);
            }

        });

Crear tabla secundaria

function InitSubTable(index, row, $detail) {
        var parentid = row.stpt_atpid;
        var stpt_shouldpaymoney = row.stpt_shouldpaymoney
        var cur_table = $detail.html('<table id="table_' + index + '"></table>').find('table');
        // confirm_income_list_sun: 子表的数据
        $(cur_table).bootstrapTable({
            data: confirm_income_list_sun,
            clickToSelect: true,
            detailView: true,
            uniqueId: "MENU_ID",
            pageSize: 10,
            detailView: false,                   //是否显示父子表
            pageList: [10, 25],
            singleSelect: true,
            columns: [
                { checkbox: true },
                {
                    title: '序号1', width: 40,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                { field: 'part_tax', title: '税率', sortable: true, width: 150 },
            ],
            // onLoadSuccess:function(){
            //     console.log('onLoadSuccess:function')
            // },

            onPostBody: function (data) {
                // console.log('子表格数据', data)
                // 在子表格最后插入dom
                cur_table.next('.label_tips').remove();
                cur_table.after('<h4 class="label_tips"><b> 插入文字 </b></h4>');
            },
            // 获取选中子表格的索引值
            onCheck: function (row, $element) {
                table_id = $($element).parents('table').prop('id')
                table_index = $element.data('index');
            }
        });

 

Supongo que te gusta

Origin blog.csdn.net/qq_37514029/article/details/105949014
Recomendado
Clasificación