展开/折叠 jQuery 树表

Question

I am using the treetable library from jQuery and I am trying to do an accordion type-like behaviour, such that when I open one of the levels and it expands, I want to collapse the other level that was previously opened. I do not know how to implement this behaviour using the jQuery treetable library.

This is the code for my treetable:

function buildTreeTable(tree){

    $("#example").treetable({
        expandable:     true,
        onNodeExpand:   nodeExpand,
        onNodeCollapse: nodeCollapse
    });

function nodeExpand () {
        getNode(this.id); 
 }


function nodeCollapse () {
         console.log("Collapsed: " + this.id);
    }

function getNode(parentNode){
        id = parentNode;
        console.log("The new var is", id);
        console.log("The id of the parent is: ", parentNode);
        var parentNode = $("#example").treetable("node", parentNode);
        $("#example").treetable("unloadBranch", parentNode);
    console.log("parent node",parentNode);
}

Thanks in advance!

Answer 1

You can try this:

1. Initially collapse all the rows in Treegrid tables.

2. Then, in 'onExpand' function check whether the previous node is expanded. If it is expanded collapse that node. (Note: I have stored the previous id in temp variable here.)

Now, it works fine as a normal 'collapse & accordian'

$(document).ready(function () {
    var temp = "";
    $('.tree').treegrid({
        'expanderExpandedClass': 'glyphicon glyphicon-minus',
        'expanderCollapsedClass': 'glyphicon glyphicon-plus',
        'initialState': 'collapsed',
        **'onExpand': function () {
            if ($(document.getElementById(temp)).treegrid('isExpanded')) {
                $(document.getElementById(temp)).treegrid('collapse');
            }
            temp = $(this).attr("id");
        }**
    });
});