zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    Spark RDD简介与运行机制概述
    MongoDB 3.0.6的主,从,仲裁节点搭建
    kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)
    Spark配置参数调优
    SparkSQL项目中的应用
    SparkSQL相关语句总结
    Hadoop系统架构
    Hadoop常用命令
    spark单机模式简单搭建
    Spark参数配置说明
  • 原文地址:https://www.cnblogs.com/telwanggs/p/8591743.html
Copyright © 2011-2022 走看看