本文主要介绍在实际项目中遇到的如何用Bootstrap Table来动态构建表格,即仅用一个Bootstrap Table构建函数就可以构建多种表格数据,而不用为每个表格都维护一套构建函数,这对于有上百种表格的业务是非常有必要的。
简介
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap Table是基于 Bootstrap 的 jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
Bootstrap Table的下载使用和基础用法这里就不多啰嗦了,参考Bootstrap官方中文文档和Bootstrap Table中文文档。
设计
首先,既然可以动态构建表格,也就是表是变化的。那么在构建表时必定有表名这一参数来决定构建那张表,因此要把表名参数发送到后端来获取具体的表格内容数据,相应的后端要设计为可以接受表名参数。(这里后端可以考虑两种实现方式,一种是提供一个接收表名参数的方法,该方法根据表名进行映射,将查询逻辑打到具体的查询该表名的方法上,但这种方式需要后端为每张表设计具体的增删改查方法,表多了后扩展性不强;另一种就是后端也设计为动态的,提供统一的查询接口,使用动态sql拼接表名参数进行增删改查,这种方式扩展性强,不过灵活性有限)。
其次,表名变了,那是不是表的相应字段也变了,也就是列信息也需要动态构建,这可以通过将表名发送到后端来查询相应的字段名,并返回给前端。通常可以在页面初始化时请求获得各表的字段信息,来节省构建Bootstrap Table的加载时间(不需要每次构建都去请求列头信息)。
实现
后端
简单介绍下用到的后端接口,如果你后端设计的没问题这里可以略过。
后端接口包括页面初始化接口和表查询接口。(方法体已省略,接口名称请自定义)
页面初始化接口用来前端页面初始化时返回所有的表名和各表相应的字段名。表名可以用来构建查询下拉框,字段名用来构建各个表的Bootstrap Table列头。
1 |
|
表查询接口,使用动态sql,也就是所有表共用一套增删改查接口,这里给出查询接口。
1 |
|
具体的动态SQL可以用MyBatis实现,这里给出MyBatis的Mapper.xml中获取表名、字段名 和 查询表数据的sql示例。
获取表名(table_name_list为存储所有表名的表):
1 | <select id="selectTableNames" resultType="java.lang.String"> |
获取字段名:
1 | <select id="selectColumns" resultType="java.lang.String" parameterType="java.lang.String"> |
查询表数据(columnList是selectColumns返回的字段列表):
1 | <select id="selectByTableName" resultType="java.util.Map" parameterType="java.util.Map"> |
前端
首先在html中要显示表格的位置加入下面一句:
1 | <table id="bootstrap-table"></table> |
接下来是js中的页面初始化获取表名和字段名,填充查询下拉框,用jQuery实现。(如果有权限信息来控制页面显示,也可以在页面初始化时获取)。
1 | var tableNames = []; //表名数组 |
最后是Bootstrap Table的构建,可以将构建方法绑定在查询按钮点击事件上。
1 | function initTable() { |
页面展示
以上就是Bootstrap Table动态构建表格的具体实现,代码中有些要根据自己情况改,有问题欢迎交流。