JQuery datagrid分组 jquery datagrid控件

转载

mob64ca140651e5 2024-08-26 14:06:58

文章标签 JQuery datagrid分组 jqGrid 统计合计批量删除单元格编辑 文章分类 jQuery 前端开发

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获取的多个选中行数据及注意事项