展开/折叠jQuery treetable

时间:2017-08-17 08:32:49

标签: javascript jquery accordion treetable

我正在使用来自jQuery的treetable库,我正在尝试做类似手风琴的行为,这样当我打开其中一个级别并扩展时,我想要折叠之前打开的另一个级别。我不知道如何使用jQuery treetable库实现此行为。

这是我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);
}

提前致谢!

1 个答案:

答案 0 :(得分:0)

您可以尝试以下方法:

  1. 最初折叠Treegrid表中的所有行。

  2. 然后,在“ onExpand”功能中,检查前一个节点是否已扩展。如果展开,则折叠该节点。 (注意:我之前的ID已存储在此处的temp变量中。)

现在,它可以像正常的“折叠和手风琴”一样正常工作

$(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");
        }**
    });
});