前言
最近在做一个简单的展示界面。但是遇到了一点问题，表格用bootstrap-table加载，在页面刷新之后，需要默认表格的第一行为高亮，并且自动展示第一行表格的信息。在查阅N个大佬的博客之后，找到了解决的方法。现在把整个流程整理下来，以后再用就会方便很多。（关于后台的查询的部分就不记录了，因为项目前后端分离，我所使用的都是后台提供的接口，因为从后台拿到数据之后开始记录。）
1.从后台取出数据存入到表格中
先上代码（js）：
var url=webIpServer+"/consumer/allinfo";
$.get(url,function (data) {
console.log("modelInfo:"+data);
var record=data.record;
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;
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.关键步骤，读取高亮行的信息，展示出来
我在这一步卡了好久，也找了很多方法，最后在一位大佬写的文章中找到了解决方法，现在引进一下；
原文 由于bootstrap-table生成的表格的td的Id没法设置（或者我不会。。。）,因此，如果想要读取渲染行的数据并不容易。如果是那种单机某一行获取数据的方式，可以用slected来确定被点击的行的行号，从而获取数据。那么对于自定义默认渲染为高亮的行的数据，我们怎么读取呢？
1.打开bootstrap-table.js
在bootstrap-table.js中，找到如下代码：
BootstrapTable.prototype.getRowByUniqueId = function (id){......}然后在这个函数的下面加上我们自定义的根据我们设置的行号来获取(删除)数据的方法：
BootstrapTable.prototype.getRowByIndex = 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中就包含了我们指定的第一行的所有信息。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
