EasyUI自定义tree图标的两种方法
EasyUI的图标更改方法有两种，第一种是只用css即可，第二种需要绑定类名，下面有实例，其实很简单，如果实例不能用可能是因为引入的cdn链接不通，官方cdn经常抽风，记得将图标图片路径换掉哦。...
EasyUI的图标更改方法有两种，第一种是只用css即可，第二种需要绑定类名，下面有实例，其实很简单，如果实例不能用可能是因为引入的cdn链接不通，官方cdn经常抽风，记得将图标图片路径换掉哦。
完整实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<style type="text/css">
/*数据内自定义类名更改自定义图片 需要在JS内的iconCls定义哦*/
.iconCls-province {
background: url("/img/easy-tree/tree-other.png") no-repeat center center !important;
}
.iconCls-city {
background: url("/img/easy-tree/tree-charger.png") no-repeat center center !important;
}
.iconCls-station {
background: url("/img/easy-tree/tree-charginggun.png") no-repeat center center !important;
}
/*默认类名更改自定义图片*/
/* 未展开状态的图标 */
/* .tree-file{
background:url("/img/easy-tree/tree-charger.png") no-repeat center center !important;
}*/
/* 展开状态的图标 */
/* .tree-folder-open{
background:url("/img/easy-tree/tree-other.png") no-repeat center center !important;
} */
/* 最后一级，也就是无子级的图标展示 */
/* .tree-folder{
background:url("/img/easy-tree/tree-other.png") no-repeat center center !important;
} */
</style>
<ul id="tt"></ul>
<script type="text/javascript">
$(function() {
$('#tt').tree({
data: [{
text: '江苏省',
state: 'open',
iconCls: "iconCls-province",
children: [{
text: '镇江市',
state: 'open',
iconCls: "iconCls-city",
children: [{
text: '镇江六圩水上绿色综合服务区',
iconCls: "iconCls-station"
}]
}]
}]
});
})
</script>
</body>
</html>
更改后效果图：
默认效果图：
可以看到我们更改后的效果图，图标已经改变了，大家粘贴实例时记得更换图标路径，实例如果运行不起来就是引入的cdn抽风了，自己更换。
实例解析：
第一种方法，只通过css更改，直接解开以下css代码的注释即可，无需设置其他，就是将默认的图片覆盖掉，但如果想要没一级或任意一层的图标都不一样的话看第二种。
/*默认类名更改自定义图片*/
/* 未展开状态的图标 */
/* .tree-file{
background:url("/img/easy-tree/tree-charger.png") no-repeat center center !important;
}*/
/* 展开状态的图标 */
/* .tree-folder-open{
background:url("/img/easy-tree/tree-other.png") no-repeat center center !important;
} */
/* 最后一级，也就是无子级的图标展示 */
/* .tree-folder{
background:url("/img/easy-tree/tree-other.png") no-repeat center center !important;
} */
第二种方法：需要在JS内的iconCls定义类名，下面这三个类名是自己定义的，每一条都可以定义一个，请参考下demo实例的js内。
/*数据内自定义类名更改自定义图片 需要在JS内的iconCls定义哦*/
.iconCls-province {
background: url("/img/easy-tree/tree-other.png") no-repeat center center !important;
}
.iconCls-city {
background: url("/img/easy-tree/tree-charger.png") no-repeat center center !important;
}
.iconCls-station {
background: url("/img/easy-tree/tree-charginggun.png") no-repeat center center !important;
}
- 发表于 2020-08-19 15:31
- 阅读 ( 647 )
- 分类：web前端开发
