JqGrid 是 JQuery 的表格插件，以ajax的方式和服务器端通信。该插件功能非常强大，通过简单的配置能实现基本常用的表格功能。
可参看以下博客，了解不同参数的含义：http://blog.mn886.net/jqGrid/
1. jqGrid特性：
- ** 基于jquery UI主题，支持主题切换。**
- ** 兼容所有流行的web浏览器。**
- ** Ajax分页，可以控制每页显示的记录数。**
- ** 支持XML，JSON，数组形式的数据源。**
- ** 提供丰富的选项配置及方法事件接口。**
- ** 支持表格排序，支持拖动列、隐藏列。**
- ** 支持滚动加载数据。**
- ** 支持实时编辑保存数据内容。**
- ** 支持子表格及树形表格。**
- ** 支持多语言。**
- ** 免费。**
2. jqGrid的基本用法：
能下面的示例能助你了解 JqGrid 的基本用法。其包含以下功能：
- ** 表格与数据 **
- ** 数据的增删查改 **
- ** 多条件查询和分组查询 **
- ** 排序 **
- ** 分页 **
如何运行代码？
- 点击 jqgrid.html 页面。
- 或者，把解压后的文件放到 Apache下运行，地址为：
http://localhost/JqGrid_20160807_v1/jqgrid.html
在 chrome 上的显示效果如下：
JqGrid 显示效果.png
3. 代码详解：
3.1. 数据初始化
var grid_data = [ {
id:"1", name:"Desktop Computer", note:"note",
stock:"Yes", ship:"FedEx", sdate:"2007-12-03"
...
} ];
3.2. 表格初始化
jQuery(grid_selector).jqGrid({
colModel : [
{
...
formatter : 'actions', // 在每一行显示编辑按钮与删除按钮
formatoptions : { // 按钮设定
}
},
// 设置每一行数据
{ name:'id', index:'id', width:60, sorttype: "int", editable: true },
],
emptyrecords : "no record", //
rowNum : 10, // 每页10行
rowList : [10,20,30], // 设置每页显示行数
pager : pager_selector, // 显示导航栏及相关按键
toppager : false, // 默认设为 false，如果设为 true，则分页栏会被放到 table 上方
multiselect : true,
editurl : "blank.html", // 提交：要把应用放到 Apache 等应用服务器中才可以正常运行，否则点击提交时报错
});
3.3. 改变 Stock 单选框的样式
function aceSwitch( cellvalue, options, cell ) {
}
单选框.png
3.4. 添加日期控件到 'Last Sales'
function pickDate( cellvalue, options, cell ) {
}
日期控件.png
3.5. 编辑按钮设置（其他按钮也做类似设置）
recreateForm : true,
reloadAfterSubmit : true, // 提交后，重新载入 table 的数据
closeAfterEdit : true, // 提交后，关闭编辑框
closeOnEscape : true, // 按 esc 键，关闭编辑框
beforeShowForm : function(e) { // 设置编辑框的样式
}
编辑按钮.png
3.6. 搜索框
// search form
recreateForm : true, // 在每次打开时，都会初始化搜索框
afterShowSearch : function(e) { // 设置搜索框的样式
},
afterRedraw: function() { // 设置筛选框的样式
},
multipleSearch: true, // 多条件查询，例如：((id = 1) AND sdate = "2")
showQuery: true, // 显示查询语句
multipleGroup:true, // 分组查询，例如：((id = 1 AND name = "a") AND sdate = "2")
下面是一个多条件查询的例子：
多条件搜索.png
3.7. 编辑框
// 设置编辑框格式
function style_edit_form(form) {
// 在 "sdate" 上设置 datepicker 日期控件，
// 在 "stock" 上设置 switch 单选控件
form.find('input[name=sdate]')
.datepicker({format:'yyyy-mm-dd', autoclose:true})
.end()
.find('input[name=stock]')
.addClass('ace ace-switch ace-switch-5')
.wrap('<label class="inline" />')
.after('<span class="lbl"></span>');
...
}
编辑框.png
注意：建议把代码放到 Apache 服务器上运行；否则在点击 Submit 按键时会显示404错误。
4. 浏览器兼容
- 目前，JqGrid兼容Chrome、Safari、Firefox、IE10、Edge等主流浏览器。建议大家使用较新版本的Chrome。
- 需要注意 IE9、IE10 的兼容模式仍然会使 jQuery 2.0 运行不正常。
- 不兼容 IE6/7/8。
5. 代码下载
请移步到百度网盘：
https://pan.baidu.com/s/1mitqC7u
