bootstrap-table-fixed-columns表格控件使用方法（操作复杂表头并且固定表头和固定列）

最新推荐文章于 2024-03-13 23:04:05 发布

大王在路上

最新推荐文章于 2024-03-13 23:04:05 发布

阅读量7.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43996999/article/details/102852427

版权

需要引入的东西

bootstrap.min.css
bootstrap-table.css
bootstrap-table-fixed-columns.css
jquery.min.js
bootstrap.min.js
bootstrap-table.js
bootstrap-table-fixed-columns.js

用法

一个方法；
$el.bootstrapTable(‘destroy’).bootstrapTable({
columns: columns, // 渲染表头，columns是我们拿到数据后，表头数据的数组
data: data, // 表格主题内容 data是我们拿到数据后，表格主体的数据
fixedColumns: true, // 是否固定表头
fixedNumber: 1 // 固定几列
});
表格的主体内容渲染的时候是根据最后一行表头的field来对应的。会在下面的例子中体现
这里有一个bug，解决列对不齐问题；
修改bootstrap-table-fixed-coluumns.js源码：133行：-2改为-1；154行：-1删掉

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <link rel="stylesheet" href="./css/bootstrap-table-fixed-columns.css">
</head>
<body>
    <button class="btn btn-primary" id="btn1">点我是公司/服务资质</button>
    <button class="btn btn-primary" id="btn2">点我是产品资质</button>
    <div class="container">
        <table id="table" data-height="500"></table>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-fixed-columns.js"></script>
    <script>
        $(function(){
            var $table=$('#table');
            // 点击公司/服务资质
            $('#btn1').on('click',function(e){
                $.ajax({
                    url:'./公司服务资质.json',
                    type:'get',
                    async:false,
                    dataType:'json',
                    success:function(data){
                        console.log(data);
                        ajaxQualification($table,data.ReturnObject.title,data.ReturnObject.body,data.ReturnObject.dataType);
                    },
                    error:function(data){
                        console.log('失败了！！！');
                    }
                })
            })
            // 点击产品资质
            $('#btn2').on('click',function(e){
                $.ajax({
                    url:'./产品资质.json',
                    type:'get',
                    async:false,
                    dataType:'json',
                    success:function(data){
                        console.log(data);
                        ajaxQualification($table,data.ReturnObject.title,data.ReturnObject.body,data.ReturnObject.dataType);
                    },
                    error:function(data){
                        console.log('失败了！！！');
                    }
                })
                
            })
        })
        function ajaxQualification($el,dataTitl,dataBody,dataType){
            // console.log('data--------------------',data);
            var columns=[],th1=[],th2=[],th3=[],data=[],row={};
            if(dataType=='公司/服务资质'){
                th1=[{
                    field:'type',
                    title:'<span style="color:green">资质分类</span>',
                    align:'center',
                    valign:'middle'
                }];
                th2=[{
                    field:'name',
                    title:'<span style="color:green">资质名称</span>',
                    align:'center',
                    valign:'middle'
                }];
                th3=[{
                    field:'explain',
                    title:'<span style="color:green">级别说明</span>',
                    align:'center',
                    valign:'middle'
                }]
                // 渲染头部
                dataTitl.forEach(function(item){
                    th1.push({
                        field:item.competitorsQualificationType,
                        title:item.competitorsQualificationType,
                        colspan:item.competitorsQualificationMsg.length,
                        align:'center',
                        valign:'middle'
                    })
                    item.competitorsQualificationMsg.forEach(function(items){
                        th2.push({
                            field:items.competitorsQualificationName,
                            title:"<a href='"+items.qualificationQueryUrl+"' target='_blank'>"+items.competitorsQualificationName+"</a>",
                            align:'center',
                            valign:'middle'
                        })
                        th3.push({
                            field:items.dataKeyName,
                            title:items.levelInstruction,
                            align:'center',
                            valign:'middle'
                        })
                    })
                });
                // 渲染主体
                dataBody.forEach(function(item){
                    row['explain']=item.competitorsCompanyName;
                    item.competitorsCompanyAptitude.forEach(function(items){
                        if(items.level=='√'){
                            items.level='<i class="layui-icon" style="color: green;font-size: 14px;font-weight: 700;">&#10003;</i>';
                        }else if(items.level=='×'){
                            items.level='<i class="layui-icon" style="color: red;font-size: 14px;font-weight: 700;">&#10005;</i></a>';
                        }
                        row[items.dataKey]=items.level;
                    })
                    data.push(row);
                })
            }else if(dataType=='产品资质'){
                th1=[{
                    field:'aptitudeName',
                    title:'<span style="color:green">资质名称</span>',
                    align:'center',
                    valign:'middle'
                }];
                th2=[{
                    field:'issueUnit',
                    title:'<span style="color:green">发证单位</span>',
                    align:'center',
                    valign:'middle'
                }];
                th3=[{
                    field:'companyName',
                    title:'<span style="color:green">公司名称</span>',
                    align:'center',
                    valign:'middle'
                }]
                // 渲染头部
                dataTitl.forEach(function(item){
                    th1.push({
                        field:item.certificateName,
                        title:item.certificateName,
                        colspan:3,
                        align:'center',
                        valign:'middle'
                    })
                    th2.push({
                        field:item.dataKeyName,
                        title:item.issuedUnit,
                        colspan:3,
                        align:'center',
                        valign:'middle'
                    })
                    th3.push({
                        field:item.competitorsProductMsg.dataKey+'name',
                        title:item.competitorsProductMsg.competitorsProductName,  // 产品名称
                        align:'center',
                        valign:'middle'
                    },{
                        field:item.competitorsProductMsg.dataKey+'level',
                        title:item.competitorsProductMsg.level,   // 级别
                        align:'center',
                        valign:'middle'
                    },{
                        field:item.competitorsProductMsg.dataKey+'day',
                        title:item.competitorsProductMsg.competitorsProductValidityPeriod,   // 有效期
                        align:'center',
                        valign:'middle'
                    })

                });
                // 渲染主体
                dataBody.forEach(function(item){
                    row['companyName']=item.competitorsCompanyName;
                    item.competitorsProductAptitude.forEach(function(items){
                        row[items.dateKey+'name']=items.competitorsProductName;  // 产品名称
                        row[items.dateKey+'level']=items.competitorsProductLevel;  // 等级
                        row[items.dateKey+'day']=items.competitorsProductValidityPeriod;  // 有效期
                    })
                    data.push(row);
                })
            }
            columns.push(th1);
            columns.push(th2);
            columns.push(th3);
            $el.bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: data,
                search: true,
                toolbar: '.toolbar',
                fixedColumns: true,
                fixedNumber: 1
            });
        }
    </script>
</body>
</html>

大王在路上

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table-fixed-columns表格控件使用方法（操作复杂表头并且固定表头和固定列）

需要引入的东西bootstrap.min.cssbootstrap-table.cssbootstrap-table-fixed-columns.cssjquery.min.jsbootstrap.min.jsbootstrap-table.jsbootstrap-table-fixed-columns.js用法一个方法；$el.bootstrapTable(‘destr...
复制链接

扫一扫