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

可以利用jqGrid的isCellEditable函数实现表格行或单元格的条件编辑，利用colMode的formatter实现表格行或单元格的条件样式，重写info_dialog实现验证错误信息自定义显示。一个DEMO，看看具体如何实现。

1、页面截图

在这里插入图片描述

2、页面代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>jggrid-单元格条件编辑</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/jqueryui/1.11.0/jquery-ui.min.css" />
	<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
	<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.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="getBills()">加载数据</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">
	function getBills() {
		var rowCount = 20;
		var data = [];
		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");
		$("#orders").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
	}
	function outCountFormatter(data, options, row) {
		return (data < 22) ? "<span style='color:red'>" + data + "</span>" : data;
	}
	function totalCountRules(value, colname) {
		if(value != parseFloat(value) || value < 10) {
			return [false, colname + "必须为数值, >=10!"];
		}
		return [true, ""];
	}
	$(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},
				{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
				{label: "箱数", name: "box_count", width: 40, editable:true, sorttype: "number"},
				{label: "需求总数", name: "total_count", width: 70, editable:true, 
					editrules:{custom:true, custom_func: totalCountRules}, sorttype: "number"},
				{label: "需求数量", name: "goods_count", width: 70,},
				{label: "出库数量", name: "out_count", width: 70, formatter: outCountFormatter, sorttype: "number"},
				{label: "订单号", name: "bill_no", width: 120},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			cellEdit: true,
			cellsubmit: 'clientArray',
			isCellEditable : function(cellname, iRow, iCol){
				// 设置某一行是否允许编辑
	            var rows = $("#orders").jqGrid("getRowData");
				// console.log(rows[iRow - 1]);
				return (rows[iRow - 1]['unit'] == "箱") 
					&& (cellname!='box_count' || cellname=='box_count' && rows[iRow - 1]['car_type_name'] == '车型501');
	        },gridComplete: function() {
	        	var rowIds = $("#orders").jqGrid("getDataIDs");
	        	for(var i = 0, l = rowIds.length; i<l; i++) {
	        		var rowData = $("#orders").jqGrid("getRowData", rowIds[i]);
	        		if(rowData && rowData.unit == '箱') {
	        			$("#" + rowIds[i]).css("background", "gray");
	        		}
	        	}
	        }
		});
		
		$.jgrid && ($.jgrid.info_dialog = function(caption, content,c_b, modalopt) {
			alert(content);
		});
	});	
</script>
</body>
</html>

3、代码说明

表格行或单元格条件编辑：
表格构建时，实现isCellEditable函数。

function isCellEditable(cellname, iRow, iCol){
				// 设置某一行是否允许编辑
	            var rows = $("#orders").jqGrid("getRowData");
				// console.log(rows[iRow - 1]);
				return (rows[iRow - 1]['unit'] == "箱") 
					&& (cellname!='box_count' || cellname=='box_count' && rows[iRow - 1]['car_type_name'] == '车型501');
	        }

1）单位为“箱”的行可以编辑；
2）非box_count字段，或box_count字段并且 car_type_name== '车型501’也可以编辑。

如案例所示：
1）第1、3行不可编辑，单位为件，不满足可编辑要求；
2）第2行，箱数、需求总数都可以编辑；
3）第4行，箱数不可编辑，需求总数可以编辑；

条件样式
条件样式通常2种情形：单元格条件样式、表格行条件样式，两者实现完全不同。

单元格条件样式，可以用formatter，如案例的出库数量：

{label: "出库数量", name: "out_count", width: 70, formatter: outCountFormatter, sorttype: "number"},
function outCountFormatter(data, options, row) {
	return (data < 22) ? "<span style='color:red'>" + data + "</span>" : data;
}	// 出库数<22红色字显示

表格行条件样式：
1）表格构建时，注册gridComplete事件处理处理函数，表格数据清空、加载完毕会调用gridComplete事件处理函数。
2）在gridComplete中遍历表格行，设置tr的css，如：

gridComplete: function() {
	        	var rowIds = $("#orders").jqGrid("getDataIDs");
	        	for(var i = 0, l = rowIds.length; i<l; i++) {
	        		var rowData = $("#orders").jqGrid("getRowData", rowIds[i]);
	        		if(rowData && rowData.unit == '箱') {
	        			$("#" + rowIds[i]).css("background", "gray");
	        		}
	        	}
	        }

自定义错误信息显示
1）在colModel中设置编辑规则
{label: “出库数量”, name: “out_count”, width: 70, formatter: outCountFormatter}

2）outCountFormatter自定义验证函数实现，出库数必须是数字，大于等于10

	function totalCountRules(value, colname) {
		if(value != parseFloat(value) || value < 10) {
			return [false, colname + "必须为数值, >=10!"];
		}
		return [true, ""];
	}

当出库数，输入5时，显示jqgrid自带错误信息，如下图所示。
在这里插入图片描述

重写info_dialog实现自定义错误信息显示，如下：

$.jgrid && ($.jgrid.info_dialog = function(caption, content,c_b, modalopt) {
			alert(content);
		});

在这里插入图片描述