Bootstrap-table进阶篇（冻结列）

Bootstrap

admin 发布于：2020-04-19 01:13:08

阅读：loading

基本介绍

目前bootstrap-table的最新版本中冻结列效果还是非常不错的，经过分析后发现它的实现就是根据参数设置复制出另一套表格，将复制出的表格（冻结列的部分）覆盖至原始表格出，达到当原始表格在出现横向滚动条的时候，滚动条拖动而列不动的效果。最新版本的实现有左侧冻结列与右侧冻结，记得在工作中使用到的是早期v1.12.0版本（好像是，写本篇文章的时候未看），它的冻结列在配合项目中的模板主题使用的时候出现了几个问题（最终完美的解决了），具体问题如下：

① 横向滚动条被冻结列的部分遮挡住了一点点；

② 将滚动条拖动至最右侧时导致表格的边框线对不齐；

③ 当动态列使用冻结列时需要判定冻结列的大小与表格总列数的大小，否则会出现显示问题；

④ 当冻结列部分出现有样式效果与点击事件或者行取数逻辑时；

不过我相信在现如今的新版本中它们应该都不是问题了，示例如下。

示例效果

冻结列.gif

参考代码

<!DOCTYPE html>

<head> <meta charset="UTF-8"> <title>bootstrap-table冻结列</title> <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css"/> <link rel="stylesheet" href="../../bootstrap.min.css"/> <link rel="stylesheet" href="../dist/bootstrap-table.css"/> <link rel="stylesheet" href="../dist/plugins/fixed-columns/bootstrap-table-fixed-columns.min.css"/> <script type="text/javascript" src="../../jquery/jquery.min.js"></script> <script type="text/javascript" src="../../popper.min.js"></script> <script type="text/javascript" src="../../bootstrap.min.js"></script> <script type="text/javascript" src="../dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="../dist/plugins/fixed-columns/bootstrap-table-fixed-columns.min.js"></script></head><body><div id="toolbar"> <form class="form-group form-inline"> <div class="col-sm-4"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">左侧冻结</div> </div> <input type="text" class="form-control" id="fixedColumn" value="2"> </div> </div> <div class="col-sm-4"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">右侧冻结</div> </div> <input type="text" class="form-control" id="fixedRightColumn" value="2"> </div> </div> <div class="col-auto"> <button type="button" id="resetGridFixed" class="btn btn-primary">设置</button> </div> </form>

</div>

$(function () { $("#resetGridFixed").click(function () { loadData(); }); loadData(); }); function loadData() { var date = new Date(); var month = date.getMonth() + 1; var maxDate = new Date(date.getFullYear(), month, 0).getDate(); var columns = [[ {"title": "序号", "field": "number", align: "center", valign: "middle", "rowspan": 2}, {"title": "城市", "field": "city", align: "center", sortable: true, valign: "middle", "rowspan": 2}, {"title": "温度", "field": "weather", align: "center", sortable: true, valign: "middle", "rowspan": 2}, {"title": "日期", align: "center", valign: "middle", "colspan": maxDate}, {"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 > 0; 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 > 0; j--) { data["day_" + j] = j % 2 == 0 ? "√" : "×"; } datas[i] = data; } renderTable(columns , datas); } function renderTable(columns , datas) { var fixedColumn = $("#fixedColumn").val(); var fixedRightColumn = $("#fixedRightColumn").val(); $("#data-table").bootstrapTable("destroy").bootstrapTable({ toolbar: "#toolbar", fixedColumns: true, fixedNumber: fixedColumn, fixedRightNumber: fixedRightColumn, "columns": columns, data: datas }); }