The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 1 more by this user. Created: 11/17/10
Last CDN Push: 12/1/10
Build Tag: gallery-2010.12.01-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0 PR1
Free for use.
TreeView:
Add the ""loadOnDemand: true"" when creating a tree to request a tree to be loaded on demand.
TreeViewDataSource:
Since it extends "datasource" and "datasource-jsonschema", it inherits all the properties from those two components. In addition you can specify these properties:
myTreeview.plug(Y.Plugin.TreeviewDatasource,{
source : "getNodes.php",
sourceMethod : "io",
dataSchemaJSON : {
resultListLocator : "ResultSet.Result"
}
});
3. Fire the request:
myTreeview.ds.fire("sendRequest",{data: "Optional data goes here, like for example the node that's been clicked"})
Besides all the [http://developer.yahoo.com/yui/3/datasource/ Datasource] events, you can also subscribe/fire to this events:
In this example, we will load/render all the tree's leafs as the user click on the tree nodes. The PHP script that sits on the server looks like this:
<?php
echo '{
"ResultSet" : {
"Result" : [
{"label": "level1-1"},
{"label": "level1-2"},
{
"type" : "TreeView",
"loadOnDemand" : true,
"label" : "Another tree"
}
]
}
}';
?>
<script src="http://yui.yahooapis.com/3.3.0 PR1/build/yui/yui-min.js"></script>
<ul class='tree' id="mytree">
<li>
<a href="#">label 1-1</a>
<ul>
</ul>
</li>
<li>
<a href="#">label 1-2</a>
<ul>
</ul>
</li>
<li>
<a href="#">label 1-1</a>
<ul>
</ul>
</li>
</ul>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-yui3treeview-datasource', function(Y) {
var treeview = new Y.TreeView({
srcNode: '#mytree',
contentBox: '#mytree',
boundingBox: '#mytree',
type : "TreeView"
});
treeview.plug(Y.Plugin.TreeviewDatasource,{
source : "getTree.php",
sourceMethod : "io",
loadingMsg : "<span>Loading</span>",
dataSchemaJSON : {
resultListLocator : "ResultSet.Result"
}
});
treeview.render();
treeview.on("treeview:click", Y.bind(function (e) {
if (!e.target.isRoot()) {
e.stopPropagation();
treeview.ds.fire("sendRequest",{node:e.target});
}
}),this);
});
Subject | Author | Date |
---|---|---|
Treeview notes | Gonzalo Cordero | 11/30/10 |
Re: Treeview notes | Satyam | 12/1/10 |
Re: Treeview notes | Gonzalo Cordero | 12/2/10 |
Re: Treeview notes | Satyam | 12/2/10 |
Re: Treeview notes | John Coady | 12/4/10 |
Re: Treeview notes | Gonzalo Cordero | 12/8/10 |
Re: Treeview notes | Stjepan Rajko | 12/23/10 |
Re: Treeview notes | Gonzalo Cordero | 12/23/10 |
TreeView type property | Donald Fincher | 12/27/10 |
Re: Treeview notes | Stjepan Rajko | 12/27/10 |
All code on this site is licensed under the BSD License unless stated otherwise.