Добавление настраиваемого свойства столбца в SlickGrid

Question

Я хочу добавить собственное свойство столбца в некоторые мои столбцы в SlickGrid. У меня есть настраиваемый редактор, который использует regex для проверки ввода. Я хотел бы добавить свойство оператора regex в мои столбцы, чтобы я мог использовать один и тот же редактор для каждого из них и просто захватить в нем уникальный оператор regex. я хочу что-то подобное для колонок:

var columns = [{ id: "id", name: "#", field: "id", cssClass: "cell-title", resizeable: true, sortable: true }, 
      { id: "upc", name: "UPC", field: "upc", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^[a-zA-Z0-9 ]{0,20}$/ }, 
      { id: "price", name: "Price", field: "price", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^\d*\.?\d{0,3}$/ }]; 

Тогда, если я мог бы сделать что-то подобное в моей функции валидации:

function regexValidationEditor(args) { 
    var $value; 
    var inputBox = "<INPUT class='customInput' type=text />"; 
    var scope = this; 

    this.init = function() { 
     $value = $(inputBox) 
     .appendTo(args.container); 

     scope.focus(); 
    }; 

    this.validate = function() { 
     if (!args.column.regex.test($value.val())) { 
      return { valid: false, msg: "Invalid Data Entry" }; 
     } 
     return { valid: true, msg: null }; 
    }; 

    this.init(); 
} 

Очевидно, что это не работает, но это по линии того, что я хочу делать.

Answer 1

Информация о столбце поступает точно так же, как вы ее определяете, таким образом, пользовательское свойство будет там. Поставьте все необходимое editor functions, и валидация будет работать.

Fiddle

function Editor(args) { 
    var $input, defaultValue; 
    var scope = this; 

    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.validate = function() { 
    if (!args.column.regex.test($input.val())) { 

     return { 
      valid: false, 
      msg: "Invalid Data Entry" 
     }; 
    } 
    return { 
     valid: true, 
     msg: null 
    }; 
    }; 

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

    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.isValueChanged = function() { 
    return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
}; 

scope.init(); 
}