• bootstrap table 主子表 局部数据刷新(刷新子表)


    1、主表中设置data-detail-view="true",启用主子表模式:

    <table class="table table-striped" width="80%" id="ds_table" align="center"
           striped="true"
           data-height="430" data-detail-view="true" data-detail-formatter="getChildTable"
           data-pagination="true" sidePagination="server" data-click-to-select="true">
        <thead>
    2、JS动态创建子表,关键的是$detail.html('<table id="child_table"></table>').find('table');,这里创建了一个table,并给table设置了id,非常重要,不设置的话后续无法刷新子表:
    
    
     function getChildTable(index, row, $detail) {
    
            var parentid = row.tpno;
    //        console.log(row);
            var cur_table = $detail.html('<table id="child_table"></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '/etestpaper/getPaperQType',
                method: 'get',
                queryParams: {strParentID: parentid},
                ajaxOptions: {strParentID: parentid},
                showFooter: true,
                columns: [
                     {
                        field: 'questiontypename',
                        title: '题型名称',
                        align: 'center',
                        footerFormatter:function () {
                            return '合计:';
                        }
                    }, {
                        field: 'questionnum',
                        title: '小题数量',
                        align: 'center',
                        footerFormatter: function (value) {
                            var count = 0;
                            for (var i in value) {
                                count += value[i].questionnum;
                            }
                            return count;
                        }
                    }, {
                        field: 'mark',
                        title: '题型分值',
                        align: 'center',
                        footerFormatter: function (value) {
    
                            var count = 0;
                            for (var i in value) {
    //                            console.log(value[i].mark);
                                count += value[i].mark;
                            }
                            return count;
                            console.log(count);
                        }
                    },{
                        title: '操作',
                        field: 'c_id',
                        align: 'center',
                        formatter: childFormatter(),
                        events: operateEvent
                    },
                ],
                //无线循环取子表,直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    getChildTalbe(index, row, $Subdetail);
                }
            });
        }

    3、完成添加或修改操作后,可以直接对子表进行刷新了,我这里重新查询了数据并绑定到子表(应该可以有更好的办法,可以试试不执行查询、直接刷新当前子表):

    
    
    $("#child_table").bootstrapTable('refresh', data.data);
  • 相关阅读:
    【转载】RocketMQ与Kafka对比(18项差异)
    canal —— 阿里巴巴mysql数据库binlog的增量订阅&消费组件
    CodingTMD’s Reading List
    [LeetCode] Evaluate Reverse Polish Notation, Solution
    [LeetCode] Clone Graph, Solution
    [LeetCode] Sort List, Solution
    [LeetCode] Max Points on a Line, Solution
    [LeetCode] LRU Cache, Solution
    [LeetCode] Binary Tree Preorder Traversal, Solution
    [LeetCode] Reorder List, Solution
  • 原文地址:https://www.cnblogs.com/telwanggs/p/8591743.html
Copyright © 2020-2023  润新知