easyui修改Tree树的默认图标

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>

easyui修改Tree树的默认图标

猜你喜欢