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

一，页面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 一致即可自动渲染数据！

如有问题请加qq群:139496923