slickgrid列の検証と簡単なサンプルがある正規表現

Question

でカラムを検証：

function requiredFieldValidator(value) { 
     if (value == null || value == undefined || !value.length) { 
     return {valid: false, msg: "This is a required field"}; 
     } else { 
     return {valid: true, msg: null}; 
     } 
    } 

、ちょうど、このオプションを置くために必要とされている列を検証する：validator: requiredFieldValidator

しかし、どの場合、私は正規表現の機能を使用することができますが、私は余分なパラメータ - 正規表現の文字列を渡す必要があります。デフォルトでは

Answer 1

、あなたはしかし、あなたが簡単にできるように、ソースを編集することができ、validatorメソッドに複数のパラメータを渡すことはできません。

this.validate = function() { 
    if (args.column.validator) { 
    var validationResults = args.column.validator($input.val()); 
    if (!validationResults.valid) { 
     return validationResults; 
    } 
    } 

    return { 
    valid: true, 
    msg: null 
    }; 
}; 

変更：var validationResults = args.column.validator($input.val());

へ：用slick.editors.js表情で

function requiredFieldValidator(value, input) 

0： var validationResults = args.column.validator($input.val(), $input);

これは次のようにあなたのバリデータメソッドシグネチャを変更しますそれと

、あなたがinput.attr('validation-expression')またはinput.data...または何を入力のうち、欲しいものは何でも属性を取得することができます。

Answer 2

これにアプローチする最良の方法は、とにかく私の見解では、あなたは別の新しいカスタムエディタとしてslick.editor.jsに追加しますあなた自身のエディタをコーディングすることです。このファイルも作成されています。私は正規表現テストを実装し、それは素晴らしい動作します。

Regexだけでなく、さまざまな条件タイプにも対応している新しいエディタがあります。たとえば、min:2というオプションは最小数2が必要ですが、minLength:2は入力が少なくともString 2文字など...あなたが実際に探しているものは、コード定義patternになります。 だから、基本的に、あなたはslick.editor.js内でこのコードを含める必要があります：

ConditionalCellEditor : function(args) {    
    var $input; 
       var defaultValue; 
       var scope = this; 
    var condObj = null; 

       this.init = function() { 
         $input = $("<INPUT type='text' class='editor-text' />") 
           .appendTo(args.container) 
           .bind("keydown.nav", function(e) { 
             if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) { 
               e.stopImmediatePropagation(); 
             } 
           }) 
           .focus() 
           .select(); 
       }; 

       this.destroy = function() { 
         $input.remove(); 
       }; 

       this.focus = function() { 
         $input.focus(); 
       }; 

       this.getValue = function() { 
         return $input.val(); 
       }; 

       this.setValue = function(val) { 
         $input.val(val); 
       }; 

       this.loadValue = function(item) { 
         defaultValue = item[args.column.field] || ""; 
         $input.val(defaultValue); 
         $input[0].defaultValue = defaultValue; 
         $input.select(); 
       }; 

       this.serializeValue = function() { 
         return $input.val(); 
       }; 

       this.applyValue = function(item,state) { 
         item[args.column.field] = state; 
       }; 

       this.isValueChanged = function() { 
         return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
       }; 

       this.validate = function() { 
     var condObj = args.column.editorOptions; 
     var returnMsg = null; 
     var returnValid = true; 

     if(typeof condObj.min != 'undefined') { 

      if(parseFloat($input.val()) < parseFloat(condObj.min)) { 
       returnMsg = "Value should not be less then "+condObj.min; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.max != 'undefined') { 
      if(parseFloat($input.val()) > parseFloat(condObj.max)) { 
       returnMsg = "Value should not be over "+condObj.max; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.minLength != 'undefined') { 

      if($input.val().length < condObj.minLength) { 
       returnMsg = "Value length should not be less then "+condObj.minLength; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.maxLength != 'undefined') { 
      if($input.val().length > condObj.maxLength) { 
       returnMsg = "Value length should not be over "+condObj.maxLength; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.pattern != 'undefined') { 
      if(condObj.pattern.test($input.val()) != true) { 
       returnMsg = (condObj.msg) ? condObj.msg : "Value is invalid following a regular expression pattern"; 
       returnValid = false; 
      } 
     }    
     if(typeof condObj.required != 'undefined') { 
      if($input.val().length == "" && condObj.required) { 
       returnMsg = "Required field, please provide a value"; 
       returnValid = false; 
      } 
     } 

     // Now let's return our boolean results and message if invalid 
     return { 
      valid: returnValid, 
      msg: returnMsg 
     } 
       }; 

       this.init(); 
}, 

その後、私のSlickGrid列の定義内で、私は私が定義した新しいエディタを呼び出すと、私はANに合格することを決めたいくつかのオプションを渡していますeditorOptionsをObjectとして使用することで、必要なオプション、パターン、msg、minLengthなどをすべて柔軟に追加できます。私の例は、電子メールの正規表現パターンの検証です。

columns1 = [ 
... 
{id:"email", field:"email", name:"Em@il", width:145, editor:ConditionalCellEditor, editorOptions:{pattern:/^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$/, msg:"Must be a valid email"} }, 
...]; 

ボイルラは、チャームのように動作します。 私の新しいConditionalCellEditorエディタは私にはるかに柔軟性があるので、私はもうeditor:TextCellEditorをほとんど使用していません。それが助けてくれることを願います。

Answer 3

これは非常に役に立ちました。私は可能なエントリのすべてのタイプ - 電子メール、電話、zipなどのための異なる入力タイプを作成しています。 JSONでこれを行うには、slick.grid.jsファイルを変更して、オブジェクト呼び出しを行うためにエントリを評価する必要があります。

if (d) { 
    if(m.formatter){ 
    m.formatter=eval(m.formatter) 
    } // make it an object call instead of string 

if(m.editor) { 
    m.editor=eval(m.editor) 
    } 

if(m.editorOptions) { 
    m.editorOptions=eval(m.editorOptions) 
    } 

}

あなたのJSONの列はこの更新プログラムを持っていることを確認します：

\"editor\": \"Slick.Editors.Conditional\", 
\"editorOptions\": 
    {\"pattern\":\"email\", \"msg\":\"Must be a valid email\", \"required\":\"1\"} 

youreのは次のようになりslick.editors.jsください：もちろん

(function ($) { 
$.extend(true, window, { 
    "Slick": { 
    "Editors": { 
    "Conditional": Conditional, 

inside -> function Conditional(args){ 

if(typeof condObj.pattern != 'undefined') { 
    if(condObj.pattern=='email'){ 
     pattern=/^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$/; 
     val=$input.val(); 
     if(pattern.test(val) != true && val!='') { 
      returnMsg = (condObj.msg) ? condObj.msg : "Value is invalid"; 
      returnValid = false; 
     } 
} 
} 
if(!returnValid){ 
    alert(returnMsg) 
}