Bootstrap-table进阶篇(冻结列)

Bootstrap
placeholder image
admin 发布于:2020-04-19 01:13:08
阅读:loading

基本介绍

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

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

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

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

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

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


示例效果

冻结列.gif

参考代码

<!DOCTYPE html>

<html lang="en">

<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>

<table id="data-table"></table>

<script type="text/javascript">

   $(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        });    }

</script>

</body>

</html>


相关下载

https://gitee.com/88911006/chendd-examples/tree/master/bootstrap


 点赞


 发表评论

当前回复:作者

 评论列表


留言区