JS Tree

jsTree is a jQuery plugin that provides interactive trees that are helpful when displaying large or complex sets of data like clients, divisions, locations, etc...
It also supports many additional plugins such as drag-and-drop, fuzzy search, keyboard navigation, tri-state checkboxes, inline edit/create/delete and customizable node types.

jsTree With Checkboxes

(Documentation)

HTML

    <p> 
        <div id="treeHolder"></div>
    </p>

    
    var jsonData=[
        {id: "client400", parent: "#", state: {disabled: false, opened: false, selected: false}, text: "bSwift Parent"},
        {id: "client405", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 1"},
        {id: "client406", parent: "client405", state: {disabled: false, opened: false, selected: false}, text: "bSwift Grandchild 1"},
        {id: "client407", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 2"}
    ];

    var treeConfig = {
        plugins: ['checkbox', 'types'],
        core: {
            'data': jsonData
        },
        checkbox: {"keep_selected_style": false}
    }
    $("#treeHolder").jstree(treeConfig);

jsTree Dropdown With Search

(Documentation - Search API)

To try out this search functionality, try typing "grand" into the search bar.

HTML

    <div class="tree-container">
        <input type="text" id="treeHolder2Input" class="medium tree-dropdown-input tooltip-target-bottom-left" placeholder="Search Client"/>
        <div class="tooltip">
            <div id="expandCollapseButtons">
                <div class="icon-sprite exp-all col six">Expand All</div>
                <div class="icon-sprite coll-all col six">Collapse All</div>
            </div>
            <div id="treeHolder2">
            </div>
        </div>
        <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s tree-dropdown"></span>
    </div>

    
    var jsonData=[
        {id: "client400", parent: "#", state: {disabled: false, opened: false, selected: false}, text: "bSwift Parent"},
        {id: "client405", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 1"},
        {id: "client406", parent: "client405", state: {disabled: false, opened: false, selected: false}, text: "bSwift Grandchild 1"},
        {id: "client407", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 2"}
    ];

    var treeConfig2 = {
        plugins: ['checkbox', 'search', 'types'],
        core: {
            'data': jsonData
        },
        checkbox: {"keep_selected_style": false}
    }
    $("#treeHolder2").jstree(treeConfig2);

    setupTreeSearch("#treeHolder2Input", "#treeHolder2");
    setupTreeDropdownEvents($("#treeHolder2Input"), $("#treeHolder2"), $(".tree-container"), true);

jsTree Inline With Search

(Documentation - Search API)

To try out this search functionality, try typing "grand" into the search bar.

HTML

    <p> 
        <input type="text" id="treeHolder2Input" class="small" placeholder="Search Client"/>
        <div id="treeHolder2"></div>
    </p>

    
    var jsonData=[
        {id: "client400", parent: "#", state: {disabled: false, opened: false, selected: false}, text: "bSwift Parent"},
        {id: "client405", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 1"},
        {id: "client406", parent: "client405", state: {disabled: false, opened: false, selected: false}, text: "bSwift Grandchild 1"},
        {id: "client407", parent: "client400", state: {disabled: false, opened: false, selected: false}, text: "bSwift Child 2"}
    ];

    var treeConfig3 = {
        plugins: ['checkbox', 'search', 'types'],
        core: {
            'data': jsonData
        },
        checkbox: {"keep_selected_style": false}
    }
    $("#treeHolder3").jstree(treeConfig3);

    setupTreeSearch("#treeHolder3Input", "#treeHolder3")