jqGrid使用总结：数据加载、单元格编辑、底部导航、汇总合计行等常用操作。

jqGrid是一个比较好的JavaScript开源表格组件，尤其它的编辑功能比较强大，另外其源码可读性非常好。

1、jqGrid资源

jqGrid资源相对来说比较少，国内倒是有很多所谓的jqGrid demo网站，但都是4.x版本，版本有点太过时啦，因此，有点英文基础的还是看jqGrid的官方资源吧。
1）user-guide，http://www.guriddo.net/documentation/guriddo/javascript/user-guide/basic-grid/
2）jqgrid-demo，http://www.guriddo.net/demo/guriddojs/

2、jqGrid国内CDN资源

虽说jqGrid是一个比较好的前端开源表格组件，但比较可惜的是，貌似国内用的比较少，因此其CDN资源也比较少，现有国内CDN资源基本上都是4.6版本的，很少有5.x版本。
1）5.3.1 http://developer.cybozu.net.cn/hc/kb/article/206405/ 访问速度比较慢
2）4.6 https://www.bootcdn.cn/jqgrid/ 访问速度很快

3、jqGrid如何扩展现有方法

如下代码所示扩展了一个endEdit方法，调用此方法，会结束编辑，确保调用getChangedCells方法可以获取变动数据。

	(function($){
		$.jgrid && $.jgrid.extend({
			endEdit: function() {
				var $cell = this.find(" .edit-cell");
				if($cell.length > 0) {
				    var iRow = $cell.closest("tr").index(), iCol = $cell.index();
				    // $("#orders").jqGrid("validationCell", $cell, "hhhh", iRow, iCol);
				    this.jqGrid("saveCell", iRow, iCol);
				}
			}
		});
	})(jQuery);
	
	// 调用：$("#orders").jqGrid("endEdit");

4、jqGrid数据加载及大数据量reload时性能慢处理

jqGrid数据加载注意事项： 当jqGrid有效高度为0时，jqGrid不会显示加载的数据，但是通过getRowData可以获取，因此要留意jqGrid高度问题。
以datatype为local为例，讲了如何加载数据，及用reload实现数据排序时当数据量比较大（比如超过200条）排序耗时处理，参考：
1）jqgrid datatype为local时 reloadGrid数据排序 耗时性能慢问题解决

5、jqGrid单元格编辑(Cell editing)、formatter、editrules

jqGrid支持单元格编辑(Cell editing)、行内编辑(Inline editing)和表单编辑(Form editing)，下述几篇博文都以常见的单元格编辑为例，讲述了自定义下拉选择框、条件编辑，getChangedCells获取不到数据处理。
1）jqGrid 单元格编辑 自定义下拉选择框 动态数据源 通用实现

2）jqGrid 单元格编辑 如何手动结束编辑、重置单元格编辑状态 getChangedCells获取不到数据处理

3）jqGrid 条件编辑、条件样式、自定义错误验证处理

4）jqGrid editrules详解及自定义editrules实现

5）jqGrid formatter详解及一个通用的日期、时间自定义formatter实现

6）jqgrid setCell 单元格赋值空字符串 无效处理

7）jqGrid可编辑模式下 单元格内容不能复制处理

6、jqGrid新增行rowId处理、删除多行注意事项

1）调用jqGrid原生新增行方法：addRowData(string rowid, mixed data, [string position], [string srcrowid])，需要指定rowid，rowid又要唯一，无形会给前端开发带来额外工作量，下文探讨了addRowData的rowid处理及批量新增行实现。
jqGrid addRowData rowId行号处理 及批量添加实现

2）jqGrid批量删除选中行数据时，一定要留意selarrrow获取结果会随着delRowData函数调用发生变化，详情看下文：
jqgrid如何使用delRowData函数批量删除 selarrrow获取的多个选中行数据及注意事项

7、jqGrid多选模式下获取选中行数据而非rowId，multiboxonly参数使用注意等

1）jqGrid 获取选中行注意事项及封装 直接返回行数据而不是rowId

2）jqGrid multiselect多选模式下 multiboxonly设置为true 点击行原选中行会被重置问题处理

8、jqGrid表格底部自定义导航、底部汇总、合计行footerrow

1）jqGrid通过在构建的时候指定pager以及调用jqGrid(“navGrid”,…)即可实现表格底部导航，下文封装了navGrid方法实现自定义导航，并在底部导航添加了文本框搜索，详情查看：
JavaScript jqGrid自定义表格底部导航+自定义文本搜索框实现

2）jqGrid 表格底部汇总、合计行footerrow处理

9、表格自定义右键菜单，表格列强制换行等

1）jqGrid 右键菜单contextmenu简单实现

2）jqgrid使用colModel的classes属性 实现单元格内容过长自动截取带省略号和强制换行

3）jqGrid 如何shrinkToFit出现水平滚动条 及页面有垂直滚动条时表格会超出父容器处理

4）jqgrid shrinkToFit=true 动态设置显示、隐藏列引起的表格宽度异常处理