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

mac2025-03-03  5

需要引入的东西

bootstrap.min.cssbootstrap-table.cssbootstrap-table-fixed-columns.cssjquery.min.jsbootstrap.min.jsbootstrap-table.jsbootstrap-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>
最新回复(0)