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

Лучший способ подойти к этому, на мой взгляд, в любом случае, это написать свой собственный редактор, который вы добавите в slick.editor.js в качестве другого нового пользовательского редактора. Этот файл тоже создан для этого. Я реализовал тест на регулярные выражения, и он отлично работает.

Вот мой новый редактор, который работает не только для Regex, но и для различных типов условий, например, для параметра min:2 потребуется минимальное число 2, в то время как для minLength:2 потребуется, чтобы ввод был строкой. по крайней мере 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 я вызываю новый редактор, который я определил, и передаю некоторые параметры, которые я решил передать в editorOptions как объект, и это дает мне больше гибкости для добавления любых параметров, которые я хочу, шаблон , 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"} },
...];

И вуаля, работает как шарм !!! Я больше не пользуюсь editor:TextCellEditor, поскольку мой новый редактор ConditionalCellEditor дает мне гораздо больше гибкости. Надеюсь, это поможет, и дайте мне знать, как это происходит ...

Answer 2

По умолчанию вы не можете передать больше параметров в метод validator, однако вы можете легко отредактировать источник, чтобы разрешить его.

в slick.editors.js искать:

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());

до: var validationResults = args.column.validator($input.val(), $input);

это изменит вашу подпись метода валидатора на что-то вроде:

function requiredFieldValidator(value, input)

С этим вы можете получить любые атрибуты, которые вы хотите использовать, с помощью input.attr('validation-expression') или input.data... или что угодно.

Answer 3

Это было очень полезно. Я создаю различные типы ввода для каждого типа возможной записи - электронная почта, телефон, почтовый индекс и так далее. Чтобы сделать это с 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\"}

Сделайте так, чтобы ваш 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)
}