jqGrid нужен ключ ввода для выполнения функций проверки со встроенным редактированием

Question

У меня есть jqGrid (приведенный ниже пример), где мне нужно выполнить довольно сложную проверку, так как новые строки выбираются, не выбираются и (позже) при сохранении сетки.Встроенные методы проверки работали не очень хорошо для моих целей (для устаревших целей мне нужен достаточно детальный контроль над поведением).У меня исправлены почти все проблемы, кроме клавиши «Ввод».

Это демонстрация «встроенного редактирования», за исключением заметки о пользовательской функции «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», либо ввести свой код в метод saveRow

Примечание. Мне известно о событии beforeCellSave при использовании cellEdit: true, но я не хочу редактирование ячейки.

Редактировать: Теперь отражает демонстрацию Олега с удаленным моим кодом:

    $(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, ...] из обработчика, выбор все еще успешен, и новая строка выбрана.Мне нужно оставить старую строку выбранной, если проверка не удалась.

Answer 1

Прежде всего, я бы порекомендовал вам использовать

editoptions: {maxlength: 5}

для ограничения максимальной длины вводимых символов. Для проверки вы можете использовать дополнительно editrules . Если в качестве примера приведена только демонстрация, и вам нужна действительно сложная проверка, вы можете использовать пользовательское правило проверки . Например

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

см. демо .