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

【问题标题】：A simple SlickGrid DropDown select list celleditor一个简单的 SlickGrid DropDown 选择列表单元编辑器
【发布时间】：2013-03-05 04:14:18
【问题描述】：

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

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

但是这些示例都是用 javascript 编写的，因此有点冗长。

因此，我将使用精简的 CoffeeScript 版本来回答我自己的问题。它适用于简单的选择列表，并且在您想要花哨时很容易扩展。

【问题讨论】：

我认为这实际上是一个很好的提问和回答自己问题的案例。为什么以前没有人捡起它？

标签： coffeescript slickgrid

【解决方案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 定义，通过 editor 属性应用 SelectCellEditor，并使用 options 属性提供选择项列表，如下所示：

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

【讨论】：