版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chyuanrufeng/article/details/82786595
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>