easyui datagridカスタムeditor実装カラーセレクタ

テキストボックスがフォーカスされると、パレットがポップアップされ、パレットの色が変化します.
パレットはjqueryのプラグインで、アドレスはhttp://www.eyecon.ro/colorpicker/です.
Editorのパッケージ:

$.extend($.fn.datagrid.defaults.editors, {

    colorpicker: {//colorpicker       editor   

        init: function (container, options) {

            // var input = $('<input class="easyuidatetimebox">').appendTo(container);

            var input = $('<input>').appendTo(container);



            input.ColorPicker({

                color: '#0000ff',

                onShow: function (colpkr) {

                    $(colpkr).fadeIn(500);

                    return false;

                },

                onHide: function (colpkr) {

                    $(colpkr).fadeOut(500);

                    return false;

                },

                onChange: function (hsb, hex, rgb) {

                    //                    $('#colorSelector div').css('backgroundColor', '#' + hex);

                    input.css('backgroundColor', '#' + hex);

                    input.val('#' + hex);

                }

            });

            return input;

        },

        getValue: function (target) {

            return $(target).val();

        },

        setValue: function (target, value) {

            $(target).val(value);

            $(target).css('backgroundColor', value);

            $(target).ColorPickerSetColor(value);

        },

        resize: function (target, width) {

            var input = $(target);

            if ($.boxModel == true) {

                input.width(width - (input.outerWidth() - input.width()));

            } else {

                input.width(width);

            }

        }

    }

});

Datagridではdiv表示色を使用し、編集時にinput textコントロールで表示します.連動して色値をinputに付与し、値が戻ったときにinputの値を読み出す.
コードダウンロード:http://download.csdn.net/detail/zbl131/5079489