javascript - jqGrid 需要 'enter' 键来执行内联编辑的验证功能

Question

我有一个 jqGrid(下面的简化示例)，我需要在选择、取消选择新行和(稍后)保存网格时完成相当复杂的验证。内置的验证技术不能很好地满足我的目的(出于遗留目的，我需要对行为进行相当细粒度的控制)。除了“Enter”键之外，我几乎已经解决了所有问题。

这是“内联编辑”演示，但请注意自定义“onSelectRow”功能...

<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>

如果您使用鼠标更改网格中的行选择，则“注释”字段会生效。但是，如果您按回车键接受行值...我无法弄清楚在哪里捕获该事件以插入我的验证函数。似乎没有要捕获的“onSaveRow”事件或“before saveRow”事件。

看来我需要自己捕捉“enter”键，或者将我的代码注入(inject)到 saveRow 方法中

注意:我知道在使用 cellEdit: true 时发生了 beforeCellSave 事件，但我不想单元格编辑。

编辑:现在反射(reflect)了 Oleg 的演示，我的代码大部分被删除了:

    $(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 验证，它不再有效。当我 从处理程序返回 [false, ...] 时，选择仍然成功并且选择了新行。如果验证失败，我需要保留旧行。

Answer 1

首先我会推荐你​​使用

editoptions: {maxlength: 5}

限制输入字符的最大长度。对于验证，您可以额外使用 editrules .如果示例只是演示并且您需要一些非常复杂的验证，您可以考虑使用 custom validation rule .例如

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, ""];
    }
}

参见 the demo .