jqGrid 单元格如何手动结束编辑、重置单元格编辑状态 getChangedCells获取不到数据一次性提交处理

最新推荐文章于 2023-08-16 21:00:00 发布

老马历写记

最新推荐文章于 2023-08-16 21:00:00 发布

阅读量4.3k

点赞数 3

分类专栏： WEB-Front 文章标签： jqGrid 单元格编辑手动结束编辑重置编辑状态表格扩展

本文链接：https://blog.csdn.net/chuangxin/article/details/85071265

版权

WEB-Front 专栏收录该内容

87 篇文章 3 订阅

订阅专栏

在上篇博文：jqGrid 单元格编辑自定义下拉选择框动态数据源通用实现，讨论了如何用custom edittype实现一个通用的下拉选择框编辑方案，本文讨论的是单元格编辑的另外两个问题：如何手动结束编辑和如何重置编辑状态，实现变动数据一次性统一提交后台，提交成功后重置表格编辑状态。

1、基于单元格编辑常见使用流程

1）构建jqgrid时cellEdit=true,cellsubmit=‘clientArray’，并在colModel中设置要编辑的列editable=true
2）编辑完后敲enter回车键或鼠标点击其它地方，使编辑生效；
3）调用getChangedCells获取变动行数据；
4）变动数据提交到服务器后端处理；
5）处理成功后，重置jqgrid的编辑状态，再次调用getChangedCells取不到数据。

2、常见使用流程中的问题

1）用户编辑完后，可能不会再敲回车键或点击表格其它地方，而是直接点击类似“保存”按钮；
2）jqgrid没有提供重置编辑状态函数，只能通过操作dom修改class实现，意味着需要自己封装实现。

3、结束编辑和重置编辑状态的封装

	(function($){
		$.jgrid && $.jgrid.extend({
			// 表格编辑完，数据保存完后，编辑状态还在，调用该方法清除该状态。
			acceptChangedCells: function() {
				this.each(function(){
					var $t= this;
					$($t.rows).each(function(j){
						if ($(this).hasClass("edited")) {	
							$(this).removeClass('edited');
							$('td.success',this).removeClass('success');
						}
					});
				});
			},
			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);

调用jqGrid(‘endEdit’)，jqGrid(‘acceptChangedCells’)即可，具体看个案例。

4、案例说明

页面截图：
在这里插入图片描述
页面代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>jggrid-endedit</title>
	
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<div class="page-content container">
	<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
		<button type="button" class="btn btn-sm" onclick="getChangedCells1()">未调用endEdit获取变动数据</button>
		<button type="button" class="btn btn-sm" onclick="getChangedCells2()">调用endEdit获取变动数据</button>
		<button type="button" class="btn btn-sm" onclick="getChangedCells3()">未重置编辑状态，获取变动数据</button>
		<button type="button" class="btn btn-sm" onclick="getChangedCells4()">重置编辑状态，获取变动数据</button>
	</div><!-- page-head -->
	<div class="page-body"> <!-- page-body -->
		<div class="panel panel-default" id="panel-orders">
			<table id="orders"></table>
		</div>
	</div>
</div>
   
<script type="text/javascript">
	var data = [], rowIds = [];
	function getBills() {
		var rowCount = 50;
		for (var i = 0; i < rowCount; i ++) {
			data.push({
				sid: i,
				bill_id: i,
				bill_detail: i,
				goods_id: i,
				unit_id: i,
				package_id: i,
				ref_detail: i,
				goods_no: i + 1,
				goods_name: '零件名称' + rowCount + i,
				car_type_name: '车型' + rowCount + i,
				package_name: '包装器具' + rowCount + i,
				unit: i%2==0 ? '件' : '箱',
				snp: 0.89,
				box_count: rowCount + i,
				total_count: rowCount + i,
				goods_count: rowCount + i,
				out_count: rowCount + i,
				bill_no: 'BN0000000' + i,
			})
		}
		$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
	}
	function getChangedCells1() {
		var rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells1: ", rows);
	}
	function getChangedCells2() {
		$("#orders").jqGrid("endEdit");
		var rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells2: ", rows);
	}
	function getChangedCells3() {
		$("#orders").jqGrid("endEdit");
		var rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells3: ", rows);
		//TODO, server-request
		rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells3: ", rows);
	}
	function getChangedCells4() {
		$("#orders").jqGrid("endEdit");
		var rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells4: ", rows);
		//TODO, server-request
		$("#orders").jqGrid("acceptChangedCells");
		rows = $("#orders").jqGrid("getChangedCells");
		console.log("getChangedCells4: ", rows);
	}	
	$(function() {
		$("#orders").jqGrid({
			colModel: [
				{label: "零件号", name: "goods_no", width: 60},
				{label: "零件名称", name: "goods_name", width: 180},
				{label: "车型", name: "car_type_name", width: 70},
				{label: "包装器具", name: "package_name", width: 70},
				{label: "单位", name: "unit", width: 60, editable:true, edittype:'select', editoptions:{value:"件:件;箱:箱"}},
				{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
				{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
				{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
				{label: "需求数量", name: "goods_count", width: 70,},
				{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
				{label: "订单号", name: "bill_no", width: 120},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			cellEdit: true,
			cellsubmit: 'clientArray'
		});
		getBills();
	});
	
	/** jqgrid 扩展 start．**/
	(function($){
		$.jgrid && $.jgrid.extend({
			// 表格编辑完，数据保存完后，编辑状态还在，调用该方法清除该状态。
			acceptChangedCells: function() {
				this.each(function(){
					var $t= this;
					$($t.rows).each(function(j){
						if ($(this).hasClass("edited")) {	
							$(this).removeClass('edited');
							$('td.success',this).removeClass('success');
						}
					});
				});
			},
			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);
</script>
</body>
</html>

代码说明：
1）按钮“未调用endEdit获取变动数据”，如截图单位由件改为箱时，点击该按钮获取变动数据，获取到的是空数组[]；
2）按钮“调用endEdit获取变动数据”，如截图单位由件改为箱时，点击该按钮获取变动数据，获取到的是第一行数据；
3）按钮“未重置编辑状态，获取变动数据”，如截图单位由件改为箱时，点击该按钮获取变动数据，第二次依然获取到上次的变动数据；
4）按钮“重置编辑状态，获取变动数据”，如截图单位由件改为箱时，点击该按钮获取变动数据，第二次获取变动数据是空数组[]；