coffeescript - 一个简单的 SlickGrid DropDown 选择列表单元编辑器

Question

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

stackoverflow 上有很多答案，所有这些都告诉您实现自己的SelectCellEditor. 这里有些例子：

• Slickgrid，带有下拉选择列表的列？
• SlickGrid 选择编辑器
• slickgrid 自定义下拉编辑器

但是这些示例都是用 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

用法

使用 slickgridcolumns定义，SelectCellEditor通过属性应用使用editor属性提供的选择项列表options，如下所示：

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