分享一款jQuery表格插件,今天我要介绍的不是DataTables,而是相对没有那么出名的jqGrid,它基于jquery UI主题,同时也支持Bootstrap,能够根据需求使用不同主题。兼容目前主流浏览器,有丰富的配置项和方法事件接口,能够轻松应对一般的表格需求,功能强大,扩展方便,支持多语言。1、下载及引入jqGrid

https://github.com/tonytomov/jqGrid

下载jqGrid后,把文件存放到你项目的任意目录中,使用时引入js、css即可,下面以引入Bootstrap样式为例,i18n下的js为语言包,需要注意的是请务必把语言包放在jqGrid的js之前引入,以免后续出现问题。

jquery 表格样式 jquery 表格插件_php 在线 表格控件

jquery 表格样式 jquery 表格插件_Bootstrap_02

2、初始化表格

页面中输入

jquery 表格样式 jquery 表格插件_php 在线 表格控件_03

下图opt的基本参数,请到api文档查看更多配置属性

jquery 表格样式 jquery 表格插件_Bootstrap_04

在opt中还有一个表格配置属性colModel,该属性就是我们要展示的表头,数据等信息的配置,下图是一个简单的例子。

jquery 表格样式 jquery 表格插件_Bootstrap_05

后台需要返回如下格式的json数据,page为当前页数,records为总共有多少条数据,rows为数据,total为总共页数

jquery 表格样式 jquery 表格插件_jquery 表格样式_06

最后我们配置完成后是这样的。

jquery 表格样式 jquery 表格插件_Bootstrap_07

刷新页面后大概就是下面的样子,没有真实姓名之后的列和导航栏中的工具按钮。

jquery 表格样式 jquery 表格插件_php 在线 表格控件_08

想要配置工具按钮也很简单,配置以下信息即可,内置按钮有新增、编辑、删除、搜索、刷新、查看按钮,可以添加自定义按钮,内置按钮也可以重写其方法,能够方便的实现我们想要的功能。

jquery 表格样式 jquery 表格插件_jquery 表格样式_09

3、新增、编辑、删除功能

大致可以分为弹窗和内联两种操作,可以自己进行自定义,也可以跳转页面进行新增、编辑

jquery 表格样式 jquery 表格插件_Bootstrap_10

弹窗

jquery 表格样式 jquery 表格插件_jquery 表格样式_11

内联4、页脚汇总和分组

jquery 表格样式 jquery 表格插件_php 在线 表格控件_12

5、分页

分页方式有两种,导航分页和无限滚动分页

jquery 表格样式 jquery 表格插件_Bootstrap_13

导航分页

jquery 表格样式 jquery 表格插件_Bootstrap_14

无限滚动分页6、其他

还有很多其他的功能如多选、单选、多层次结构展示、排序、搜索过滤等。唯一的缺陷是树形表格,目前它的树形表格配置繁琐,也存在比较的的问题,但也还勉强能接受,希望树形表格在以后能够有所改善。

jquery 表格样式 jquery 表格插件_php 在线 表格控件_15

API文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

在线演示:http://www.guriddo.net/demo/bootstrap/