分享一款jQuery表格插件，今天我要介绍的不是DataTables，而是相对没有那么出名的jqGrid，它基于jquery UI主题，同时也支持Bootstrap，能够根据需求使用不同主题。兼容目前主流浏览器，有丰富的配置项和方法事件接口，能够轻松应对一般的表格需求，功能强大，扩展方便，支持多语言。
- 1、下载及引入jqGrid
- https://github.com/tonytomov/jqGrid
下载jqGrid后，把文件存放到你项目的任意目录中，使用时引入js、css即可，下面以引入Bootstrap样式为例，i18n下的js为语言包，需要注意的是请务必把语言包放在jqGrid的js之前引入，以免后续出现问题。
- 2、初始化表格
页面中输入<table id="grid-table"></table><div id="grid-pager"></div>，页面基本就这样，然后在js中配置相关信息初始化表格。
下图opt的基本参数，请到api文档查看更多配置属性
在opt中还有一个表格配置属性colModel，该属性就是我们要展示的表头，数据等信息的配置，下图是一个简单的例子。
后台需要返回如下格式的json数据，page为当前页数，records为总共有多少条数据，rows为数据，total为总共页数
最后我们配置完成后是这样的。
刷新页面后大概就是下面的样子，没有真实姓名之后的列和导航栏中的工具按钮。
想要配置工具按钮也很简单，配置以下信息即可，内置按钮有新增、编辑、删除、搜索、刷新、查看按钮，可以添加自定义按钮，内置按钮也可以重写其方法，能够方便的实现我们想要的功能。
- 3、新增、编辑、删除功能
大致可以分为弹窗和内联两种操作，可以自己进行自定义，也可以跳转页面进行新增、编辑
弹窗
内联
- 4、页脚汇总和分组
- 5、分页
分页方式有两种，导航分页和无限滚动分页
导航分页
无限滚动分页
- 6、其他
还有很多其他的功能如多选、单选、多层次结构展示、排序、搜索过滤等。唯一的缺陷是树形表格，目前它的树形表格配置繁琐，也存在比较的的问题，但也还勉强能接受，希望树形表格在以后能够有所改善。
API文档：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
在线演示：
http://www.guriddo.net/demo/bootstrap/