Bootstrap Table使用方法详解

bootstrap-table使用总结

bootstrap-table是在的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用之前必须引用 jquery 和bootstrap的相关js，css 文件。

接着说，的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。

好了，简介的话就说到这，直接上代码和效果图之后，再做进一步的讨论。

bootstrap-table

效果图：

好接下来我们分步骤剖析一下上面的代码的含义。

1.

首先我们需要去下载相应的 jquery bootstrap bootstrap-table的包，这些网上都有教程，在此不再叙述如何下载。

由上面标签中引用js和css文件名可知我们必须引进这几个文件。

注意bootstrap，下载编译过的压缩包中只有三个文件夹 css ，fonts， js

1.jquery-2.2.1.js ---- 最新的jquery文件

2.bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 压缩文件

3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 压缩文件

4.bootstrap-table-all.js ---最新bootstrap-table下的js文件

5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件

6.bootstrap-table.min.css ---最新的bootstrap-table下css压缩文件

这六个必须配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加载了这个文件我们的一些表格显示信息才会被设置成中文。

我们来实验一下将bootstrap-table-zh-CN.js去掉后的显示效果。

当然我们还可以把显示信息设置成其他语言，只要将bootstrap-table-zh-CN.js换成其他语言的js文件即可。bootstrap-table包中都有支持。

我们还可以看看这个文件中的源码，我们看一下，就知道这个文件干了什么了。

*/ (function ($) { 'use strict';

$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
},formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},formatShowingRows: function (pageFrom,pageTo,totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
},formatSearch: function () {
return '搜索';
},formatNoMatches: function () {
return '没有找到匹配的记录';
},formatPaginationSwitch: function () {
return '隐藏/显示分页';
},formatRefresh: function () {
return '刷新';
},formatToggle: function () {
return '切换';
},formatColumns: function () {
return '列';
}
};

$.extend($.fn.bootstrapTable.defaults,$.fn.bootstrapTable.locales['zh-CN']);

})(jQuery);

粗略一看就知道，引用该js文件后，在加载时，便祈祷了初始化的效果。将一些显示信息的内容转为相应的中内容。

2.

对，就只有一个table标签，再加上一大堆了参数，而表格的展现形式就是通过这些在参数来实现的。要知道有哪些样式和功能，光靠我列举肯定是九牛一毛，授人以鱼不如授人以渔，我告诉大家去哪查找这些类.class的含义。我们可到bootstrap-table的专业网站上去查找这有一个我用的链接，点击打开链接如果无效的可以直接输入http://bootstrap-table.wenzhixin.net.cn/documentation

当然还可以在example中看一些例子

我们如何查看相应的参数的含义呢？看到上面这张图，最右边的是一些选项，可以选这可以设置的表格属性，行属性，以及可绑定的事件。

点击表格属性 Table options 显示如下图，首先看到标题Name用于js创建表格是使用，而Attribute是html创建表格使用的，

举几个例子在我们上面的代码中有这么几个参数他们的意思是：

data-url：索取数据的url。 data-method：请求方式。 data-height：设置表格的高 data-query-params="queryParams" ：设置 data-toolbar="#toolbar"：设置装按钮的容器为id为toolbar的。 data-pagination="true" ：设置是否显示页码数 data-search="true" ：设置search框 data-show-refresh="true" ：设置刷新按钮 data-show-toggle="true" ：设置数据显示格式