打造动态表格,轻松上手Bootstrap-table
最编程
2024-08-08 07:33:14
...
在开发中遇到一个需要动态生成table的需求,包括表头和数据。在调试的过程中遇到很多问题,包括数据分页,解决之后记录一下。
如下代码的数据加载流程:
①表头是动态的,在初始化table之前需要调一次后台拿到表头数据存储再全局变量table_columns中,调用initTable()初始化table。(此时table只加载出表头,没有数据。)
②table加载之后调用下面refreshTable()方法,请求后台拿到数据,此处因为我这里后台的数据不是bootstrap-table能处理的数据格式,使用了responseHandler对返回数据进行了格式化。
③之后如果需要显示其他数据,调用destroyTable()方法销毁table再重新初始化即可。
数据格式
我这里使用的是server分页,需要的数据格式是{“total”:“总条数”,“rec”:“[{},{}]”} 这种json格式的。total表示总记录条数(server分页必须有此键),rec是数组形式的(默认应该是叫做rows,此处我在初始化table时将dataField设置成了rec)。
表头也是json数组格式的:table_columns=[{"checkbox": "true"},{"field": "Create date","title": "Create date"},{"field": "Create time","title": "Create time"}];
//table标签
<table id="auto_table"></table>
//下面是动态table js代码
// 动态table表头数组
var table_columns=[];
//下面是初始化table的代码
function initTable(){
$('#auto_table').bootstrapTable({
//url: '', //请求后台的URL(*)因为是动态表头,table加载时不请求后台,只初始化表头
contentType: "application/json", //期望后台返回数据类型
//data:table_data, //直接加载静态数据 此处不使用
method: 'POST', //请求方式(*)
dataField: "rec", //数据节点 默认为rows 改成rec后需要后台返回的数组为rec
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) 两种分页方式所需的数据结构不同
limit: 10, //每页的记录行数(*)
offset: 1, // 初始化加载第一页,默认第一页,并记录
totalrows:0, //记录总条数
pageList: [10, 25, 50], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索
strictSearch: true,
singleSelect: true, //单选框 true表示单选
showColumns: true, //是否显示所有的列(选择显示的列)
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
//uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams : function (params) {
//传到后台的参数 这里的键的名字和后台控制器的变量名必须一致,这边改动,控制器也需要改成一样的
var temp = {
//分页参数 这三个参数传到后台即可进行分页
limit: params.limit,
offset: params.offset,
totalrows: params.totalRows,
//下面是个性化请求参数 根据你的业务传值
key_word1: $("#qry_keyword1").val(),
key_word1_name: $("#qry_keyword1_name").val(),
bus_cd:$("#qry_bus_cd").val()
};
return JSON.stringify(temp);
},
columns:table_columns, //动态表头 数据从后台获取
onLoadSuccess: function () {
console.log("load success");
},
});
}
//刷新table
function refreshTable(){ $('#auto_table').bootstrapTable('refreshOptions', { 'url': "url:此处为后台url", responseHandler: function(data){ var recData=new Array(); var data_rec=data.rec; for(let i=0;i<data.rec_num;i++){ recData[i]=JSON.parse(data_rec[i].data); recData[i].compare_data=data_rec[i].data; recData[i].old_data=data_rec[i].old_data; } return { "total":data.total, "rec":recData }; }, }); }
/**
* 销毁table
*/
function destroyTable(){
$('#auto_table').bootstrapTable('destroy');
}
原文地址:https://www.cnblogs.com/ZTPX/p/12794130.html
推荐阅读
-
揭秘table表格边框:轻松打造精致细线表格
-
玩转 HTML 表格与表单:轻松上手指南
-
打造动态表格,轻松上手Bootstrap-table
-
玩转 CSS 表格:轻松打造精美的数据展示
-
玩转 HTML 表格:轻松上手
-
轻松上手!Mac版LightWave 3D 2020 v2020.0.2激活版,打造你的3D动画世界!
-
轻松上手!AnyChart教程教你打造JavaScript极坐标图(第一篇)
-
打造你的专属篮球明星个人网站!6页设计全解析,简单易学的DW网页制作教程。从规划到设计,一步一步教你完成静态HTML旅行主题网页作业。适合学生学习的web课程设计网页作业,让你轻松上手!
-
ScreenToGif:轻松快速地打造 gif 动态图的小巧工具
-
北大的一支团队研发出一款名为"ChatExcel"的神奇工具,它能像聊天一样处理表格,让人们轻松上手,无需专业技能,而且这款工具完全免费,并且支持无限制使用次数。