4

標準のhtml選択リストを使用してslickgridの値を編集するための最も簡単なソリューションが必要です。

ここにstackoverflowに関する多くの答えがあり、そのすべてが独自のを実装するように指示していますSelectCellEditor。ここではいくつかの例を示します。

しかし、これらの例はすべてjavascriptであるため、少し冗長です。

それで、私は自分の質問に、簡素化されたCoffeeScriptバージョンで答えるつもりです。単純な選択リストには問題なく機能し、凝ったものにしたいときに簡単に拡張できます。

4

1 に答える 1

2

CoffeeScriptのシンプルなSlickGridSelectCellEditor

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

使用法

slickgridcolumns定義を使用すると、以下に示すように、属性を使用して提供された選択アイテムのリストとともにSelectCellEditor、属性を介して適用されます。editoroptions

columns = [
    // Other slickgrid columns ...
    { 
        id      : "colour", 
        name    : "Colour", 
        field   : "Colour", 
        options : "Red,Green,Blue", 
        editor  : SelectCellEditor
    }
]
于 2013-03-16T12:52:44.690 に答える