bootstrap-table加载之后默认第⼀⾏为⾼亮，制作⼀个好看的表格
前⾔
最近在做⼀个简单的展⽰界⾯。但是遇到了⼀点问题，表格⽤bootstrap-table加载，在页⾯刷新之后，需要默认表格的第⼀⾏为⾼亮，并且⾃动展⽰第⼀⾏表格的信息。在查阅N个⼤佬的博客之后，到了解决的⽅法。现在把整个流程整理下来，以后再⽤就会⽅便很多。（关于后台的查询的部分就不记录了，因为项⽬前后端分离，我所使⽤的都是后台提供的接⼝，因为从后台拿到数据之后开始记录。）
1.从后台取出数据存⼊到表格中
先上代码（js）：
var url=webIpServer+"/consumer/allinfo";
$.get(url,function (data){
console.log("modelInfo:"+data);
var d;
var modelData=[];
if(record!=null){
for(var i=0;i<record.length;i++){
var f1=null;
var f2=record[i].f2;
var value=record[i].f3;
bootstrap项目var f4=record[i].f4;
var f5=record[i].f5;
var f6=record[i].f6;
var f7=record[i].f7;
var f8=record[i].f8;
var f9=record[i].f9;
var f10=record[i].f10;
//f1-f10均为数据库中的字段名称，因为涉及项⽬的⼀些信息，⽤f1-f10代替原来的字段。
if(value==0){
f3="aaaaaaaa";
}
if(value==1){
f3="bbbbbbbb";
}
if(value==2){
f3="ccccc";
}
if(value==99){
MDTP="所有";
}
//f3对应数据库中的是数字，每个数字对应不⽤的名称，因此对于从数据库中取出来的数据，我们不能直接展⽰给⽤户，需要在前台对数据进⾏整理，之后再显⽰给⽤户想要看到的数据。99字段是额外加的，对应的是所有的类型，为了展⽰信息时候使⽤，这⾥⽤不到。
var temp={f1:f1,f2:f2,f3:f3,f4:f4,......};//后⾯就不改了。。太⿇烦了。。格式就是变量名：字段名,
modelData.push(temp);//把每⼀条数据存储起来
}
}
console.log(modelData);//再控制台打印对应的信息，⽅便查是否出错
$('#modelTable').bootstrapTable("destroy");//重头戏
/*在这⾥加上前台的html代码
<table id="modelTable"></table>
*/
$('#modelTable').bootstrapTable({
data:modelData,//数据源，这⾥已经把查询到的数据存储到modelData中了
columns:[
{
"field":"f1",
"title":"ddddd",
"align":"center",
},
{
"field":"f2",
"title":"11111",
"align":"center",
},
{
"field":"f3",
"title":"22222",
"align":"center",
}
]
,//表格的列名和值
theadClasses:"thead-dark",//这⾥设置表头样式
classes:"table table-bordered table-striped table-sm table-dark",
// height: 600,
striped:true,
pagination:true,
pageSize:5,
pageList:[],
});
$('#modelTable').bootstrapTable("load",modelData);//加载表格
2.渲染样式，实现表格的隔⾏变⾊
#modelTable tr:nth-child(odd){
background: #e7fafe;
}
#modelTable thead tr th{
background-color: #C0C4CD;
border-color: white;
}
//⽤于改变表头的样式和实现隔⾏变⾊
3.再页⾯加载的时候，实现第⼀⾏的默认⾼亮
1.再html中，定义⾼亮的class名称及样式：
.changeColor{
background-color: #1f90d8 !important;
color: white;
}
2.在js⽂件中，定义页⾯刷新时候的加载函数：
$(document).ready(function(){
allinfo();//allinfo是定义⽤来纸作Bootstrap的函数，界⾯刷新之后就执⾏这个函数，加载出Bootstrap
});
3.在加载的allinfo()函数中，加⼊如下代码：
$('#modelTable tbody :first').addClass('changeColor');//给表格的第⼀⾏数据设置为⾼亮
4.关键步骤，读取⾼亮⾏的信息，展⽰出来
我在这⼀步卡了好久，也了很多⽅法，最后在CSDN的⼀位⼤佬写的⽂章中到了解决⽅法，现在引进⼀下；
由于bootstrap-table⽣成的表格的td的Id没法设置（或者我不会。。。），因此，如果想要读取渲染⾏的数据并不容易。如果是那种单机某⼀⾏获取数据的⽅式，可以⽤slected来确定被点击的⾏的⾏号，从⽽获取数据。那么对于⾃定义默认渲染为⾼亮的⾏的数据，我们怎么读取呢？
1.打开bootstrap-table.js
在bootstrap-table.js中，到如下代码：
RowByUniqueId = function (id){......}
然后在这个函数的下⾯加上我们⾃定义的根据我们设置的⾏号来获取(删除)数据的⽅法：
RowByIndex = function (index){
if((index *1+1)>this.options.data.length){
throw new Error("Unknown method: 没有当前序号!");
}
return this.options.data[index *1];
};
然后我们把这个⽅法，加⼊到bootstrap-table.js的allowedMethods数组中，这个数组中的元素都是js⽂件中的⽅法名称。因为bootstrap-table.js⽂件在执⾏包含的函数之前会扫描这个数组，如果在这个数组中没有这个函数名称，则会报错。
Uncaught Error: Unknown method: getRowByIndex
at HTMLTableElement.<anonymous> (bootstrap-table.js:3260)
at Function.each (jquery.min.js?v=2.1.4:2)
at n.fn.init.each (jquery.min.js?v=2.1.4:2)
at n.fn.init.$.fn.bootstrapTable (bootstrap-table.js:3252)
at Object.success (modelSearch.js:314)
at j (jquery.min.js?v=2.1.4:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=2.1.4:2)
at x (jquery.min.js?v=2.1.4:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=2.1.4:4)
因此，我们要把⾃定义的⽅法写道allowMethods数组中.
这样我们就可以根据⾏号来获取我们指定的⾏的数据了：
var rowData=$('#modelTable').bootstrapTable('getRowByIndex',0);
//rowData中就包含了我们指定的第⼀⾏的所有信息。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。