构造带清除按钮的combo

效果图：

最近在做项目遇到。combo控件选择后触发事件的情况，用onSelect发现，没法选择空item

于是就想办法解决：

第一种方案：第一行增加空字符串文本的item？试试，绑定数据源的时候，增加了一个项，text和value都是""，结果发现，下拉panel中很难看，没有撑开到一定高度（可能跟span的innerHTML为空字符串有关，于是将text该为" "），这次倒是撑开了，结果：选中之后文本框的文本变成了" "，又不好对onClick事件进行修改（easyui封装好的）

第二种方案：又看到有个onChange事件，试试这个。。。。combobox按backspace键的时候还真触发了，可是发现，文本发生改变就立即触发该事件，但是在此处我需要执行的是grid重新加载数据（从服务端加载），而且combotree的文本框无法修改内容。。又宣告失败

实在没办法，去看combo的构造函数吧……，发现combo初始化的时候是增加了一个input（显示文本的）一个span（显示下拉图标的）还有一个hidden（显示选择项的value的）

那么只需要在span前边多增加一个span即可，给新增加的span增加点击事件：

还是不能对easyui代码进行修改，那只好重新写一个方法对dom进行修改了：

jQueryClearCombo = function (Combo) {
    var combo = Combo.data().combo.combo;
    var showClear = Combo.combo("options").showClear;
    if (!showClear) {
        showClear = Combo.attr("showClear");
    }
    var clear = combo.find(".combo-clear");
    var text = combo.find(".combo-text");
    if (!clear.hasClass("combo-clear")) {
        if (showClear != "0") {
            $(text).after("<span><span class=\"combo-clear\"></span></span>");
            clear = combo.find(".combo-clear");
            var w=clear.outerWidth();
            text.width(text.width() - w);
            clear.bind("click.combo", function () {
                var v = "";
                if (Combo.hasClass("easyui-combotree")) {
                    v = Combo.combotree("getValue");
                    Combo.combotree("setValue", "");
                }
                else if (Combo.hasClass("easyui-combobox")) {
                    v = Combo.combobox("getValue");
                    Combo.combobox("setValue", "");
                }
                var onClear = Combo.combo("options").onClear;
                if (typeof (onClear) == "function") {
                    onClear(v, Combo);
                }
            }).bind("mouseenter.combo", function (a, b, c, d, e) {
                $(this).addClass("combo-clear-hover");
            }).bind("mouseleave.combo", function () {
                $(this).removeClass("combo-clear-hover");
            });
        }
    }
    else if (showClear == "0") {
        var w = clear.outerWidth()
        text.width(text.width() + w);
        combo.find("span:has(.combo-clear)").remove();
    }
}

 

调用的时候，设置showClear属性为0 则不显示清除按钮，默认情况下是带清除按钮的

{
                "onClear": function (v, e) {
                    errorMessage("点击了清除按钮,清除前值为:" + v);
                },
                "allowClick": function (node) {
                    return node.attributes.OrgType == "2";
                }
            }

如果需要监听清除按钮事件，构造combo的时候 设置一个onClear函数即可（第一个参数为删除之前的旧值，可判断旧值也为空的话，就表示值没发生改变不需要执行ajax代码；第二个为combo对象）

另外一个  combotree中，有些节点不可以单击选则，传递一个allowClick函数即可，参数为combotree所点击项的节点(node)

代码如下：

QueryComboTree = function (ComboObject, params) {
    if (params == null) {
        params = {};
    }
    var allowClick = params.allowClick, ErrorCallBack = params.onLoadError;
    var url = $(ComboObject).attr("url");
    if (url == null || url == "") {
        url = getRootAjax("HRService")
        + '?ClassName=HRService.PublicFunc&MethodName=ComboTreeJson&DictCode='
        + ComboObject.attr("Code");
    }
    if ($(ComboObject).attr("onlyClickLeaf") == "1") {
        params.allowClick = function (n) {
            return $("").tree("isLeaf", n.target);
        }
    }
    $.extend(params, {
        url: url,
        onLoadSuccess: function (response, json) {
            SuccessOperation(response, json, function () {
                jQueryClearCombo(ComboObject);
                var op = ComboObject.combotree("options")
                if (typeof (op.allowClick) == "function") {
                    var objTree = ComboObject.data().combotree.tree.data();
                    var oldClick = objTree.tree.options.onClick;
                    objTree.tree.options.onClick = function (node) {
                        if (op.allowClick(node)) {
                            oldClick(node);
                        }
                        else {
                            return;
                        }
                    }
                }
            });
        },
        onLoadError: function (response) {
            ErrorOperation(response, ErrorCallBack);
        }
    });
    ComboObject.combotree(params);
}