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

最新推荐文章于 2023-06-15 18:20:16 发布
最新推荐文章于 2023-06-15 18:20:16 发布
阅读量3.5k 收藏 7
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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

<script type="text/javascript">
    $(function () {
        getItemData(); // 获取动态因子数据

        //  监听因子点击事件
        $(".itemArea li label").click(function () {
            getItemData();
        });

    });

    function getItemData() {
        var itemCode=[], //所选择因子的code
            itemName=[];  // 所选择因子的text
        $.each($(".itemArea li input[type='checkbox']"),function () {
            if($(this).is(":checked")){
                itemCode.push($(this).data("code"));
                itemName.push($(this).parents("label").text());
            }
        });

        buildTable(itemName,itemCode); //根据因子选择状态创建表格
    }

    function buildTable(itemName,itemCode) {
        //模拟数据
        var mockData = [
            {
                "province": "浙江省",
                "city": "杭州市",
                "cityLevel": "二线",
                "item0B01": "1",
                "item0B02": "1",
                "item0B03": "1",
                "item1B01": "1",
                "item1B02": "1",
                "item1B03": "1",
                "item2B01": "1",
                "item2B02": "1",
                "item2B03": "1"
            },
            {
                "province": "福建省",
                "city": "福州市",
                "cityLevel": "二线",
                "item0B01": "4",
                "item0B02": "4",
                "item0B03": "4",
                "item1B01": "54",
                "item1B02": "54",
                "item1B03": "54",
                "item2B01": "7",
                "item2B02": "7",
                "item2B03": "7"
            },
            {
                "province": "湖南省",
                "city": "长沙市",
                "cityLevel": "三线",
                "item0B01": "18",
                "item0B02": "22",
                "item0B03": "31",
                "item1B01": "45",
                "item1B02": "74",
                "item1B03": "20",
                "item2B01": "44",
                "item2B02": "16",
                "item2B03": "48"
            }
        ];
        var columns = [],
            initColumns = [],//公共固定列
            itemColumns = []; //动态因子列
        initColumns = [
            {
                field: 'Number',
                title: '',
                width: 35,
                formatter: function (value, row, index) {//自动排序
                    return index + 1;
                },
                rowspan: 2 //合并两行
            }, {
                field: 'province',
                title: '省份',
                width: 80,
                align: "center",
                halign: "center",
                valign: "middle",
                rowspan: 2
            }, {
                field: 'city',
                title: '省会',
                align: "center",
                halign: "center",
                valign: "middle",
                width: 90,
                rowspan: 2
            }, {
                field: 'cityLevel',
                title: '城市级别',
                width: 80,
                align: "center",
                halign: "center",
                valign: "middle",
                rowspan: 2
            }
        ];

        if(itemCode.length>0){
            //根据选择因子绘制动态表头
            for (var i = 0; i < itemCode.length; i++) {
                initColumns.push (
                    {
                        field: "",
                        title: itemName[i] ,
                        width: 80,
                        align: "right",
                        halign: "center",
                        colspan: 3
                    }
                );
                itemColumns.push(
                    {
                        field: 'item' + i + itemCode[i],
                        title: 'item' + itemCode[i],
                        width: 80,
                        align: 'center',
                        halign: 'center'
                    },
                    {
                        field: 'item' + i + itemCode[i],
                        title: 'item' + itemCode[i],
                        width: 80,
                        align: 'center',
                        halign: 'center'
                    },{
                        field: 'item' + i + itemCode[i],
                        title: 'item' + itemCode[i],
                        width: 80,
                        align: 'center',
                        halign: 'center'
                    }
                );
            }
        }
        columns.push(initColumns, itemColumns); //合并表格内容

        $('#table').bootstrapTable('destroy').bootstrapTable({
            data: mockData, //添加模拟数据
            pagination: true,//分页
            minimumCountColumns: 4,//设置最小列数
            paginationLoop: true,
            striped: true,//是否显示行间隔色
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            undefinedText: " ",
            pageNumber: 1,      //初始化加载第一页，默认第一页
            pageSize: 15,
            pageList: [10, 15, 20, 25, 30],
			columns: columns //动态拼接生成表格
        });
    }
</script>

三、效果图
在这里插入图片描述
在这里插入图片描述

