What needs to be introduced
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
usage
One method; $el.bootstrapTable('destroy').bootstrapTable({ columns: columns, // render the header, columns is the array of header data after we get the data data: data, // the table theme content data is After we get the data, the data of the main body of the table fixedColumns: true, // Whether to fix the header fixedNumber: 1 // How many columns are fixed }); The main content of the table is rendered according to the field in the header of the last row. Will be reflected in the following example There is a bug here to solve the problem of column misalignment ; modify the bootstrap-table-fixed-coluumns.js source code: line 133: -2 changed to -1; line 154: -1 deleted
example <!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;">✓</i>';
}else if(items.level=='×'){
items.level='<i class="layui-icon" style="color: red;font-size: 14px;font-weight: 700;">✕</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>
