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

xiaoxiao2021-02-28  8

一,页面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);//加载主表 //下面就是子表的结构 初始化 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" οnclick="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" οnclick="child_deleteAction('+"\'"+row.rid+"\'"+')" type="submit">删除</button>'; return u + ' ' + d; } 二,以上是页面初始化就加载主表的js代码, 而页面只需要你定义一个表格让该表格的id 和主表的初始化 id 一致即可自动渲染数据! 如有问题请加qq群:139496923
转载请注明原文地址: https://www.6miu.com/read-2350234.html

最新回复(0)