您的位置：首页 > 其它

jqGrid beforeSaveCell和afterSaveCell实现单元格编辑复杂业务逻辑验证及其它列关联更新

2019-04-26 08:54 465 查看

之前博文“jqGrid editrules详解及自定义editrules实现”，谈到了jqGrid单元格编辑editrules问题，本文继续讨论jqGrid编辑验证即编辑后其它列数据更新问题，基于beforeSaveCell事件实现editrules外的附加验证，基于afterSaveCell事件实现其它列关联更新，DEMO如下：

1、Html源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-beforeSaveCell|afterSaveCell</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,
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,
box_price: 10,
box_money: (rowCount + i) * 10,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
$(function() {
$.jgrid && ($.jgrid.info_dialog = function(caption, content,c_b, modalopt) {
alert(content);
});
$("#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, },
{label: "包装日期", name: "zx_date", width: 80, },
{label: "包装时间", name: "zx_time", width: 60, },
{label: "装箱率", name: "snp", width: 70, },
{label: "箱数", name: "box_count", width: 80, align: 'right', editable:true, editrules:{integer:true, minValue:1}},
{label: "箱单件", name: "box_price", width: 80, align: 'right',},
{label: "金额", name: "box_money", width: 80, align: 'right',},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
cellEdit: true,
cellsubmit: 'clientArray',
beforeSaveCell: function(rowId, cellName, value, iRow, iCol) {
var row = $("#orders").jqGrid("getRowData", rowId);
if (cellName == "box_count") {
if (",1,3,5,7".indexOf("," + row.goods_no + ",") >= 0) {	// 1,3,5,7零件号，箱数不能少于10
if(value - 0 <= 10) return "该零件号装箱数不能少于10";
}
}
},
afterSaveCell: function(rowId, cellName, value, iRow, iCol) {
if (cellName == "box_count") {
var row = $("#orders").jqGrid("getRowData", rowId);
$("#orders").jqGrid("setCell", rowId, "box_money", value * row.box_price);
}
}
});
getBills();
});
</script>
</body>
</html>

2、代码说明

1）1、3、5、7号零件，装箱数不能少于10箱，当3号零件装箱数输入1时，报错，如上图所示；
2）该报错方式做了自定义处理

$.jgrid && ($.jgrid.info_dialog...

3）报错内容分两部分：

该零件号装箱数不能少于10，beforeSaveCell返回的错误信息；
Please, enter …，为editrules对应的integer 默认错误信息；

msg: {
required:"Field is required",
number:"Please, enter valid number",
minValue:"value must be greater than or equal to ",
maxValue:"value must be less than or equal to",
integer: "Please, enter valid integer value",

3、editrules和beforeSaveCell执行顺序

1）简单理解：先执行editrules验证，后执行beforeSaveCell复杂验证；
2）beforeSaveCell通常用于业务逻辑验证，典型表现就是会用到当前行数据

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航