表格组件神器：bootstraptable详细使⽤指南
1、bootstrap-table简介
1.1、bootstrap table简介及特征：
Bootstrap table是国⼈开发的⼀款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强⼤的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。⽬前在github 上已经有2600多个Star，可见其受欢迎程度。其官⽅⽹站地址为：bootstrap-table.wenzhixin/。⾥⾯可以下载使⽤所需的JS和CSS⽂件，以及参考⽂档和例⼦。
⽀持 Bootstrap 3 和 Bootstrap 2
⾃适应界⾯
固定表头
⾮常丰富的配置参数
直接通过标签使⽤
显⽰/隐藏列
显⽰/隐藏表头
通过 AJAX 获取 JSON 格式的数据
⽀持排序
格式化表格
⽀持单选或者多选
强⼤的分页功能
⽀持卡⽚视图
⽀持多语⾔
el表达式和jquery的区别
⽀持插件
1.2、bootstrap table渲染数据到表格的⽅式：
Bootstrap-Table显⽰数据到表格的⽅式有两种，⼀种是客户端（client）模式，⼀种是服务器（server）模式。
所谓客户端模式，指的是在服务器中把要显⽰到表格的数据⼀次性加载出来，然后转换成JSON格式传到要显⽰的界⾯中，在JavaWeb中可以保存在request中，然后转发到指定界⾯，在界⾯初始化的时候使⽤EL表达式获取，然后调⽤相关初始化的函数，将JSON字符串传进去即可显⽰。客户端模式较为简单，它是把数据⼀次性加载出来放到界⾯上，然后根据你设置的每页记录数，⾃动⽣成分页。当点击第⼆页时，会⾃动加载出数据，不会再向服务器发送请求。同时⽤户可以使⽤其⾃带的搜索功能，可以实现全局数据搜索。对于数据量较少的时候，可以使⽤这个⽅法。但是对于数据量⼤的系统，使⽤该⽅法会造成加载出⼀些很久之前的，⽤户不在关注的数据，使得加载速度变慢，增加了服务器的负担，浪费了资源。这时应该采⽤服务器模式。
所谓服务器模式，指的是根据设定的每页记录数和当前要显⽰的页码，发送数据到服务器进⾏查询，然后再显⽰到表格中。该⽅法可以根据⽤户的需要动态的加载数据，节省了服务器的资源，但是不能使⽤其⾃带的全数据搜索功能。因为你加载的数据只是⼀页的数据，所以全数据搜索的范围也只在⼀页之中。
客户端模式较为简单，读者可根据官⽅⽂档和例⼦⾃⾏实践。这⾥主要介绍服务器模式，并可以实现带参数的查询。
2、bootstrap-table的引⼊
关于Bootstrap Table的引⼊，⼀般来说还是两种⽅法：
  　2.1、直接使⽤免费且稳定的cdn服务：
  如：，搜索⾃⼰所需要的较稳定的版本。
⾸先，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引⼊，⽬前使⽤稳定版本jquery.1.12.1.js.
其次，Bootstrap Table是Bootstrap的⼀个组件，所以它是依赖Bootstrap的，我们⾸先需要添加Bootstr
ap的引⽤。直接在搜索框中搜索bootstrap，版本已经出来4的预览版，但还是建议使⽤⽐较稳定的Bootstrap3，⽬前最新的3.3.5。
最后，就是Bootstrap Table的包了，直接在搜索框中搜索bootstrap-table,⽬前较好的版本为1.11.1，或者我们直接进到它的源码git clone ，下载下来放到项⽬中即可。
2.2、使⽤visual studio⾃带的包管理⼯具：Nuget
NuGet的官⽅说明是：NuGet是⼀款Visual Studio的扩展，它可以简单的安装、升级开源库和⼯具。
官⽹地址：
从官⽹下载安装完成之后，就可以在vs中使⽤了。使⽤⽅法如下：
右键点击解决⽅案，如图：
  选择 “管理解决⽅案的NuGet的程序包”，出现如图：
  依次搜索jquery ,bootstrap,bootstrap-table等放⼊本地⽂件夹。如果发现⾥⾯的版本较低，可以使⽤，获取最新的版本。
