JqGrid入门

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('')
      .after('');
  ...
}

编辑框.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

6. 参考资料

http://blog.mn886.net/jqGrid/
http://www.iteye.com/news/27604
http://www.cnblogs.com/huozhicheng/archive/2012/11/11/2765610.html