SlickGrid에서 사용자 정의 열 속성 추가하기

Question

SlickGrid의 일부 열에 사용자 정의 열 속성을 추가하고 싶습니다. 정규식을 사용하여 입력을 확인하는 사용자 지정 편집기가 있습니다. 나는 그들 각각에 대해 동일한 편집기를 사용할 수 있고 그 (것)들에게서 유일한 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(); 
}