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

版权声明:本文为博主原创文章,转载请注明出处! https://blog.csdn.net/chuangxin/article/details/85834767

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新增行,rowId处理

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

7、jqGrid删除行注意事项

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

8、jqGrid表格底部导航自定义处理

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

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

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

猜你喜欢

转载自blog.csdn.net/chuangxin/article/details/85834767