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

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

動作は[JSFiddle](https://jsfiddle.net/popphron/dvsfcy3c/)からご覧ください。

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

##Editor, Formatterの定義
```js: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()`

```js
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]`で簡単に取れますので、そのまま返してあげます。

#使用法
```js
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`で値を指定します。