基于bootstrapTable解析复杂json实现表格动态列数

最新推荐文章于 2023-01-09 15:36:04 发布

置顶

Champ.Ping

最新推荐文章于 2023-01-09 15:36:04 发布

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：非常规操作文章标签： js bootstrap bootstrapTable 动态列数 Json解析

本文链接：https://blog.youkuaiyun.com/qq_44624722/article/details/96837162

本文介绍如何在bootstrapTable中处理复杂的JSON数据，将其转换为动态列的表格。当原始JSON包含多级结构时，需要通过ajax请求获取数据，对数据进行处理，将深层结构展平为适合表格显示的格式。处理后的JSON数据每一项包含时间、业务总数以及每个设备的业务数量。接着，动态生成表头，包括时间、业务总数以及设备名称列。最后，将处理好的数据和生成的表头传给bootstrapTable展示。记得在操作数据前检查数据是否为空，以避免解析错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrapTable只支持简单的Json解析,如：

[{“date”:“2019-01”,

“amount”:21},

{“date”:“2019-02”,

“amount”:2}]

用一个表格显示日期date和业务总数amount，当然没问题:

$('#exampleTable')
			.bootstrapTable(
					{
						method : 'post', // 服务器数据的请求方式 get or post
						url : prefix + "/xxx/data", // 服务器数据的加载地址
						sortable : true,
						iconSize : 'outline',
						striped : true, // 设置为true会有隔行变色效果
						dataType : "json", // 服务器返回的数据类型
						pagination : true, // 设置为true会在底部显示分页条
						singleSelect : false, // 设置为true将禁止多选
						contentType : "application/json", //发送到服务器的数据编码类型
						pageSize : 10, // 如果设置了分页，每页数据条数
						pageNumber : 1, // 如果设置了分布，首页页码
						// search : true, // 是否显示搜索框
						showColumns : false, // 是否显示内容下拉框（选择显示的列）
						sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者
						columns : [
								{
									checkbox : true
								},
								{
									field : 'date',
									sortable : true,
									title : '日期'
								},
								{