jsTree in a nutshell

.gitingore

# /.idea
/.idea/*

README

jsTree is an excellent jQuery plugin to create tree structures.
http://www.jstree.com

In a nutshell:

-- jsTree_in_a_nutshell.js
* Basic tree creation
* How to select node
* Get selected node id
* Use double click
* Expand collapse nodes
* expand parent nodes on select
* search tree

-- jsTree_in_a_nutshell.css
* Wrap tree nodes

jsTree_in_a_nutshell.css

/* JSTREE TEXT WRAP --------------------------------------------------------- */
#tree_div_id a {
    white-space: normal !important;
    height: auto;
    padding: 1px 2px;
}

#tree_div_id li > ins {
    vertical-align: top;
}

#tree_div_id .jstree-hovered, #emr_cases_visits .jstree-clicked {
    border: 0;
}

jsTree_in_a_nutshell.js

/**
 * Created by Christos Pontikis
 * LICENSE: GNU General Public License (http://www.gnu.org/copyleft/gpl.html)
 *
 * quick and dirty guide to jsTree (http://www.jstree.com)
 *
 */


$(function() {
    // create tree - use ajax and even better JSON
    $("#tree_div_id").jstree({
        "plugins" : [ "themes", "html_data", "ui", "types" ],
        core : {
            "animation" : 500
        },
        "html_data" : {
            "ajax" : {
                "url" : "create_tree.php"
            }
        },
        themes : {
            "theme" : "classic",
            "dots" : true,
            "icons" : true
        },
        "ui" : {
            "select_limit" : 1,
            "initially_select" : [ $("#sel_node").val() ]
        },
        "types" : {
            "types" : {
                "leaf" : {
                    "icon" : {
                        "image" : "../images/tree/file.png"
                    }
                },
                "folder" : {
                    "icon" : {
                        "image" : "../images/tree/folder.png"
                    }
                },
                "root" : {
                    "icon" : {
                        "image" : "../images/tree/root.png"
                    }
                }
            }
        }
    });


    // open all on load (OPTIONAL)
    $("#tree_div_id").bind("loaded.jstree", function (event, data) {
        $("#tree_div_id").jstree("open_all");
    });

    // do something on node selected
    $("#tree_div_id").bind("select_node.jstree", function (event, data) {

        // open all unopened parents of the selected node (OPTIONAL)
        data.rslt.obj.parents('.jstree-closed').each(function () {
            data.inst.open_node(this);
        });

        var node_id = data.rslt.obj.attr("id");

        // do something
    });

    // handle doule click on node
    $("#tree_div_id").bind("dblclick.jstree", function (event, data) {

        var node = $(event.target).closest("li");
        var node_id = node[0].id; //id of the selected node

        // do something
    });


    // http://groups.google.com/group/jstree/browse_thread/thread/3354022506fe519e
    // bind to reselect INSTEAD of refresh
    $("#tree_div_id").bind("reselect.jstree", function (event, data) {
        $("#tree_div_id").jstree("select_node", $("#sel_node").val(), true);
    });


    // expand all
    $("#expand_all").click(function () {
        $("#tree_div_id").jstree("open_all");
    });


    // collapse all
    $("#collapse_all").click(function () {
        $("#tree_div_id").jstree("close_all");
        $("#tree_div_id").jstree("select_node", "#node_0", true);
    });

    // refresh (only for ajax tree)
    $("#refresh_tree").click(function () {
        $("#tree_div_id").jstree("refresh", -1);
    });

    // search
    $("#search").click(function () {
        $("#tree_div_id").jstree("search", $("#search_term").val());
    });


    $("#search_clear").click(function () {
        $("#tree_div_id").jstree("clear_search");
        $("#search_term").val("");
        $("#search_results").empty();
    });


    $("#tree_div_id").bind("search.jstree", function (event, data) {
        $("#search_results").html('<strong>' + data.rslt.nodes.length + '</strong>');
    });

});

Thanks! This was a Lifesaver!

Loved it. Thanks

can you please give some tips for context menu options?