3、代码详解
3.1、在html页⾯引⽤相关组件，并定义好⼀个空的表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache">
<title>登录信息</title>
<!-- 1、Jquery组件引⽤-->
<script src="../js/jquery.min.js?v=1.11.2"></script>
<!-- 2、bootstrap组件引⽤-->
<link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<!-- 3、bootstrap-table组件引⽤-->
<link href="../css/plugins/bootstrap-table/bootstrap-table.min.css?v=1.11.1" rel="stylesheet" />
<script src="../js/plugins/bootstrap-table/bootstrap-table.min.js?v1.11.0"></script>
<script src="../js/plugins/bootstrap-table/bootstrap-table-zh-CN.js?v1.11.0"></script><!--显⽰中⽂-->
<!-- 4、其他-->
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
<link href="../css/customer_info.css?v=4.1.0" rel="stylesheet" />
<script src="../js/plugins/layer/laydate/laydate.js"></script>
<script src="../js/customer_info.js"></script>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="userLogin">
<div id="dateSearch">
<span><strong>开始⽇期: </strong></span>
<input type="text" class="laydate-icon startDate"  placeholder="开始⽇期">
<span><strong>结束⽇期: </strong></span>
<input type="text" class="laydate-icon endDate"  placeholder="结束⽇期">
<span><strong>⽤户ID: </strong></span>
<input type="text" class="default-input form-control imuserid"  placeholder="请输⼊⽤户id">
<button type="button" class="btn btn btn-info search"> <i class="fa fa-search"></i> 搜索</button>
</div>
<div class="row" id="infoArea">
<div class="col-sm-12" >
<ul class="nav nav-tabs" id="navList">
<li data-name = "loginLogTab" class="active"><a data-toggle="tab" href="#loginLogTab"><i class="fa fa-user"></i>登录信息</a> </li>
<li data-name = "receiveLogTab" class=""><a data-toggle="tab" href="#receiveLogTab"><i class="fa fa-briefcase"></i> 订购信息</a> </li>
<li data-name = "socketInputTab" class=""><a data-toggle="tab" href="#socketInputTab"><i class="fa fa-briefcase"></i> 反馈信息</a> </li>
<li data-name = "socketOutputTab" class=""><a data-toggle="tab" href="#socketOutputTab"><i class="fa fa-briefcase"></i> 出⾏信息</a> </li>                </ul>
<div class="tab-content" id="tabContent">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-info btn-sm rightSize">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-info btn-sm rightSize">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<div id="loginLogTab" class="tab-pane active">
<div class="table-responsive">
<table id="loginLog-table"></table>
</div>
</div>
<div id="receiveLogTab" class="tab-pane">
<div class="table-responsive">
<table id="receiveLog-table"></table>
</div>
</div>
<div id="socketInputTab" class="tab-pane">
<div class="table-responsive">
<table id="sockctInput-table"></table>
</div>
</div>
<div id="socketOutputTab" class="tab-pane">
<div class="table-responsive">
<table id="sockctOutput-table"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
引⼊需要的⽂件之后，我们最重要的就是定义⼀个空的table，如上的 <table id="loginLog-table"></table>。
当然Bootstrap table还提供了另外两种简单的⽤法，直接通过$table.bootstrapTable({data: data})，具体参考form-data.html;
或者直接在table标签⾥⾯定义 <table data-toggle="table" data-url="../json/data1.json">，类似“”等相关属性，具体参考table-style.html；这两种⽅法都不⽤在js⾥⾯注册就可以实现数据的加载，
但博主觉得这种⽤法虽然简单，但不太灵活，所以咱们还是统⼀使⽤在js⾥⾯初始化的⽅式来使⽤table组件。
3.2、Js初始化
var queryParams = function (params) {
var param = {
pageIndex: il(params.offset / params.limit) + 1,
pageSize: params.limit,
order: der,
ordername: params.sort,
startDateTime: $("#dateSearch .startDate").val(),
endDateTime: $("#dateSearch .endDate").val(),
search: $("#dateSearch .imuserid").val()
};
return param;
}
var responseHandler = function (e) {
console.log(e);
if (e.data && e.data.length > 0) {
return { "rows": e.data, "total": e.count };
}
else {
return { "rows": [], "total": 0 };
}
}
var uidHandle = function (res) {
var html = "<a href='#'>"+ res + "</a>";
return html;
}
var operateFormatter = function (value, row, index) {//赋予的参数
return [
'<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><i class="fa fa-paste"></i> 详情</button>',
'<button class="btn btn-danger btn-sm rightSize packageBtn" type="button"><i class="fa fa-envelope"></i> 通知</button>'
].join('');
}
self.dataInit = function (name) {
var url, columns, tableName;
switch (name) {
case 'loginLogTab':
tableName = "loginLog-table";
columns = [
{
checkbox: true
},
{
field: 'uid',
title: '⽤户编号',
align: 'center',
formatter: uidHandle,//⾃定义⽅法设置uid跳转链接
width:300
}, {
field: 'name',
title: '姓名',
align: 'center',
sortable:false  //本列不可以排序
}, {
field: 'sex',
title: '性别',
align: 'center'
}, {
field: 'age',
title: '年龄',
align: 'center',
sortable: true,
clickToSelect: false,
sortName: "age",
order:"asc"
}, {
field: 'area',
title: '户籍所在地',
align: 'left',
halign:'center' //设置表头列居中对齐
}, {
field: 'loginWay',
title: '登录⽅式',
align: 'center'
}, {
field: 'status',
title: '状态',
align: 'center'
},{
field: 'createTime',
title: '登录时间',
align: 'center',
width: 90
}, {
field: 'orderService',
title: '购买服务',
align: 'center'
}, {
field: 'connectorIP',
title: '连接器IP',
align: 'center'
}, {
field: 'connectorPort',
title: '连接器端⼝',
align: 'center'
}, {
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
formatter: operateFormatter //⾃定义⽅法，添加操作按钮
}
];
break;
case 'receiveLogTab':
//省略
break;
case 'socketInputTab':
//省略
break;
case 'socketOutputTab':
//省略
break;
}
$('#' + tableName).empty();
$('#' + tableName).bootstrapTable('destroy').bootstrapTable({
url: '../data/login_info2.json',  //url⼀般是请求后台的url地址，调⽤ajax获取数据。此处我⽤本地的json数据来填充表格。
method: "get",                    //使⽤get请求到服务器获取数据
dataType: "json",
contentType: 'application/json,charset=utf-8',
toolbar: "#toolbar",                //⼀个jQuery 选择器，指明⾃定义的toolbar 例如:#toolbar, .toolbar.
uniqueId: "id",                    //每⼀⾏的唯⼀标识，⼀般为主键列
height: document.body.clientHeight-165,  //动态获取⾼度值，可以使表格⾃适应页⾯
cache: false,                      // 不缓存
striped: true,                      // 隔⾏加亮
queryParamsType: "limit",          //设置为"undefined"，可以获取pageNumber，pageSize，searchText，sortName，sortOrder                                                      //设置为"limit"，符合 RESTFul 格式的参数，可以获取limit, offset, search, sort, order
queryParams: queryParams,
sidePagination: "server",          //分页⽅式：client客户端分页，server服务端分页（*）
// sortable: true,                    //是否启⽤排序；意味着整个表格都会排序
sortName: 'uid',                    // 设置默认排序为 name
sortOrder: "asc",                  //排序⽅式
pagination: true,                  //是否显⽰分页（*）
search: true,                      //是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端，所以，个⼈感觉意义不⼤
strictSearch: true,
showColumns: true,                  //是否显⽰所有的列
showRefresh: true,                  //是否显⽰刷新按钮
showToggle:true,                    //是否显⽰详细视图和列表视图
clickToSelect: true,                //是否启⽤点击选中⾏
minimumCountColumns: 2,          //最少允许的列数 clickToSelect: true, //是否启⽤点击选中⾏
pageNumber: 1,                  //初始化加载第⼀页，默认第⼀页
pageSize: 10,                    //每页的记录⾏数（*）
pageList: [10, 25, 50, 100],    //可供选择的每页的⾏数（*）
paginationPreText: "Previous",
paginationNextText: "Next",
paginationFirstText: "First",
paginationLastText: "Last",
responseHandler: responseHandler,
columns: columns,
onLoadSuccess: function (data) { //加载成功时执⾏
console.log(data);
},
onLoadError: function (res) { //加载失败时执⾏
console.log(res);
}
});
}
表格的初始化也很简单，定义相关的参数即可。上⾯⼀些博主觉得重要的参数都加了注释，如果你的表格也有太多的页⾯需求，直接⽤必须的参数就能解决。
同样，在columns参数⾥⾯其实也有很多的参数需要设置，⽐如列的排序，对齐，宽度等等。这些博主觉得⽐较简单，不会涉及表格的功能，看看API就能搞定。
3.3、页⾯效果图展⽰：

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