【SlickGrid】Value,Label付きのselectセルを作る

[SlickGrid]-任意に要素を設定できるセレクトボックスEditorの作り方 - javascript超入門　解説＆サンプルプログラムjavascript超入門　解説＆サンプルプログラムのページ参考にSelectセルを作ることができたのですが、ここには単純にラベルのみのボックスとなっていたので、Value付きのボックスを作ってみました。

動作はJSFiddleからご覧ください。

#コード
ライブラリのインポートなどは省略します。

##Editor, Formatterの定義

extends.js

(function ($) {
    $.extend(true, window, {
        "Extends": {
            "Editors": {
                "Select": SelectEditor
            },
            "Formatters": {
                "Select": SelectFormatter
            }
        }
    });

    function SelectEditor(args) {
        var $select;
        var defaultValue;
        var scope = this;

        this.init = function () {
            var option_str = "";
            for( key in args.column.options ){
                option_str += "<OPTION value='" + key +"'>" + args.column.options[key] + "</OPTION>";
            }
            $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
            $select.appendTo(args.container);
            $select.focus();
        };

        this.destroy = function () {
            $select.remove();
        };

        this.focus = function () {
            $select.focus();
        };

        this.loadValue = function (item) {
            defaultValue = item[args.column.field];
            $select.val(defaultValue);
        };

        this.serializeValue = function () {
            return $select.val();
        };

        this.applyValue = function (item, state) {
            item[args.column.field] = state;
        };

        this.isValueChanged = function () {
            return ($select.val() != defaultValue);
        };

        this.validate = function () {
            return {
                valid: true,
                msg: null
            };
        };

        this.init();
    }

    function SelectFormatter(row, cell, value, columnDef, dataContext) {
        return columnDef.options[value];
    }

})(jQuery);

###Editor
Editorに関しては先のリンクとほぼ同じです。
変更点はSelectEditor>this.init()

this.init = function () {
    var option_str = "";
    for( key in args.column.options ){ 
        option_str += "<OPTION value='" + key +"'>" + args.column.options[key] + "</OPTION>";
    }
    $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
    $select.appendTo(args.container);
    $select.focus();
};

の中でfor文をkeyでとった後、value=key、label=options[key]とするところです。

###Formatter
Editorだけだとblur時に表示される値がkeyになってしまいますので、labelを表示するFormatterも定義しなくてはいけません。
これはcolumnDef.options[value]で簡単に取れますので、そのまま返してあげます。

#使用法

var grid;
var data = [];
var my_options = {
  "a": "AAA",
  "b": "BBB",
  "c": "CCC"
};
var columns = [{
  id: "select",
  name: "Select",
  field: "select",
  formatter: Extends.Formatters.Select,
  editor: Extends.Editors.Select,
  options: my_options
}];
var options = {
  editable: true
};
$(function() {
  data[0] = {
    select: "a"
  };
  data[1] = {
    select: "b"
  };
  data[2] = {
    select: "c"
  };

  grid = new Slick.Grid("#myGrid", data, columns, options);

});

実際に使用するValueとLabelの組をオブジェクト(ここでは変数my_options)に格納します。
そしたらcolumnsの必要なところにformatter, editor, optionsを設定します。
dataにはValueで値を指定します。