간단한 SlickGrid 드롭 다운 목록 셀 목록

Question

표준 HTML 선택 목록을 사용하여 슬릭 그리드에서 값을 편집 할 수있는 가장 간단한 솔루션을 원합니다.

여기에 stackoverflow에 대한 답변이 많이 있는데 여기에는 자신의 SelectCellEditor을 구현하라는 내용이 있습니다.

• Slickgrid, column with a drop down select list?
• SlickGrid select editor
• slickgrid custom dropdown editor

을하지만 이러한 예는 모두 자바 스크립트에 따라서 약간 장황 : 다음은 몇 가지 예입니다.

그래서 필자는 자신의 질문에 CoffeeScript 버전을 사용하여 해답을 제시하려고합니다. 그것은 단순한 선택 목록에 대해서는 잘 작동하며 당신이 좋아하기를 원할 때 확장하기 쉽습니다.

Answer 1

커피 스크립트 slickgrid columns 정의를 사용

class SelectCellEditor 
    last=undefined 
    constructor:(@args) -> 
     options = @args.column.options.split(",") 
     @select=$("<select/>") 
     .append("<option value=\"#{o}\">#{o}</option>" for o in options) 
     .appendTo(@args.container) 
     .focus() 

    loadValue: (item) -> 
     last = item[@args.column.field] 
     @select.val last 

    serializeValue : -> @select.val() 
    destroy   : -> @select.remove() 
    focus   : -> @select.focus() 
    isValueChanged : -> @select.val() isnt last 
    validate  : -> {valid: true, msg: null} 
    applyValue  : (item, state) -> item[@args.column.field] = state 

사용

의 간단한 SlickGrid SelectCellEditor에서, SelectCellEditor가 선택 항목리스트로 editor 속성을 통해인가는 options를 사용하여 제공된 다음과 같이 속성 :

columns = [ 
    // Other slickgrid columns ... 
    { 
     id  : "colour", 
     name : "Colour", 
     field : "Colour", 
     options : "Red,Green,Blue", 
     editor : SelectCellEditor 
    } 
]