Question

我想要使用标准html选择列表在slickgrid中编辑值的最简单的解决方案。

stackoverflow上有很多答案，所有这些都告诉你实现自己的SelectCellEditor。以下是一些例子：

但这些例子都是javascript，因此有点冗长。

所以我将用一个精简的CoffeeScript版本回答我自己的问题。它适用于简单的选择列表，并且当您想要获得想象时很容易扩展。

Answer 1

CoffeeScript中的简单SlickGrid SelectCellEditor

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 columns定义，SelectCellEditor通过editor属性应用options属性提供的选项列表，如下所示：< / p>

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

一个简单的SlickGrid DropDown选择列表celleditor

1 个答案: