bootstrap table的父子表数据动态加载

亦凉 2022-06-05 10:27 569阅读 0赞

一，页面js代码如下

(function(document, window, $) {
        'use strict';
        (function() {
            var $tableReward = $('#tableReward'); //主表
            var options = {
                url : '********',     //加载主表的URL
                striped: true,
                search: false,
                showRefresh: true,
                showColumns: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                pagination: true,
                icons:{                        //为了显示主表的加号（点击加号 会加载子表）
                    paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
                    paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
                    refresh: 'glyphicon-refresh icon-refresh',
                    toggle: 'glyphicon-list-alt icon-list-alt',
                    columns: 'glyphicon-th icon-th',
                    detailOpen: 'glyphicon-plus icon-plus',
                    detailClose: 'glyphicon-minus icon-minus'
                },
                paginationLoop: false,
                sidePagination: 'server',
                silentSort: false,
                smartDisplay: false,
                escape: true,
                searchOnEnterKey: true,
                idField: 'id',
                maintainSelected: true,
                toolbar: '#toolbar',
                requestParams : function(params) {
                    return {         //首次加载主表的参数
                        key:value,
    
    			key:value,
    		    key:value
    };
    
    	    }, 
    	//表格参数
    	columns: [                
    		{field: 'ck', checkbox: true, visible: false},                
    		{field: 'id', title: 'ID', visible: false, align: 'center'},                
    		{field: 'key', title: '属性名', visible: false, align: 'center'},                
    		{field: 'key', title: '属性名', visible: false, align: 'center'},                
    		{field: 'key', title: '属性名',align:"center"},                
    		{field: 'action', title: '操作',align:"center", formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}            
    	],            
    	onExpandRow: function (index, row, $detail) {                
    		InitSubTable(index, row, $detail);  
    	}//该方法是调用下面的初始化子表结构  
    	//（其实就是在主表你点的那一行里面 添加一个表格 数据动态加载，三个参数不能修改固定 行号 当前航对象 主表td）        
    	};        
    	ENCI.common.bootstrapTable.loadTable($tableReward, options);//加载主表

二，以上是页面初始化就加载主表的js代码， 而页面只需要你定义一个表格让该表格的id 和主表的初始化 id 一致即可自动渲染数据！

//下面就是子表的结构 初始化
            var $child_table;
            window.InitSubTable = function (index, row, $detail) {
                var planId = row.id;
                $child_table = $detail.html('<table style="background-color: #8CD4F5" id="child_table"></table>').find('table'); //创建子表
                var options = {
                    url: '********',//子表的异步加载URL
                    method: 'get',
                    search: false,
                    pagination: false,
                    paginationLoop: false,
                    requestParams : function(params) {//子表加载过程中的参数
                        return { planId: planId }
                    },
                    ajaxOptions: { planId: planId },
                    clickToSelect: true,
                    detailView: false,//父子表
                    uniqueId: "rid",
                    columns:
                        [
                            { checkbox: true},
                            {field: '属性',title: '属性名',align:"center",visible: false},
                            {field: '属性, title: '属性名',align:"center",visible: false},
                            {field: 'action', title: '操作',align:"center", formatter: 'childFormatter', events: 'actionEvents', clickToSelect: false}
                        ]
                };
    
                ENCI.common.bootstrapTable.loadTable($child_table, options);//加载子表
            };
            // 格式化子表的操作按钮
            window.childFormatter = function childFormatter(value, row, index) {
    
                var u = $('#rule_update').length < 1?'':'<button class="update btn btn-warning btn-xs " id="child_updateAction"  onclick="child_updateAction('+"\'"+row.rid+"\'"+')" title="编辑" type="submit">编辑</button>';
                var d = $('#rule_delete').length < 1?'':'<button class="remove btn btn-danger btn-xs" id="child_deleteAction" onclick="child_deleteAction('+"\'"+row.rid+"\'"+')" type="submit">删除</button>';
                return u + '  ' + d;
            }

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220605/6123940ed8a6456d84342bfd51fa94ec.png

发表评论取消回复

表情：

评论列表（有 0 条评论，569人围观）

还没有评论，来说两句吧...

相关阅读

相关基于bootstrap table 列表展示父子级

基于bootstrap table 列表展示父子级页面展示效果展开前展开后页面代码

约定不等于承诺〃/ 2023年02月22日 03:58/ 0 赞/ 6 阅读

相关 mysql 表正在载入,Bootstrap Table表格一直加载(load)不了数据的快速解决方法

这里列出遇到的一个小问题：Bootstrap Table表格一直加载不了数据。 $("\button").click(function()\{ var name=$("in

﹏ヽ暗。殇╰゛Y/ 2023年01月14日 04:53/ 0 赞/ 136 阅读

相关 Bootstrap-Table实现从服务器加载数据进行显示

Bootstrap-Table是一个Boostrap的表格插件，能够将JSON数据直接显示在表格中。当然，这需要配置一些参数并进行初始化表格才行。其官方网站地址

﹏ヽ暗。殇╰゛Y/ 2022年08月19日 15:11/ 0 赞/ 217 阅读

相关 bootstrap-multiselect加载本地数据

目录: 1. bootstrap-multiselect从后台加载数据 2. bootstrap-multiselect从本地加载数据渲染数据

淡淡的烟草味﹌/ 2022年06月13日 13:39/ 0 赞/ 390 阅读

相关 bootstrap table的父子表数据动态加载

一，页面js代码如下 (function(document, window, $) { 'use strict'; (func

亦凉/ 2022年06月05日 10:27/ 0 赞/ 570 阅读

相关 echerts动态加载数据

效果图： ![这里写图片描述][70] 前端页面以及代码： <%-- Created by IntelliJ IDEA. User: XX Date: 2018

矫情吗；*/ 2022年05月22日 09:07/ 0 赞/ 224 阅读

相关动态加载数据autoComplete

注意需要jquery.autocomplete.js和jquery.js连个文件该文件可以在我的另一篇[《动态加载数据autoComplete(mysql数据库)》][aut

痛定思痛。/ 2022年03月31日 10:07/ 0 赞/ 266 阅读

相关 Bootstrap弹出框（Popover）插件动态加载数据

效果鼠标点击输入框弹出提示内容，内容是根据输入的字符动态加载的，效果如图： ![在这里插入图片描述][20190308161859807.png] HTML

谁践踏了优雅/ 2022年03月14日 19:26/ 0 赞/ 647 阅读

相关 bootstrap-table 父子表联动表完整例子

前台页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

系统管理员/ 2022年02月01日 23:13/ 0 赞/ 295 阅读

相关如何使 Bootstrap Table 初始化、重新加载

BootstrapTable重新加载遇到此问题的情景解决办法原始加载的表格解决后加载表格 >

本是古典何须时尚/ 2021年09月23日 09:02/ 0 赞/ 1309 阅读