easyui的combobox的个人扩展

最新推荐文章于 2019-10-16 09:41:14 发布

原创最新推荐文章于 2019-10-16 09:41:14 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #combobox #js #web

jQuery easyui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 EasyUI 的 combobox 控件实现多选功能，并通过自定义 CSS 样式来增强用户体验。包括设置控件的基本属性、添加清空选项的图标功能以及自定义显示样式。

 $('#xxxx').combobox({  
        multiple:true, //是否支持多选(默认是false)
        prompt:'全部', //未选择时文本框内的提示信息
        panelHeight:'auto', 
        //选择框的高度(一般是有个固定的高度，设置该属性的时候高度就会自适应)
        url:'xxxxx',   
        valueField:'value', //值
        textField:'text', //显示的文本
        editable:false,//是否支持编辑
        hasDownArrow : false, //是否有下拉的按钮及样式
        icons : [{    //图标的功能扩展
            iconCls : 'icon-clear', //我现在用的是清空选项的图标
            handler : function(e){ //图标的点击事件
                var eleId = e.handleObj.data.target.id;
                $('#'+eleId).combobox("clear");
            }
        }],
        formatter: function(row){ //显示样式自定义
            var s = '<span class=\'identifySpan\'>' + row.text+ '</span>'; 
            return s;
        }
      });

css样式自定义
========================================
span.identifySpan{
    line-height:14px;
    height:14px;
    width:90%;
    padding-left: 16px;
    display:inline-block;
    background: url("../../checkbox_unchecked_14px.png") no-repeat center; /* 图片的路径 */
    cursor: pointer;
    background-position:left;

}
.combobox-item-selected span.identifySpan{
    background: url("../../checkbox_checked_14px.png") no-repeat center;
    cursor: pointer;
    background-position:left;
}