Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

TreeView (gallery-yui3treeview-ng) on cdn

Last Updated: 09/2/12

+ 0 -

Zaar Hai

YUI Contributor

See 1 more by this user.

Created: 08/25/12
Last CDN Push: 08/29/12
Build Tag: gallery-2012.08.29-20-10
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.0pr1
Free for use.

This module provides complete TreeView implementation that includes:

TreeView
CheckBox TreeView
datasource plugin for on-demand loading
Ability to render from markup
Sam skin
Full set on tree events
Keyboard navigation support
100% Pure YUI3

Inspired by original treeview module made by Gonzalo Cordero and excellent comments by Satyam.

Code Sample

<script src="http://yui.yahooapis.com/3.7.0pr1/build/yui/yui-min.js"></script>

<div id="#cattree1"></div>
<div id="#report1"></div>
<div id="#report2"></div>
<script>
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.29-20-10'
}).use("gallery-yui3treeview-ng", function(Y) {
    var treeview = new Y.CheckBoxTreeView({
            startCollapsed: true,
            toggleOnLabelClick: false,
            children: [ {
                label: "Root",
                checked: "halfchecked",
                children: [ 
                    {
                        label : "sub 1",
                        checked: "checked",
                        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 r1 = Y.one("#report1"),
        r2 = Y.one("#report2");
 
    treeview.on("nodeclick", function(e) {
        var node = e.treenode;
        r1.setContent("");
        r1.appendChild("<li>You clicked " + (node.get("isLeaf") ? "leaf" : "node") + ": " + node.get("label"));
        r1.appendChild("<li>Path to root is: " + node.path().join(" > "));
        r1.appendChild("<li>State is: " + (node.get("collapsed") ? "collapsed" : "expanded") );
    });
 
    treeview.after("check", function(e) {
        var node = e.treenode,
            checked_roots = "",
            checked_paths = "";
 
        r2.setContent("");
        r2.appendChild("<li>CheckBox State is: " + {10:"unchecked", 20:"halfchecked", 30:"checked"}[node.get("checked")]);
 
        Y.Array.each(treeview.getChecked(), function (n) {
            checked_roots += "<li> " + n.get("label");
        });
        r2.appendChild("<li>Checked subroots are: <ul>" + checked_roots + "</ul>")
 
        Y.Array.each(treeview.getCheckedPaths(), function (n) {
            checked_paths += "<li> " + n.join(" > ");
        });
        r2.appendChild("<li>Pathes to checked subroots are: <ul>" + checked_paths + "</ul>")
    });
</script>

<div id="#cattree1"></div>
<div id="#report1"></div>
<div id="#report2"></div>
<script>
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.29-20-10'
}).use("gallery-yui3treeview-ng", function(Y) {
    var treeview = new Y.CheckBoxTreeView({
            startCollapsed: true,
            toggleOnLabelClick: false,
            children: [ {
                label: "Root",
                checked: "halfchecked",
                children: [ 
                    {
                        label : "sub 1",
                        checked: "checked",
                        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 r1 = Y.one("#report1"),
        r2 = Y.one("#report2");

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

treeview.after("check", function(e) {
        var node = e.treenode,
            checked_roots = "",
            checked_paths = "";

r2.setContent("");
        r2.appendChild("<li>CheckBox State is: " + {10:"unchecked", 20:"halfchecked", 30:"checked"}[node.get("checked")]);

Y.Array.each(treeview.getChecked(), function (n) {
            checked_roots += "<li> " + n.get("label");
        });
        r2.appendChild("<li>Checked subroots are: <ul>" + checked_roots + "</ul>")

Y.Array.each(treeview.getCheckedPaths(), function (n) {
            checked_paths += "<li> " + n.join(" > ");
        });
        r2.appendChild("<li>Pathes to checked subroots are: <ul>" + checked_paths + "</ul>")
    });
</script>