jqGrid editrules详解及自定义editrules实现

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

jqGrid通过editrules可以实现编辑输入值的验证，实际运用中我们可以使用jqGrid自带的editrules，也可以设置editrules的customer为true，并编写自定义验证函数来实现，有关jqGrid编辑其它事项，可以参考：

• jqGrid 单元格编辑 自定义下拉选择框 动态数据源 通用实现
• jqGrid 单元格编辑 如何手动结束编辑、重置单元格编辑状态 getChangedCells获取不到数据处理
• jqGrid 条件编辑、条件样式、自定义错误验证处理

一、jqGrid内置rules

关于jqGrid rules详解，大家可以参考jqGrid官方用户指南。

1、rules 语法

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [
      ...
      {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
      ...
   ]
...
});
</script>

2、可用的选项

Property	Type	Description
custom	boolean	是否启用自定义验证，如果设为true则需要指定custom_func函数.
custom_func	function	this function should be used when a custom option is set to true. Parameters passed to this function are the value, which should be checked and the name - the property from colModel. The function should return array with the following parameters: first parameter - true or false. The value of true mean that the checking is successful false otherwise; the second parameter have sense only if the first value is false and represent the error message which will be displayed to the user. Typically this can look like this [false,“Please enter valid value”]
edithidden	boolean	隐藏字段是否可编辑，This option is valid only in form editing/view module. By default the hidden fields are not editable or viewable (in viewGridRow method). If the field is hidden in the grid and edithidden is set to true, the field can be edited or viewed when add, edit or view methods are called.
date	boolean	输入值为日期类型，if set to true a value from datefmt option is get (if not set ISO date is used) and the value will be checked and if this is not valid date, an error message will be displayed
email	boolean	输入值为email类型，if set to true, the value will be checked and if this is not valid e-mail, an error message will be displayed
integer	boolean	输入值为整数，(true or false) if set to true, the value will be checked and if this is not a integer, an error message will be displayed.
maxValue	number(integer)	最大值，integer才有，if set, the value will be checked and if the value is more than this, an error message will be displayed.
minValue	number(integer)	最小值，integer才有，if set, the value will be checked and if the value is less than this, an error message will be displayed.
number	boolean	数值型，if set to true, the value will be checked and if this is not a number, an error message will be displayed.
required	boolean	必填项，if set to true, the value will be checked and if empty, an error message will be displayed.
time	boolean	时间类型，if set to true, the value will be checked and if this is not valid time, an error message will be displayed. Currently we support only hh:mm format and optional am/pm at the end
url	boolean	url类型，if set to true, the value will be checked and if this is not valid url, an error message will be displayed

3、rules不同选项合集案例

1）date类型

   colModel: [
      ...
		{label: "包装日期", name: "zx_date", width: 80, editable:true, editrules:{date:true}},
      ...
   ]

输入"2019-01-0"回车，会报错：“2019-01-0 包装日期: Please, enter valid date value - Y-m-d”
至于为何会按"Y-m-d"格式进行日期验证，是因为colModel的datefmt默认为"Y-m-d"，可以修改datefmt为其它格式。

		{label: "包装日期", name: "zx_date", width: 80, editable:true, editrules:{date:true}, datefmt:"yy-m-d"},

输入2019-01-09，会报2019-01-09 包装日期: Please, enter valid date value - yy-m-d
至于datefmt，参考jqGrid user-guide为：
Governs format of sorttype:date (when datetype becomes local) or/and editrules {date:true} fields. Determines the expected date format for that column - i.e the format set here should correspond to the value which will be inserted into the grid. Uses a PHP-like date formatting. Currently “/”, “-”, and “.” are supported as date separators. Valid formats are:
y,Y,yyyy for four digits year
YY, yy for two digits year
m,mm for months
d,dd for days.
The values is used to sort the date correct and validate it in case of editing with validation (editrules)

2）email类型

   colModel: [
      ...
		{label: "包装日期", name: "zx_date", width: 80, editable:true, editrules:{date:true}},
      ...
   ]

输入：asfdsaff，会报 asfdsaff email: is not a valid e-mail

3）integer类型

   colModel: [
      ...
		{label: "箱数", name: "box_count", width: 40, editable:true, editrules:{integer:true, minValue:1}},
      ...
   ]

输入0回车，会报 0 箱数: value must be greater than or equal to 1

4）number类型

   colModel: [
      ...
		{label: "装箱率", name: "snp", width: 70, editable:true, editrules:{number:true}},
      ...
   ]

输入 marcus 回车，会报 marcus 装箱率: Please, enter valid number

5）time类型

   colModel: [
      ...
		{label: "装箱率", name: "snp", width: 70, editable:true, editrules:{time:true}},
      ...
   ]

输入 10:140 回车，会报 10:140包装时间: Please, enter valid date value - hh:mm (am/pm)

6）url类型

   colModel: [
      ...
		{label: "url", name: "url", editable:true, width: 120, editrules:{url:true}},
      ...
   ]

输入 lmlxj.cn 回车，会报 lmlxj.cn url: is not a valid URL. Prefix required (‘http://’ or ‘https://’)

二、自定义rules

1、案例代码

   colModel: [
      ...
		{label: "批号", name: "pihao", width: 70, editable:true,editrules:{custom:true, custom_func:pihaoValidate}},
      ...
   ]
	function pihaoValidate(value, column) {
		var now = new Date, 
			month = (now.getMonth() + 1) < 10 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1,
			day = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(),
			ymd = now.getFullYear() + "" + month + "" + day;
			console.log(ymd,value)
			if(value && value.indexOf(ymd) >= 0) {
				return [true, ''];
			} else {
				return [false, '批号必须当前日期:年月日开头!'];
			}
	}   

假设当前日期为：2019-02-01，则输入 20190202 回车，会报 20190202 批号必须当前日期:年月日开头!

2、完整的页面代码

<!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/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-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 = 10;
		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 pihaoValidate(value, column) {
		var now = new Date, 
			month = (now.getMonth() + 1) < 10 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1,
			day = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(),
			ymd = now.getFullYear() + "" + month + "" + day;
		if(value && value.indexOf(ymd) >= 0) {
			return [true, ''];
		} else {
			return [false, '批号必须当前日期:年月日开头!'];
		}
	}
	$(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: "pihao", width: 70, editable:true,editrules:{custom:true, custom_func:pihaoValidate}},
				{label: "email", name: "email", width: 150, editable:true, editrules:{email:true},},
				{label: "包装日期", name: "zx_date", width: 80, editable:true, editrules:{date:true},datefmt:"yy-m-d"},
				{label: "包装时间", name: "zx_time", width: 60, editable:true, editrules:{time:true},},
				{label: "装箱率", name: "snp", width: 70, editable:true, editrules:{number:true}},
				{label: "箱数", name: "box_count", width: 40, editable:true, editrules:{integer:true, minValue:1}},
				{label: "url", name: "url", editable:true, width: 120, editrules:{url:true}},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			cellEdit: true,
			cellsubmit: 'clientArray'
		});
		getBills();
	});
</script>
</body>
</html>

3、自定义错误输出

可以重写info_dialog函数，实现验证错误信息的自定义显示，具体可以参考另外一篇博文： jqGrid 条件编辑、条件样式、自定义错误验证处理

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