效果图如上
1.父table加data-detail-view=“true”
<table id="DictTypeList" class="table table-hover DataDetails" data-detail-view="true"></table>
2.进行子table加载(主要是InitSubTable方法的调用)
$("#DictTypeList").on('expand-row.bs.table', function (e, index, row, $detail) {
$("#dictNameChild").val(row.dictName);
var params={"dictType": row.dictType,}
var columns=[
{
field: 'dictLabel',
title: '字典名称',
align: 'center',
},
{
field: 'dictType',
title: '字典类型',
align: 'center',
}, {
field: 'dictValue',
title: '字典键值',
align: 'center',
}, {
field: 'status',
title: '状态',
align: 'center',
formatter : function(value, row, index) {
if(row.status == 0){
return "正常"
}else if(row.status == 1){
return "禁用"
}else {
return "-"
}
}
}, {
field: 'createBy',
title: '创建者',
align: 'center',
}, {
field: 'createTime',
title: '创建时间',
align: 'center',
formatter : function(value, row, index) {
return formatDateTime(value);
}
}, {
field: 'remark',
title: '备注',
align: 'center',
},{
field: 'dictCode',
title: '操作',
align: 'center',
width: '170px',
events: operateEvents1,
formatter: confirmnewOrder1,
}]
InitSubTable(index, row, $detail,'/back/list','get',params,columns);
})
3.封装InitSubTable为公共方法,其中index, row, $detail为固定格式,不可更改
InitSubTable = function (index, row, $detail,url,method,params,columns) {
var cur_table = $detail.html('<table class="subTable"></table>').find("table");
$(cur_table).bootstrapTable({
url: url,
method: method,
pagination: false, //分页
queryParams: params,
columns: columns,
responseHandler: function (res) {
var data = res
return data
},
onLoadSuccess (res) {
// console.log(res);
},
});
};
这里请注意responseHandler返回的数据格式,最开始一直在踩坑,数据返回却渲染不上去。需要分页的同学注意sidePagination分页设置。我的目前不需要分页,接口返回数据格式如下,responseHandler()中的return data直接是图中的data数据:
4.默认展开全部
onPostBody(res) {
expand('"DictTypeList"',index);
}
function expand (index){
$("#"+tableName+"").bootstrapTable('expandAllRows');
5.默认展开第一个
onPostBody(res) {
if(res) {
expand("DictTypeList",res[0]);
}
}
function expand (tableName,index) {
$("#"+tableName+"").bootstrapTable('expandAllRows',index);
}