YUI3 中tree的两种实现

我是在网上找的压缩包，很难下载，我上传附件了，大家可以自行下载，其中树的实现有两种方法：

第一种tree是完全用YUI3 的JS脚本库写出来的，tree节点是写死的，具体代码如下：


<div style="margin: 20px; float: left; clear: both;">
<h3>Simple tree from config</h3>
<div id="cattree1" style="min-width:350px; min-height:200px; padding-right: 20px; padding-bottom: 20px; border: 1px solid gray;"></div>
<p id="clickme1" style="cursor:pointer; margin-bottom:10px;">Click me to add node</p>
<p id="unclickme1" style="display:none; cursor:pointer; margin-bottom:10px;">Click me to remove node</p>
<ul id="report1"></ul>
</div>

<script>
YUI().use("gallery-yui3treeview-ng", function(Y) {
var treeview = new Y.TreeView({
startCollapsed: true,
children: [ {
label: "Root",
children: [
{
label : "sub 1",
children : [
{ label: "sub 1-1"},
{ label: "sub 1-2"},
]
},
{
label : "sub 2",
children : [
{ label: "sub 2-1"},
{
label: "sub 2-2",
children: [
{ label: "sub 2-2-1" },
{ label: "sub 2-2-2" }
]
},
]
}
]
}]
});
treeview.render("#cattree1");

var r = Y.one("#report1");
treeview.on("nodeclick", function(e) {
var node = e.treenode;
r.setContent("");
r.appendChild("<li>You clicked " + (node.get("isLeaf") ? "leaf" : "node") + " " + node.get("label"));
r.appendChild("<li>Path to root is: " + node.path().join(" > "));
r.appendChild("<li>State is: " + (node.get("collapsed") ? "collapsed" : "expanded") );
});

Y.one("#clickme1").once("click", function (e) {
treeview.add({
label: "foster-child"
})
e.target.remove(true);
Y.one("#unclickme1").setStyle("display", "block");
});
Y.one("#unclickme1").once("click", function (e) {
treeview.remove(1);
e.target.remove(true);
});
});
</script>



第二种tree 是用ul li标签写在页面中的，具体树的展开收缩功能是用YUI3的JS库控制的，代码如下：
<!-- Tree from markup -->
<div style="margin: 20px; float: left; clear: both;">
<h3>Simple tree from markup</h3>
<div id="cattree2" style="min-width:350px; min-height:200px; padding-right: 20px; padding-bottom: 20px; border: 1px solid gray;">
<ul>
<li><a><span>Root</span></a>
<ul>
<li><a><span>sub 1</span></a>
<ul>
<li><a><span>sub 1-1</span></a></li>
<li><a><span>sub 1-2</span></a></li>
</ul>
</li>
<li><a><span>sub 2</span></a>
<ul>
<li><a><span>sub 2-1</span></a></li>
<li><a><span>sub 2-2</span></a>
<ul>
<li><a><span>sub 2-2-1</span></a></li>
<li><a><span>sub 2-2-2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<p id="clickme2" style="cursor:pointer">Click me to render tree above!<br><br></p>
<div>

<script>
YUI().use("gallery-yui3treeview-ng", function(Y) {
Y.one("#clickme2").once("click", function(e) {
var treeview = new Y.TreeView({
startCollapsed: false,
srcNode: "#cattree2 > ul" // Its important to set srcNode as a <ul> of the main widget container
});
treeview.render();
e.target.remove(true);
});
});
</script>

评论

1 楼 boiaprogramfan0420 2013-09-06  

alloyUI是有treeView的实现的，不用YUI扩展