bootstrap table 实现父子级数据且默认展开第一个

最新推荐文章于 2023-09-26 17:19:11 发布

浮筠，

最新推荐文章于 2023-09-26 17:19:11 发布

阅读量1.1k

点赞数 3

分类专栏： bootstrap系列文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/qq_48045360/article/details/129302610

版权

bootstrap系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文章描述了如何在HTML中设置父表格以启用详细视图，并通过JavaScript事件监听和InitSubTable函数动态加载子表格内容。子表格的列定义和数据处理（包括自定义formatter）被详细展示。文章还提到了responseHandler函数对返回数据的处理以及如何默认展开所有或第一个子表格行。

摘要由CSDN通过智能技术生成

在这里插入图片描述效果图如上

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);
}