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