心酱儿
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决页面表头重复出现的问题，bootstrap-table.js
08-07
2375行加上this.$header.outerHeight() 判断
bootstrap 多级table_Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法...
weixin_33268492的博客
01-12 879
今天设置了Bootstrap Table的复杂表头，设置了多级表头(两行列名)，但是只能显示第一级表头(第一行的列名)，第二级的表头被第一级的表头覆盖。但是我仿照其他网上的其他设置复杂表头例子都能正常显示，我的设置了多级表头怎么就不能正常展示呢？我真的十分郁闷，后经过思考和查找资料,需要在页面加上这么一段全局样式就好了。.fixed-table-header{height: auto;}可是Boo...
bootstrapTable实现多层表头
LLL_liuhui的博客
05-18 1万+
1、html&lt;table id="tb_table"&gt;&lt;/table&gt;2、jscolumns: [ [{ title: '这是标题', field: '', align: 'center', valign: 'middle', colspan:10 }], [{ title...
BootStrapTable 多层表头合并行
weixin_43910274的博客
03-17 1610
实现多层复杂的表头来展示数据
Bootstrap-table：轻松实现多层表头
沉默王二
09-07 3万+
Bootstrap-table：轻松实现多层表头
bootstrapTable 多级表头
最新发布
John的博客
06-15 1300
bootstrapTable 多级表头
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
01-09 4770
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
bootstrap table 如何实现如何一个表格多行多列 图片如下 ，一个表头的单元格
weixin_43202782的博客
10-29 1236
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用M...
bootstrap table 多行表头高度及导出时日期格式
yzy85的专栏
03-30 831
使用到的相关js <script src="../../js/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script> <script src="../../js/bootstrap-table/bootstrap-table-mobile.min.js" ty...
贝叶斯潜在多动态因子模型
01-22
此代码为贝叶斯潜在多动态因子模型，用贝叶斯方法来估计因子
saomei.zip_主成分分析 噪_动态因子_贝叶斯检测
07-14
包括主成分分析、因子分析、贝叶斯分析，可以动态调节运行环境的参数，含噪脉冲信号进行相关检测。
shaixuan_xuexi_hangye.zip_动态因子_动态调整因子的方法
07-14
在Matlab平台上实现动态调整因子的方法
惯性权重和学习因子动态调整的改进粒子群算法的MATLAB代码实现
07-24
根据粒子群相关改进论文编辑，内部包含粒子群算法源码、改进后粒子群算法代码、测试函数集合文件改进文献来源，两种算法均已编辑为函数模式方便进行对比，亲测可用，可用作论文写作中算法对比。
dcf.zip_dcf_动态优化_协同优化_多因子_惩罚
07-14
利用动态惩罚因子法对多学科协同优化方法进行改进，并用具体的一个算例进行了验证
【JS】用JS实现系统登录页的登录和验证
热门推荐
wan小小冰的博客
09-05 6万+
这篇文章用JS显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。1. html代码&lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;login-wrap&quot;&gt; &lt;form id=&quot;user_login&quot; action=&amp
web开发 兼容不同的屏幕分辨率和浏览器
wan小小冰的博客
11-22 2万+
在web开发的过程中经常会要求根据不同的屏幕大小来做兼容，尤其是webAPP的流行和各种响应式布局，兼容不同的屏幕分辨率更是前端开发者必会的技能。本篇主要介绍用CSS 的媒体查询来兼容不同的屏幕大小和用js 来兼容不同的浏览器（主要是IE、火狐、360、谷歌、UC、QQ、百度等）。 一、CSS媒体查询 使用 CSS3 的@media 查询，你可以针对不同的媒体类型定义不同的样式。它的语法结构是： ...
datetimepicker的用法和时间的绑定
wan小小冰的博客
09-08 1万+
本篇文章主要讲datetimepicker的用法，在使用的过程中也遇到过坑，之前一直使用的daterangepicker时间插件，但由于daterangepicker不支持年视图，周视图，所以最后根据业务需求改用datetimepicker，用两个时间控件来形成双视图的效果，在使用的过程中发现月视图似乎有bug,时间会往前推两个月，在限制时间选择范围上造成不便，最后决定不限制时间的选择时间，谁已经
【JS】JS 正则验证电话联系方式
wan小小冰的博客
12-19 1万+
function ValidatePhone(val){ var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;//手机号码 var isMob= /^0?1[3|4|5|8][0-9]\d{8}$/;// 座机格式 if(isMob.test(val)||isPhone.test(val)){ return true;
stata做动态因子分析
05-14
Stata可以使用多种方法进行动态因子分析。以下是使用Stata进行动态因子分析的一般步骤： 1. 准备数据。数据应该是一个面板数据集，其中包含多个时间点和多个变量。 2. 确定因子数量。使用因子分析确定因子数量，可以使用Kaiser准则或Scree图等方法。 3. 建立模型。使用Stata的动态因子模型命令，例如dfa、dfan等，建立动态因子模型。 4. 估计模型。使用Stata的估计命令，例如ml、gmm等，估计动态因子模型参数。 5. 模型检验。使用Stata的检验命令，例如estat archlm、estat overid等，检验模型的拟合效果和参数稳定性。 6. 结果解释。解释因子贡献率、因子载荷和动态因子系数等模型参数。 以下是一个示例代码，使用dfa命令进行动态因子分析： ``` stata // 导入数据 use panel_data.dta, clear // 建立动态因子模型 dfa factor1-factor4, lag(1/2) // 估计模型 ml model lf dfa, nocons // 模型检验 estat archlm, order(12) estat overid, lags(1/4) ``` 请注意，这只是一个简单的示例代码，实际使用时还需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值