怎么实现BootStrapTable的动态表格
发布时间&＃xff1a;2020-07-10 15:08:52
来源&＃xff1a;亿速云
阅读&＃xff1a;263
作者&＃xff1a;Leah
怎么实现BootStrapTable的动态表格&＃xff1f;针对这个问题&＃xff0c;这篇文章详细介绍了相对应的分析和解答&＃xff0c;希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
本篇文章将为大家介绍如何使用bootstrap table插件来实现动态表格。
在我们构建BootStrapTable(下文中均称&＃xff1a;BsTable)&＃xff0c;其中columns参数作为表格列的内容存储&＃xff0c;我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。
columns参数格式&＃xff1a;类似下文columns: {
{
field: &＃39;Id&＃39;,
title: &＃39;编号&＃39;,
},{
field: &＃39;name&＃39;,
title: &＃39;名称&＃39;,
},{
field: &＃39;sex&＃39;,
title: &＃39;性别&＃39;,
//自定义方法
formatter: function (value) {
if (value &＃61;&＃61; 1) {
return &＃39;男&＃39;;
} else if (value &＃61;&＃61; 2) {
retuen &＃39;女&＃39;;
}
}
},
}
需求&＃xff1a;通过点击按钮发送ajax请求&＃xff0c;针对请求返回的数据进行动态表格的构建。
按钮构造&＃xff1a;设置点击事件
SQL语句执行
点击事件编写&＃xff1a;dataQuery.js (注意&＃xff1a;这里将逐段解析&＃xff0c;最后将贴上完整版代码)
1、获取html页面元素值
由于实现该功能的需要两个参数&＃xff1a;SQL语句(sql) &＃43; 连接信息(connectInfo) &＃xff0c;所以要先从页面上获取两个元素的值&＃xff1a;类选择器选择元素获取对应值。var sql &＃61; $(&＃39;#sql&＃39;).val();
var connectInfo &＃61; $(&＃39;#connectInfo&＃39;).val();
2、选定页面表格元素&＃xff0c;发送ajax请求&＃xff0c;构建BSTable
页面上的表格元素&＃xff1a;采用beetl的标签&＃xff0c;将重复使用的html代码用一行代码标签代替&＃xff0c;方便使用&＃xff0c;易于维护。
2.1 ajax请求参数配置参数含义type请求类型
url请求链接地址
contentType发送给服务器的格式
dataType收到数据的格式
data发送给服务端的数据
success请求成功时调用
error请求失败时调用
详细代码&＃xff1a;$(&＃39;#DataQueryTable&＃39;).bootstrapTable({
ajax: function (request) {
$.ajax({
type: "GET",
url: Feng.ctxPath &＃43; "/dataQuery/list" &＃43; "/" &＃43; sql &＃43; "/" &＃43; connectInfo,
contentType: "application/json;charset&＃61;utf-8",
dataType: "json",
json: &＃39;callback&＃39;,
success: 见下文
error: 见下文
})
})
2.2 ajax请求成功&＃xff0c;根据返回json数据构造动态表头
2.2.1 初始化自定义动态表头数组//定义动态表头字段数组
var dynamicHeader &＃61; [];
//向数组中填入属性
dynamicHeader.push({
field: "state",
check: true
});
2.2.2 动态表头生成//针对返回的json数据&＃xff0c;遍历json数据的key集合
for (var i &＃61; 0; i
//获取对应索引的value值&＃xff0c;将获取的值设置到动态表头字段中。
var property &＃61; (Object.keys(json[0]))[i];
dynamicHeader.push({
"title": property,
"field": property,
//显示是否显示隐藏
switchable: true,
//是否开启排序
sortable: true
});
}
这段代码我们可以结合浏览器F12&＃xff0c;查看Object.keys(json[0])中的具体内容&＃xff1a;模拟一个请求/test。
2.2.3 构造表格&＃xff0c;构造表格前要进行table销毁&＃xff0c;否则会保留上次加载的内容$(&＃39;#DataQueryTable&＃39;).bootstrapTable(&＃39;destroy&＃39;).bootstrapTable({
//得到的json数据&＃xff0c;会根据columns参数进行对应赋值配置
data: json,
//Bstable工具导航条
toolbar: &＃39;#toolbar&＃39;,
//浏览器缓存&＃xff0c;默认为true&＃xff0c;设置为false避免页面刷新调用浏览器缓存
cache: false,
//是否显示行间隔色
striped: true,
//分页方式&＃xff1a;client客户端分页&＃xff0c;server服务端分页
sidePagination: "client",
//排序方式
sortOrder: "desc",
//每页记录行数
pageSize: 25,
//初始化加载第一页
pageNumber: 1,
//可供选择的每页行数
pageList: "[25, 50, 100, All]",
//是否显示切换按钮
showToggle: true,
//是否显示所有的列
showColumns: true,
//是否显示导出按钮(下篇文章将会提到)
showExport: true,
//导出数据类型(下篇文章将会提到)
exportDataType: "basic",
//是否显示分页
pagination: true,
//是否启用全匹配搜索&＃xff0c;否则为模糊搜索
strictSearch: true,
//开启搜索
search: true,
//自定义所生成的动态表头放入&＃xff0c;结合上述json数据&＃xff0c;实现表格数据内容的构建
columns: dynamicHeader
});
},
2.3 ajax请求失败&＃xff0c;弹窗报告错误信息&＃xff0c;页面重加载error: function () {
alert("SQL查询错误&＃xff0c;请输入正确的SQL语句&＃xff01;");
location.reload();
}
完整js代码/**
* BsTable动态表格生成
*/
DataQuery.sqlExecute &＃61; function (){
var sql &＃61; $(&＃39;#sql&＃39;).val();
var connectInfo &＃61; $(&＃39;#connectInfo&＃39;).val();
$(&＃39;#DataQueryTable&＃39;).bootstrapTable({
ajax: function (request) {
$.ajax({
type: "GET",
url: Feng.ctxPath &＃43; "/dataQuery/list" &＃43; "/" &＃43; sql &＃43; "/" &＃43; connectInfo,
contentType: "application/json;charset&＃61;utf-8",
dataType: "json",
json: &＃39;callback&＃39;,
success: function (json) {
var dynamicHeader &＃61; [];
dynamicHeader.push({
field: "state",
check: true
});
for (var i &＃61; 0; i
var property &＃61; (Object.keys(json[0]))[i];
//console.log(property);
dynamicHeader.push({
"title": property,
"field": property,
switchable: true,
sortable: true
});
}
//console.log(Object.keys(json[0]));
$(&＃39;#DataQueryTable&＃39;).bootstrapTable(&＃39;destroy&＃39;).bootstrapTable({
data: json,
toolbar: &＃39;#toolbar&＃39;,
cache: false,
striped: true,
sidePagination: "client",
sortOrder: "desc",
pageSize: 25,
pageNumber: 1,
pageList: "[25, 50, 100, All]",
showToggle: true,
showColumns: true,
showExport: true,
exportDataType: "basic",
pagination: true,
strictSearch: true,
search: true,
columns: dynamicHeader
});
},
error: function () {
alert("SQL查询错误&＃xff0c;请输入正确的SQL语句&＃xff01;");
location.reload();
}
});
}
});
};
3.测试动态表格生成结果
3.1 测试分两部分&＃xff0c;首先获取请求所得到的json数据&＃xff0c;模拟请求获取100条数据&＃64;RequestMapping(value &＃61; "/test")
&＃64;ResponseBody
public Object test(){
return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" &＃43;
" ,[S_INFO_WINDCODE]\n" &＃43;
" ,[S_CON_WINDCODE]\n" &＃43;
" ,[S_CON_INDATE]\n" &＃43;
" ,[S_CON_OUTDATE]\n" &＃43;
" ,[CUR_SIGN]\n" &＃43;
" ,[OPDATE]\n" &＃43;
" ,[OPMODE]\n" &＃43;
" FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
}
3.2 查看请求所返回的json数据
3.3测试动态表格生成
上述的请求可以正常返回数据&＃xff0c;那我们通过ajax请求所构建的动态BSTable呢&＃xff1f;
请求为&＃xff1a;SQL语句/链接信息&＃xff0c;ajax请求返回json数据&＃xff0c;与上述请求一致。
查看我们的动态表格生成状况&＃xff1a;
宾果&＃xff0c;至此BootStrapTable动态表格功能已实现。
关于怎么实现BootStrapTable的动态表格问题的解答就分享到这里了&＃xff0c;希望以上内容可以对大家有一定的帮助&＃xff0c;如果你还有很多疑惑没有解开&＃xff0c;可以关注亿速云行业资讯频道了解更多相关知识。
京公网安备 11010802041100号