easyUI重绘combobox中下拉箭头

待我称王封你为后i 2022-08-07 03:38 195阅读 0赞

下午群里一个朋友问了我一个问题，她行要重绘combobox的下拉箭头。我当时第一想法就是让她把原生的图标替换不就好了嘛。可人家又说，要单选和多选的下拉箭头图标是不一样的。一段时间没用也不知道easyUI有没有给combobox开这个口子的，于是看了看文档，发现没有。那么看样子只能看源码咯，不过combo没有源码，只有变态的“\_1,\_2”命名的版本：

if(_4.hasDownArrow){
        _6.push({iconCls:"combo-arrow",handler:function(e){ 
        _a(e.data.target);
    }});

hasDownArrow控制了是否显示下拉箭头，这里如果设置为false，那么就没有下拉箭头了，但是随之没有的也就是绑定在 下拉箭头上的事件。

好了，再接着看看，发现上面还有：

var _4=_3.options;
    // 中间有省略
    var _6=$.extend(true,[],_4.icons);

那么可以想到**\_4**就是**combobox**的**options**，而**\_6**则是**\_4**中的**icons**属性。噢？还有**icons**属性，怎么官方文档上没有看到？难道是隐藏属性吗？呵呵  
再看看最开始那段代码：

if(_4.hasDownArrow){
        _6.push({iconCls:"combo-arrow",handler:function(e){ 
        _a(e.data.target);
    }});

应该能想到icon的格式了吧，对，就是`{iconCls:"", handler:function(){}}`。而icons呢则是一个数组，这样下面就可以写了：

hasDownArrow:false,
        icons:[{
            iconCls:'icon-room-16',
            handler:function(){ 
                $(this).parent().next().click();
            }
        }],
        editable:false

其实也就是完全不使用**DownArrow**的逻辑，而自己放图标自己处理点击事件，而这里的**handler**也实现的很简单，就是模拟点击了**combobox**的非图标部分，所以这里**editable**设置为**false**是必须的。