jqGrid 条件编辑、条件样式、自定义错误验证处理
可以利用jqGrid的isCellEditable函数实现表格行或单元格的条件编辑，利用colMode的formatter实现表格行或单元格的条件样式，重写info_dialog实现验证错误信息自定义显示。一个DEMO，看看具体如何实现。
1、页面截图
2、页面代码
<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">
<button type="button" class="btn btn-sm" onclick="getBills()">加载数据button>
div>
<div class="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) ? "" + data + "" : 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) ? "" + data + "" : 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);
});
