easyui:如何动态更改tree的节点的图标？
0
悬赏园豆：20
[已解决问题]
解决于 2014-06-20 09:41
我想让树上某些节点的图标与默认的图标不同，这是我的代码，根据tree例子改动了一下，但是无法更改图标，对easyui熟悉的同学帮忙看看。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</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="../Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tt1').tree({
animate: true,
onClick: function (node) {
//alert('you click ' + node.text);
}
});
});
function getSelected() {
var node = $('#tt1').tree('getSelected');
$('#tt1').tree('update', {
target: node.target,
text:'friend',
iconCls: 'icon-edit'
});
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTML markup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<a href="#" onclick="getSelected()">getSelected</a>
</body>
</html>
我加了text:'friend'；
树节点名称改了，说明确实更新了树，但是图标没有变化。
最佳答案
0
这么久没人回复 我来回复吧
你用Chrome的Development Tool可以发现，这个iconCls已经放进去了 但是没有显示。
我自己写了一个 tree-offline的css样式哈这个不算。
找到tree-icon的子元素然后改掉class就可以。
如下所示：
var icons = $(node.target).find("span.tree-icon");
if (icons) {
if (online) {
$(icons[0]).addClass("tree-file");
$(icons[0]).removeClass("tree-offline");
}
else {
$(icons[0]).addClass("tree-offline");
$(icons[0]).removeClass("tree-file");
}
}
P.S. 测试通过。
收获园豆：15
谢谢，看来确实是css的问题，对web前端了解的太少了
其他回答(1)
0
图标你肯定得去看css，<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>这两个引用的地方找找哪里定义了树，然后再改。。
最头疼那些个css了。。
收获园豆：5
