bootstrapTable根据动态因子生成动态多行表头

最新推荐文章于 2025-07-04 09:29:35 发布

心酱儿

最新推荐文章于 2025-07-04 09:29:35 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wbx_wlg/article/details/89841653

根据项目需要，前端需要实现根据用户选择的因子来生成动态多行表头，经测试发现，多行表头其实就是由多维数组实现，只要将自己的数据按照bootstrapTable数据格式拼接成所对应的数组就可以实现功能，本文为实现代码供大家参考：
【注】前端html页面需要引入对应的库，
如：bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css、jquery-2.2.3.min.js;
下载网址：（bootstrap Table）https://bootstrap-table.com/，
(jQuery) https://jquery.com/

一、html

<body>
<div class="content col-xs-12">
    <ul class="itemArea">
        <li role="menuitem" class="checkItem">
            <label><input type="checkbox" checked="" data-code="B01"> 因子一 </label>
        </li>
        <li role="menuitem" class="checkItem">
            <label><input type="checkbox" checked="" data-code="B02"> 因子二 </label>
        </li>
        <li role="menuitem" class="checkItem">
            <label><input type="checkbox" checked="" data-code="B03"> 因子三 </label>
        </li>
    </ul>
    <table class="table table-striped" id="table">
        <!--表格内容-->
    </table>
</div>
</body>

二、Js