如何使用bootstrap-table实现一个美观而又功能强大的表格?

一、获取bootstrap-table

http://bootstrap-table.wenzhixin.net.cn/zh-cn/是一个国人开发的插件。

直接下载即可,这个插件同时依赖bootstrap和jquery,需要同时备齐这两个js。

二、在网页中引入js和css文件

这些就差不多了,如果想更有逼格一点,可以不引入zh文件,换个别的什么语言文件,就能感受别国语言了。

三、如何使用?

使用js进行初始化(推荐),还有一种是直接在table标签处加上属性来初始化,我认为这种方式不好拓展功能,个人不推荐,还是使用js的方式靠谱。

(1)首先写出这样一个div

就是一个简单的表格,其中有两个需要解释的属性:

1.data-field

bootstrap-table是key-value形式显示数据的,后端传到前端的json自己解析然后自动显示。

data-field中填写json中对应的key。

例如:json中的键值对是”id”:”xie”, data-field=”id”,那么表格中就会自动填充”xie”。

2.data-sortable

这个是bootstrap-table用来做排序的,如果设置了这个值,就可以在前端或者后端分页中对数据进行排序(前端分页不用往后端传值,后端分页需要传值,仅此而已)。如果不需要排序,就不用加上这个属性。

(2)写出这样的js

$(function () {showTable();});在页面加载时就调用showTable(),进行表格的生成。

这里是我常用的后端分页的情况,下面选些重要的解释:

  1. search:是否使用搜索,如果为true,就会多出一个搜索框。在前端分页的情况下,会在前端直接在对象中进行搜索。如果是后端分页,就会在请求后端数据时添加一个search参数,由后端进行搜索处理。
  2. url:从后端获取数据的地址。从哪里获取表格数据?就从这里了。
  3. method:请求后端的方法。前端分页可以用get,后端基本上只能用post了。
  4. escape:有没有经历过被xss的痛苦?这个属性支持特殊字符自动转义,再也不怕被x。
  5. sidePagination: 决定前后端分页,有server和client两个选项
  6. queryParams:请求后端时的参数,特别容易出错,需要注意。
  7. pageSize:分页大小,会自动根据数据量来决定,不用太在意。

四、后端实现

参考如下文章:

spring mvc 整合page-helper

特别需要注意,如果使用的是后端分页,需要传入类似这样的实体类:

这个实体类基本上是固定的,不需要怎么改动。

五、关于前后端分页的选择

这个其实是一开始就要确定好的。是否需要分页?是前端分页还是后端分页?(区别在于,前端分页很省事,在数据量不多的时候可以使用,但是如果多了,会造成性能问题。后端分页需要自己实现,比较复杂,但是效率和性能都很好,适用各种情况)

如果是前端分页,那就把sidePagination改成client或者根本就不加这个属性(默认就是前端分页),然后不需要传参数(不需要queryParam这个属性了)。只需要后端访问地址(只需要url属性)。后端直接给出一个所有数据的list,自动转化成json,前端帮你对应展示,就搞定了,确实很省事。

或者直接就使用table加属性的方式来生成表格,默认就是前端分页。

后端分页,就可以参考我写的那个例子了。把sidePagination改成server,给定传输数据的格式,然后后端进行分页处理,给出包含总页数,偏移量,数据…的json,只要做到对应,前端就会自动处理json数据并且展示。

六、实现效果

1

这个界面是加了特技。左上角的增删改操作不是自带的,其他的基本都是原生。

七、总结

感觉很好用哦,在很多使用表格进行数据展示的时候都可以使用!

发表评论

电子邮件地址不会被公开。 必填项已用*标注