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