【转载收藏】表格组件神器：bootstrap table详细使用指南
一、bootstrap-table简介css
- 1.一、bootstrap table简介及特征：
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，经过简单的设置，就能够拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。其官方网站地址 为：http://bootstrap-table.wenzhixin.net.cn/。里面能够下载使用所需的JS和CSS文件，以及参考文档和例子。html
- 支持 Bootstrap 3 和 Bootstrap 2
- 自适应界面
- 固定表头
- 很是丰富的配置参数
- 直接经过标签使用
- 显示/隐藏列
- 显示/隐藏表头
- 经过 AJAX 获取 JSON 格式的数据
- 支持排序
- 格式化表格
- 支持单选或者多选
- 强大的分页功能
- 支持卡片视图
- 支持多语言
- 支持插件
- 1.二、bootstrap table渲染数据到表格的方式：
Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。
所谓客户端模式，指的是在服务器中把要显示到表格的数据一次性加载出来，而后转换成JSON格式传到要显示的界面中，在JavaWeb中能够保存在request中，而后转发到指定界面，在界面初始化的时候使用EL表达式获取，而后调用相关初始化的函数，将JSON字符串传进去便可显示。客户端模式较为简单，它是把数据一次性加载出来放到界面上，而后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可使用其自带的搜索功能，能够实现全局数据搜索。对于数据量较少的时候，可使用这个方法。可是对于数据量大的系统，使用该方法会形成加载出一些好久以前的，用户不在关注的数据，使得加载速度变慢，增长了服务器的负担，浪费了资源。这时应该采用服务器模式。
所谓服务器模式，指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，而后再显示到表格中。该方法能够根据用户的须要动态的加载数据，节省了服务器的资源，可是不能使用其自带的全数据搜索功能。由于你加载的数据只是一页的数据，因此全数据搜索的范围也只在一页之中。
客户端模式较为简单，读者可根据官方文档和例子自行实践。这里主要介绍服务器模式，并能够实现带参数的查询。前端
二、bootstrap-table的引入jquery
关于Bootstrap Table的引入，通常来讲仍是两种方法：
2.一、直接使用免费且稳定的cdn服务：
如：Bootstrap中文网开源项目免费 CDN 服务，搜索本身所须要的较稳定的版本。git
- 首先，Bootstrap 的全部 JavaScript 插件都依赖 jQuery，所以 jQuery 必须在 Bootstrap 以前引入，目前使用稳定版本jquery.1.12.1.js.
- 其次，Bootstrap Table是Bootstrap的一个组件，因此它是依赖Bootstrap的，咱们首先须要添加Bootstrap的引用。直接在搜索框中搜索bootstrap,版本已经出来4的预览版，但仍是建议使用比较稳定的Bootstrap3，目前最新的3.3.5。
- 最后，就是Bootstrap Table的包了，直接在搜索框中搜索bootstrap-table,目前较好的版本为1.11.1，或者咱们直接进到它的源码git clone https://github.com/wenzhixin/bootstrap-table,下载下来放到项目中便可。
2.二、使用visual studio自带的包管理工具：Nuget
NuGet的官方说明是：NuGet是一款Visual Studio的扩展，它能够简单的安装、升级开源库和工具。
官网地址：http://www.nuget.org/
从官网下载安装完成以后，就能够在vs中使用了。使用方法以下：
右键点击解决方案，如图：github
选择 “管理解决方案的NuGet的程序包”，出现如图：ajax
依次搜索jquery ,bootstrap,bootstrap-table等放入本地文件夹。若是发现里面的版本较低，可使用Bootstrap中文网开源项目免费 CDN 服务，获取最新的版本。json
三、代码详解bootstrap
3.一、在html页面引用相关组件，并定义好一个空的表格。api
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!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>
<!-- 一、Jquery组件引用-->
<script src=
"../js/jquery.min.js?v=1.11.2"
></script>
<!-- 二、bootstrap组件引用-->
<link href=
"../css/bootstrap.min.css?v=3.3.6"
rel=
"stylesheet"
>
<script src=
"../js/bootstrap.min.js?v=3.3.6"
></script>
<!-- 三、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><!--显示中文-->
<!-- 四、其余-->
<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"
style=
"padding: 0 10px;"
>
<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">,相似“data-...”等相关属性，具体参考table-style.html;这两种方法都不用在js里面注册就能够实现数据的加载，
但博主以为这种用法虽然简单，但不太灵活，因此我们仍是统一使用在js里面初始化的方式来使用table组件。
3.二、Js初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
var
queryParams = function (
params
) {
var
param = {
pageIndex: Math.ceil(
params
.offset /
params
.limit) + 1,
pageSize:
params
.limit,
order:
params
.order,
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.三、页面效果图展现：
四、其余经常使用且高级功能
4.一、实现表格奇偶行，背景颜色隔行显示;
单一的表格数据显示，看上去有些单调。经过设置表格奇偶行背景颜色隔行显示，会让表格更加生动。实际应用中常常会遇到。实现方法经过添加列方法,如图：
var rowStyle = function (row, index) {
var classes = ['success', 'info'];
if (index % 2 === 0) {//偶数行
return { classes: classes[0]};
} else {//奇数行
return {classes: classes[1]};
}
}
效果如图：
4.二、实现表格行列合并;
表格的行列合并功能不用引用其余的js文件，只须要在html页面使用table的colspan和rowspan便可实现。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<table id=
"receiveLogs-table"
class
=
"table table-hover"
data-pagination=
"true"
data-show-refresh=
"false"
data-show-toggle=
"false"
data-showColumns=
"false"
data-toggle=
"table"
data-row-style=
"rowStyle"
<strong>data-url=
"../data/login_info.json"
</strong>>
<thead>
<tr>
<th colspan=
"5"
data-valign=
"middle"
data-halign=
"center"
>用户基本信息</th>
<th colspan=
"6"
data-valign=
"middle"
data-halign=
"center"
>用户购买信息</th>
<th rowspan=
"2"
data-field=
"operate"
data-valign=
"middle"
data-halign=
"center"
data-formatter=
"operateFormatter"
>操做</th>
</tr>
<tr>
<th data-field=
"uid"
data-align=
"center"
data-formatter=
"setCode"
>用户编号</th>
<th data-field=
"name"
data-align=
"center"
>姓名</th>
<th data-field=
"sex"
data-align=
"center"
>性别</th>
<th data-field=
"age"
data-align=
"center"
data-sortable=
"true"
>年龄</th>
<th data-field=
"area"
data-align=
"center"
>户籍所在地</th>
<th data-field=
"loginWay"
data-align=
"center"
>登陆方式</th>
<th data-field=
"status"
data-align=
"center"
>状态</th>
<th data-field=
"createTime"
data-align=
"center"
>登陆时间</th>
<th data-field=
"orderService"
data-align=
"center"
>购买服务</th>
<th data-field=
"connectorIP"
data-align=
"center"
>链接器IP</th>
<th data-field=
"connectorPort"
data-align=
"center"
>链接器端口</th>
</tr>
</thead>
</table>
|
要添加操做按钮和奇偶行背景颜色隔行显示，须要添加相应的js方法，以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function operateFormatter(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
(
''
);
}
var
rowStyle = function (row, index) {
var
classesArr = [
'success'
,
'info'
];
if
(index % 2 === 0) {
//偶数行
return
{ classes: classesArr[0] };
}
else
{
//奇数行
return
{ classes: classesArr[1] };
}
}
window.operateFormatter = operateFormatter;
window.rowStyle = rowStyle;
|
效果如图：
五、遇到的问题及解决方法
5.一、当请求返回的数据结果不是固定的“total”,"rows"的格式时，如何渲染表格数据？
咱们运用$('#' + tableName).bootstrapTable({ url: '../data/login_info.json'}),请求json数据，必需要求json数据格式为固定的key值，即必须按照“total”,"rows"的格式才能填充数据到表格，如图所示：
可是，当接口返回的数据格式，不是固定的“total”,"rows"时，咱们须要用到一个转换函数responseHandler，将数据指引到“total”,"rows"上去。
即用login_info2.json和参数responseHandler实现数据填充。
login_info2.json的数据格式，如图：
添加的responseHandler的方法，如图：
将返回结果经过方法引导，也能实现数据的填充。
5.二、Bootstrap Table自带的搜索功能，在服务器模式和客户端模式的应用说明：
因为实际应用中，通常请求服务端，返回的数据会不少，因此通常都会用服务器模式加载数据。故经过 search: true显示的内部模糊匹配功能不经常使用。固然服务器模式加载的数据也能够实现搜索功能，即将数据传入后台，后台处理以后返回前端。
可是若是你须要对多个字段进行模糊匹配，那么就意味着你的后台须要去对多个数据字段进行like操做，这样查询效率确定低下。因此，若是须要模糊匹配的字段不少，这个search在实际项目中是用不上的。综上，博主仍是以为只有在客户端分页的时候，这个搜索的做用比较明显。
var queryParams = function (params) {
var param = {
pageIndex: Math.ceil(params.offset / params.limit) + 1,
pageSize: params.limit,
search:$("#dateSearch .imuserid").val()
};
return param;
}
5.三、Bootstrap Table的排序，在服务器模式和客户端模式的应用说明：
5.3.一、添加排序字段order和ordername给后台，实现服务端排序；
在客户端模式时，排序功能有效。在服务器模式下，经过 sortable: true所设置的排序功能没法使用，服务器模式要实现排序功能，须要添加排序字段order和ordername给后台，后台处理以后返回前端。
var queryParams = function (params) {
var param = {
pageIndex: Math.ceil(params.offset / params.limit) + 1,
pageSize: params.limit,
order: params.order,
ordername: params.sort
};
return param;
}
5.3.二、使用ajax调用接口获取数据，再经过$('#tableName').bootstrapTable({ data: data})的方式，实现客户端排序；
同时，注意onSort方法的使用。
代码以下：
tableName = "sockctInput-table";
$.ajax({
url: '../data/login_info2.json',
method: 'get',
dataType: 'json',
contentType: "application/json",
success: function(res) {
console.log(res);
$('#' + tableName).bootstrapTable('destroy').bootstrapTable({
data: res.data,
toolbar: "#toolbar",
uniqueId: "id",
height: document.body.clientHeight - 205,
cache: false,
striped: true,
sortOrder: 'asc',
sortStable: false,
columns: columns,
onSort: function (a, b) { //点击排序时触发
$(".fixed-table-header").removeClass('hidden');
return a - b;
},
onLoadSuccess: function (data) { //加载成功时执行
alert(1);
console.log(data);
},
onLoadError: function (res) { //加载失败时执行
console.log(res);
}
});
$(".fixed-table-header").addClass('hidden');
return;
},
error: function(res) {
console.log(res);
}
});
效果如图：根据年龄由小到大进行排序
5.四、关于经过“get”方式请求本地.json文件时出现中文乱码的问题：
在请求本地login_info2.json数据时，请求方式method:'get',设置为“post”时，出现“405”报错；同时，我发现从json文件请求的数据，返回到页面时，出现中文乱码的状况；可是页面上已经设置了<meta charset="utf-8">，同时ajax请求时，也设置了内容返回的字符编码：contentType: 'application/json,charset=utf-8',但仍是出现乱码，通过网上查找，找到解决方法是：
记事本打开json文件，另存为，将编码选择为utf-8，存储替换原来的文件就好了。如图：
5.五、运用bootstrap-table,url请求数据，添加请求头部信息方法：
须要添加ajaxOptions参数，如图：
var userId = cmsdk.getCookie('userID');
var token = cmsdk.getCookie('token');
$('#'+tableName).bootstrapTable('destroy').bootstrapTable({
url: url,
method: "post", //使用get请求到服务器获取数据
ajaxOptions:{
headers: {"userID": userId,"token": token}
}
}
添加之后，在浏览器端的查看状况，以下：
5.六、解决bootstrap-table中表头与内容不对齐的问题：
只须要在bootstrap-table.js中修改此处代码，添加一行宽度适配代码便可；
|
1
2
3
4
|
this
.$header.find(
'th[data-field]'
).each(function (i) {
that.$header_.find(sprintf(
'th[data-field="%s"]'
, $(
this
).data(
'field'
))).data($(
this
).data());
that.$tableHeader.find(
'th'
).eq(i).width($(
this
).innerWidth());
//添加此行代码
});
|
六、总结：
博主也是在作后台管理系统时，初次设计到bootstrap table表格组件，以为它有本身的优点：
- 界面采用扁平化的风格，用户体验比较好，更好兼容各类客户端。这点也是最重要的。
- 开源、免费。国人最喜欢的就是免费了。呵呵。
- 相对Jqgrid、easyUI而言，比较轻量级。功能不能说最全面，但基本够用。
七、参考的相关api文档
- Bootstrap 中文网：http://www.bootcss.com/
- Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
- Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
- Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
- Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
转载自 http://www.cnblogs.com/wdlhao/p/6694083.html
- 1. 表格组件神器：bootstrap table详细使用指南
- 2. 【转载】BootStrap表格组件bootstrap table详解
- 3. 使用bootstrap table小记（表格组件）
- 4. JS组件系列——表格组件神器：bootstrap table
- 5. bootstrap 表格插件bootstrap-table的使用
- 6. bootstrap table使用指南
- 7. 表格插件BootStrap-Table使用教程
- 8. Bootstrap table表格
- 9. Bootstrap之表格插件Bootstrap-table
- 10. Bootstrap-table使用详细介绍
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • HTML 指南 - 网站建设指南
- • Docker容器实战(一) - 封神Server端技术
- • Docker容器实战(七) - 容器眼光下的文件系统
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档