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> 

あなたがフィールド「ノート」をマウスを使用して、グリッド内の行の選択を変更した場合は、検証されます。しかし、行の値を受け入れるためにEnterキーを押すと、私はそのイベントをキャッチして自分の検証関数を挿入する場所を特定できません。 catchする "onSaveRow"イベントや "before saveRow"イベントはないようです。

私が自分自身をキー、またはsaveRow方法に

注意を自分のコードを挿入「を入力します」をキャッチするのいずれかの必要があると思われる：cellEdit: trueを使用しているとき、私はbeforeCellSaveイベントの承知しているが、私ははしたくありませんセル編集。

編集：今すぐ私のコード大部分が取り除かとオレグのデモ反映：

$(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を使用することができます。デモのみの例で、実際に複雑なバリデーションが必要な場合は、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を参照してください。