jQuery easyui datagrid扩展之颜色条

引用资源（基于colorpicker插件）

    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>

datagrid扩展

 $.extend($.fn.datagrid.defaults.editors, {
            colorpicker : {
                // colorpicker就是你要自定义editor的名称
                init : function(container, options) {
                    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) {
                            /*input.css('backgroundColor', '#' + hex);
                            input.val('#' + hex);*/
                            console.log(rgb.toString());
                            abc=rgb;
                            input.css('backgroundColor', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');
                             input.val('rgb('+rgb.r+','+rgb.g+','+rgb.b+')');
                        }
                    });
                    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);
                    }
                }
            }
        });

columns引用

 {field:'listprice',title:'List Price',width:80,align:'right',
                        editor:
                            {type: 'colorpicker',options:{precision:1}}},

界面（*因为一般浏览器不支持本地文件加载，测试暂用火狐）


插件下载地址 http://www.jq22.com/jquery-info41