jqGrid需要"enter"键来执行内联编辑的验证功能 [英] jqGrid need 'enter' key to perform validation functions with inline editing
问题描述
我有一个jqGrid(下面的简化示例)，在这里，我需要进行相当复杂的验证，因为正在选择，取消选择新行以及(随后)保存网格时，都需要进行此操作.内置的验证技术无法很好地达到我的目的(出于传统目的，我需要对行为进行相当精细的控制).除了"Enter"键外，我几乎解决了所有问题.
I have a jqGrid (pared-down example below) where I need rather complicated validation to be done as new rows are being selected, unselected, and (later) when the grid is saved. The built-in validation techniques weren't working well for my purposes (for legacy purposes, I need fairly fine-grained control over the behavior). I've got almost all of the problems fixed except for the 'Enter' key.
这是内联编辑"演示，除了注意自定义的"onSelectRow"功能...
This is the "inline editing" demo, except notice the custom "onSelectRow" function...
<script>
jQuery(document).ready(function(){
var lastsel
jQuery("#rowed5").jqGrid({
datatype: "local",
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true },
{name:'stock',index:'stock', width:60, editable: true},
{name:'ship',index:'ship', width:90, editable: true},
{name:'note',index:'note', width:200, sortable:false,editable: true}
],
onSelectRow: function(id){
if (id && id !== lastsel) {
if (lastsel != undefined) {
jQuery("#rowed5").jqGrid('saveRow', lastsel);
if ( ! myValidate(lastsel) ) {
jQuery("#rowed5").jqGrid('editRow', lastsel, true);
return;
}
}
jQuery("#rowed5").jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "clientArray",
caption: "Sample"
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
];
for(var i=0;i<mydata2.length;i++)
jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
function myValidate(id) {
var t = jQuery("#rowed5").jqGrid("getCell", id, 'note');
if ( t.length > 5 ) {
jQuery("#rowed5")
.jqGrid('resetSelection').jqGrid('setSelection', id, false);
alert('note is too long, max 5 char');
return false;
}
return true;
}
</script>
<table id="rowed5"></table>
如果通过使用鼠标在网格内更改行选择，则注释"字段将得到验证.但是，如果按Enter键以接受行值...我不知道在哪里捕获该事件以插入我的验证函数.似乎没有要捕获的"onSaveRow"事件或"beforeRaveRow"事件.
If you change row selections within the grid by using the mouse the field "notes" is validated. However, if you press the enter key to accept the row values... I can't figure out where to catch that event to insert my validation function. There doesn't seem to be an "onSaveRow" event or "before saveRow" event to catch.
似乎我需要自己捕获"enter"键，或者将我的代码注入saveRow方法中
It seems I need to either catch the "enter" key myself, or inject my code into the saveRow method
注意:使用cellEdit: true时我知道beforeCellSave事件，但是我不希望 进行单元格编辑.
Note: I'm aware of the beforeCellSave event when using cell true but I don't want cell editing.
编辑:现在反映了Oleg的演示，其中我的代码已被删除:
Now reflects Oleg's demo with my code largely removed:
$(document).ready(function () {
'use strict';
var mydata = [
{id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx"},
{id: "23456", name: "Laptop", note: "Long text", stock: "Yes", ship: "InTime"},
{id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT"}
],
$grid = $("#rowed5"),
numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true,
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }},
lastsel;
function myValidate1 (value, colname) {
if (value.length > 5) {
return [false, " is too long for the column '" +
colname + "'\nMax 5 char is permitted"];
} else {
return [true, ""];
}
}
$grid.jqGrid({
datatype: "local",
data: mydata,
height: 'auto',
colNames: ['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel: [
{name: 'id', index: 'id', width: 90, editable: true, sorttype: "int"},
{name: 'name', index: 'name', width: 150, editable: true},
{name: 'stock', index: 'stock', width: 60, editable: true},
{name: 'ship', index: 'ship', width: 90, editable: true},
{name: 'note', index: 'note', width: 200, editable: true, sortable: false,
editrules: {custom: true, custom_func: myValidate1}}
],
onSelectRow: function (id) {
var $this = $(this);
if (id && id !== lastsel) {
if (lastsel != undefined) {
$this.jqGrid('saveRow', lastsel);
}
$this.jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "clientArray",
caption: "Sample"
});
});
我从选择处理程序中删除了myValidate调用和返回.但是仍然存在的问题是，该演示仅依赖于editrules/custom_func验证，并且不再起作用.当从处理程序中输入return [false, ...]时，选择仍然成功，并且选择了新行.如果验证失败，我需要保留旧行.
I removed the myValidate call and the return from the select handler. The problem that remains though is that the demo relies only on the editrules/custom_func validation and it no longer works. When I return [false, ...] from the handler the selection still succeeds and the new line is selected. I need to keep the old line selected if the validation fails.
推荐答案
首先，我建议您使用
editoptions: {maxlength: 5}
限制输入字符的最大长度.为了进行验证，您可以另外使用编辑规则.如果该示例仅是演示，并且您需要一些非常复杂的验证，则可以考虑使用
to restrict the max length of the input characters. For the validation you can use additionally editrules. If the example only the demo and you need some really complex validation you consider to use custom validation rule. For example
editrules: {custom: true, custom_func: myValidate1}
其中
function myValidate1 (value, colname) {
if (value.length > 5) {
return [false, " is too long for the column '" +
colname + "'\nMax 5 char is permitted"];
} else {
return [true, ""];
}
}
请参见演示.
这篇关于jqGrid需要"enter"键来执行内联编辑的验证功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
