easyui,实现下拉框添加图片或图标

最新推荐文章于 2024-07-24 15:04:33 发布

原创最新推荐文章于 2024-07-24 15:04:33 发布 · 929 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #easyui

本文介绍了如何在EasyUI combobox中插入图片和图标，解决HTML标签限制问题，通过示例和代码展示了实现过程，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于下拉框里面每个option里添加图标和图片这件事

这里使用的是easyui

这里使用的是easyui

https://www.jeasyui.net/plugins/758.html
有兴趣的可以看看

下拉框中添加图片这件事我刚碰到时也很烦

因为标签中是不支持/等标签的，所以是加不进去的，刚开始用文字拼接一个“√”进去，需求说不行，之后又用js的特殊符号“&#10004”，还是说不行，都差点气冒烟，没办法只能改，后就发现一种好的实现方式，就是easyui中的combobox,很好用

easyui——combobox

实现之后的样式是这样的
这里面是添加的图片

这是我自己实现的效果
在这里插入图片描述

具体实现

<div>
    <label style="width: 300px;padding-top: 6px" >easyui实现下拉框</label>
    <input id="cc" style="width:300px" value="请选择">
    </input>
</div>
<script type="application/javascript">
    var datas=
        [{
            "id":1,
            "text":"一",
            "icon":"check-off.png"
        },{
            "id":2,
            "text":"二",
            "icon":"check-on.png"
        },{
            "id":3,
            "text":"三",
            "icon":"check-off.png",
            "selected":true
        },{
            "id":4,
            "text":"四",
            "icon":"check-off.png"
        },{
            "id":5,
            "text":"五",
            "icon":"check-on.png"
        },{
            "id":6,
            "text":"六",
            "icon":"check-off.png"
        },{
            "id":7,
            "text":"七",
            "icon":"check-on.png"
        }]
    $("#cc").combobox({
        //绑定数据
        valueField: 'id',
        textField: 'text',
        //数据展示
        formatter: function(row){
            var img="../../image/"+row.icon;
            return '<img class="item-img" src="'+img+'"/><span class="item-text">'+row.text+'</span>'
        },
        //往下拉框中填充数据、可以是后端请求，也可以是上面这种形式
        loader: function(param,success,error){
            success(datas);
        },
        //添加点击事件
        onSelect: function(record){
            alert(record.id);
        }
    })
</script>