easyui修改Tree树的默认图标

最新推荐文章于 2021-09-10 18:58:44 发布

缘如风

最新推荐文章于 2021-09-10 18:58:44 发布

阅读量9.2k

点赞数 2

分类专栏： EasyUI框架文章标签： easyui tree

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/82786595

版权

EasyUI框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

easyui是一种基于jQuery的用户界面插件集合。官网http://www.jeasyui.net/。

默认树形控件样式如下：

并不是所有的图标样式都是这样，所有就要自定义一些自己的图标。

本文主要利用css修改了默认的图标。也可以采用其他方式（去掉class,采用自定义的class样式）

下面是修改后的样式：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
			<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
	<style>
		/*重点代码*/
		/*默认*/
		.tree-icon{
			background:url('./img/m1.png') no-repeat center center !important;
		}
		/*折叠时图片*/
		.tree-folder{
			background:url('./img/check.png') no-repeat center center !important;
		} 
		/*展开时图片*/
		.tree-folder-open
		{
			background:url('./img/add2.png') no-repeat center center !important;
		}
	</style>
	</head>
	<body>
		<h2>Tree Actions</h2>
	<p>Click the buttons below to perform actions.</p>
	<div style="margin:20px 0;">
		<a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
		<a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
		<a href="#" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
		<a href="#" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
	</div>
	<div class="easyui-panel" style="padding:5px">
		<ul id="tt" class="easyui-tree" data-options="method:'get',animate:true,
			onLoadSuccess: changeIco ">
			 <li>
                <span>My Documents</span>
                <ul>
                <li>
                    <span>Program Files</span>
                    <ul>
                        <li>
                            <span>JAVA</span>
                        </li>
                        <li>
                            <span>C++</span>
                        </li>
                    </ul>
                </li>
            </ul>
           </li>
           <li data-options="state:'closed'">
                <span>Microsoft Office</span>
                <ul>
                <li>
                    <span>Word</span>
                 </li>
               </ul>
           </li>  
           <li>
                <span>Other</span>
           </li>  

		</ul>
	</div>
	<script type="text/javascript">
		

	function changeIco()
	{
		// 找到 #treeBox 树形 id， 再移除图标
//		$('#tt').find("span.tree-icon").removeClass('tree-icon tree-folder tree-folder-open');
//  	$('#tt').find("span.tree-hit").removeClass('tree-expanded');
//  	var icons3 = $('#tt').find("span.tree-file").removeClass('tree-file');
	}
			
		
		function collapseAll(){
			$('#tt').tree('collapseAll');
		}
		function expandAll(){
			$('#tt').tree('expandAll');
		}
		function expandTo(){
			var node = $('#tt').tree('find',113);
			$('#tt').tree('expandTo', node.target).tree('select', node.target);
		}
		function getSelected(){
			var node = $('#tt').tree('getSelected');
			if (node){
				var s = node.text;
				if (node.attributes){
					s += ","+node.attributes.p1+","+node.attributes.p2;
				}
				alert(s);
			}
		}
	</script>

		
	</body>
</html>

利用 iconCls 属性直接在数据中修改

样式

</style>

、、、、、、、、、、、、、、、、、

let data = [{
       "id":16,
       "text":"Actions",
       "children":[{
           "text":"Add",
           "iconCls":"icon-dev"
       }]

]

   $('#tt').tree({
       data: data,
   });

缘如风

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
easyui修改Tree树的默认图标

easyui是一种基于jQuery的用户界面插件集合。官网http://www.jeasyui.net/。默认树形控件样式如下：并不是所有的图标样式都是这样，所有就要自定义一些自己的图标。本文主要利用css修改了默认的图标。也可以采用其他方式（去掉class,采用自定义的class样式）下面是修改后的样式：代码如下：<!DOCTYPE html>&l...
复制链接

扫一扫