基于Bootstrap-Table的Web表格教程

因为最近工做须要，又对Bootstrap作了进一步的学习了解，在实际应用过程当中发现使用表格来展示数据与信息更方便与直观，因此开始使用bootstrap的table功能，但bootstrap的table主要提供一些基本的样式其JS控制方面的功能相对比较弱，因此须要一款更强大的table插件来解决问题，这时bootstrap-table就出场了。

Bootstrap-Table的优势：

1.由于基于Bootstrap因此相应其样式都是标准化的。

2.提供了强大的操做选项与方法API，只须要关注业务数据字段的组装不太须要关注各类样式。

3.详细的文档与例子，特别是例子文档中常见的表格应用方式基本都有了，直接Copy修改便可。

4.提供了不少第三方扩展插件能够知足复杂的应用场景。

如下是基于Bootstrap-Table的表格实现样例

Bootstrap-Table的获取与使用

1.直接从Git下载

https://github.com/wenzhixin/bootstrap-table

下载解压后的图例：

2.在html页面直接引用便可

注意bootstrap-table是基于bootsrap与jQuery的是因此是须要引入这两个js库的以下图,导入bootsrap-table的js与css。

a.首先引入jQuery与Bootstrap

b.再引入bootstrap-table

注意：引入bootstrap-table-zh-CN.min.js是为支持中文本地化,bootstrap-table是支持多语言的，可根据须要进行引入。

3.组装Table的表头字段

bootstrap-table支持两种方式来定义表格的，一种是使用html的data属性方式，另外一种就是使用JaveScript脚本方式，这里主要介绍后一种js的方式，data属性方式没有JaveScript灵活。

JavaScript方式操做过程：

a.首先在html页面中定义table标记并增长相应的属性，每个属性都是以data-x-x="x"标记的，每个属性的详细定义请参考官方文档【表格参数】一节。

bootstrap-table的详细文档

b.编写JavaScript来定义表头，以下：

$("#caseListTable").bootstrapTable({});经过在()中放入json对象可动态生成表格。

columns : [{}]用于定义表头的字段名，一个json对象对应一个字段的格式的定义，

c.组装数据到表格中：

经过jQuery的ajax获取服务端数据，而后加载到表格中去便可，以下图：

$("#caseListTable").bootstrapTable('load',caseData);

'load'即方法名，caseData是一个json数组，若是返回json数据中的key与表格中field没法一一对应用，还须要另写函数来进行处理一下json数据即此图中的packagingDataForCaseListTable函数。

注意，若是返回的数据格式是json格式的数组，每个数组项表示一行数据：json数据其中的key要与步骤b中所定义的【field】名称相对应，如：field:case_name,其对应用json数据格式是{"case_name": "myCase"},）以下图的json格式样例：