Bootstrap-table进阶篇（动态列）

Bootstrap

admin 发布于：2020-04-11 00:21:12

阅读：loading

许多的表格组件都支持动态渲染列，印象中bootstrap-table的没有找到动态列的实现，都是先销毁表格再重新渲染，鉴于此种实现就有了本篇文章。

本篇示例以3个月份为例，通过3个按钮的点击事件，实现3个月份的倒数5天时间的动态列表格数据显示，理论上比较简单，只是将columns表格列与表格数据的动态展示即可，详细如下（3个按钮可点击）。

运行结果

动态列.gif

参考代码

<!DOCTYPE html>

<head>

<title>bootstrap-table动态列</title>

</head>

<body>

</div>

$(function(){ $("button[data-date]").click(function () { var date = eval($(this).data("date")); loadData(date); }); var defaultDate = eval($("button[data-date-default]").data("date")); loadData(defaultDate);});function loadData(date){ var month = date.getMonth() + 1; var maxDate = new Date(date.getFullYear() , month , 0).getDate(); var dynamicColumnCount = 5; //动态列 var columns = [[ {"title" : "序号" , "field": "number" , align: "center" , valign: "middle" , "rowspan" : 2}, {"title" : "日期" , align: "center" , valign: "middle", "colspan": dynamicColumnCount}, {"title" : "城市" , "field": "city" , align: "center", sortable: true , valign: "middle" , "rowspan" : 2}, {"title" : "温度" , "field": "weather" , align: "center", sortable: true , valign: "middle" , "rowspan" : 2} ]]; //构造动态列 var dynamicColumn = []; for(var i = maxDate ; i > maxDate - dynamicColumnCount ; i--){ var columnDate = {"title" : month + "月" + i + "日" , "field": "day_" + i , align: "center" , valign: "middle"}; dynamicColumn.push(columnDate); } columns[1] = dynamicColumn; //构造数据 var datas = []; for(var i=0 ; i < 10 ; i++){ var data = {"number" : i + 1 , "city" : "襄阳" , "weather" : (15 + i) + " °C"}; for(var j = maxDate ; j > maxDate - dynamicColumnCount ; j--){ data["day_" + j] = j % 2 == 0 ? "√" : "×"; } datas[i] = data; } $("#data-table").bootstrapTable("destroy").bootstrapTable({ clickToSelect: true, singleSelect: true, toolbar: "#toolbar", "columns": columns, data: datas });