Bootstrap-Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

官网地址:Bootstrap-Table官网

文档地址:Bootstarp-Table官方文档

示例地址:Bootstarp-Table官方示例

源码文件请进入官网下载!

通过一个代码示例来演示一下Bootstarp-Table的基本应用,此处用的是服务端分页方式,后台返回Json串格式为:{“total” : 0, “rows”:[]},total表示查询的所有数据条数,rows是指当前页面展示的数据量。如果不进行分页,total可以去掉。

再来看一下后台代码

以上执行完的效果图如下:

遇到的问题:

  • Bootstrap-Table插件的remove功能如果写成这样:

    是无法执行成功的,因为values需要接收一个数组,所以需要改为:
  • 如果先执行removeAll,再进行append。你会发现双击定位时获取的信息还是之前的信息。
  • 如果遇到双头标题或者行列错乱,可以使用下面代码进行修复。
  • 通过server的方式获取到数据后,假设你缓存了起来,方便一下次直接加载。这时就需要load方式(旧数据会被替换):

    结果发现数据一直加载不出来,WTF,一步一坑。调试跟踪源码发现:

    load方法里面进行了sidePagination判断,因为开始用的是sever状态下加载的数据。此时去执行load会进入if方法直接把data数据给冲掉了。没招啊,改源码不现实,只能把sidePagination改为client,代码如下:

总结:

  • 目前只是用到Bootstrap-Table功能的很小一部分,无法知道其他的坑在哪里等着。
  • 官网实例中有各种方法的示例,可以进行查看或者调试。
  • 好处是Bootstrap-Table源码没有压缩,方便查看和发现问题。

如果转载,请给出原文链接,谢谢!


微信支付宝

如果本文帮助到您,请随意打赏作者