前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。
bootstrap table系列：
<a href="http://www.cnblogs.com/landeanfen/p/4976838.html" target="_blank">JS组件系列——表格组件神器：bootstrap table</a>
<a href="http://www.cnblogs.com/landeanfen/p/4993979.html">JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）</a>
<a href="http://www.cnblogs.com/landeanfen/p/5005367.html" target="_blank">JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）</a>
比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图：
第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果：
编辑前
点击某个单元格数据
编辑后完成后
关于行列合并的需求博主觉得是非常常见的，尤其是做页面报表的时候需要用到。先来看看效果：
当前页显示不全，点击进入看看。怎么样？效果还不错吧。
关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。
关于表格行的样式设置，其他是它一个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都用得着。当然，效果并不难，自己用jQuery设置tr的背景色也可以实现，但是博主觉得，既然bootstrap table提供了机制设置行的背景色，我们何不用它内置的api呢。我们看看如何实现。
初始化表格的时候
其实重点就在这个参数里面：
bootstrap table支持5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，博主第一次用的时候也研究了好久，按照bootstrap table的规则，必须返回一个json格式的对象型如： { classes: strclass } 。
关于表格行内编辑，需要使用bootstrap table扩展的几个js文件。
如果是在js里面初始化，写法如下：
重点还是看看这个事件的处理方法
对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
表格的行列合并功能不用引用其他的js文件，只需要在cshtml页面使用table的colspan和rowspan即可实现。
怎么样，有没有很简单。当然，有人说了，你都可以不用js初始化，直接在cshtml里面用table的属性去设置url、分页等信息。确实，如果我们看过它的api，会发现它初始化的每一个属性都对应一个table的属性。型如
如果你的表格没有一些特殊的事件需要处理，这样是完全没有问题的。
表格数据的导出功能也需要一些扩展的js支持。
还是来看重点：这两个属性
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。
以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。
1、行内编辑的功能是每一个单元格提交到后台，这样会造成数据库的频繁操作，感觉不太合适。不知道有没有更好的方式，每行提交到后台。
2、导出的功能虽然很好用，但是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。
源码提供出来，园友们有兴趣可以看看。
本文转自懒得安分博客园博客，原文链接：http://www.cnblogs.com/landeanfen/p/5005367.html，如需转载请自行联系原作者