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

来源：互联网发布：软件的定义编辑：程序博客网时间：2024/06/05 19:31

一，页面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"  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;        }

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

阅读全文

0 0