JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。

bootstrap table系列：

一、效果展示

1、表格行样式

比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图：

2、表格行内编辑

第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果：

编辑前

点击某个单元格数据

编辑后完成后

3、表格行列合并

关于行列合并的需求博主觉得是非常常见的，尤其是做页面报表的时候需要用到。先来看看效果：

当前页显示不全，点击进入看看。怎么样？效果还不错吧。

4、表格数据导出

关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。

导出当前页到excel

导出表格所有数据

导出选中行数据

至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。

二、表格行样式代码示例

关于表格行的样式设置，其他是它一个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都用得着。当然，效果并不难，自己用jQuery设置tr的背景色也可以实现，但是博主觉得，既然bootstrap table提供了机制设置行的背景色，我们何不用它内置的api呢。我们看看如何实现。

初始化表格的时候

　　　　 //初始化Table
        $('#tb_order').bootstrapTable({
            url: '/TableStyle/GetOrder',         //请求后台的URL（*）
            method: 'get',