EasyUI如何设置tree图标

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;
			}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1106.html