jsTree節點展開/摺疊

今天早上我遇到了優秀的jstree jQuery UI插件。總而言之 - 太好了！它很容易使用，易於風格&做它在盒子上說。我還沒有弄清楚的一件事是 - 在我的應用程序中，我想確保在任何給定時間只有一個節點被擴展。即，當用戶點擊+按鈕並展開節點時，任何先前展開的節點應該靜靜地摺疊。我需要這樣做，部分原因是爲了防止容器div在相當長的樹形視圖上產生溢出的醜陋滾動條，並且避免爲用戶選擇「過載」。jsTree節點展開/摺疊

我想有這樣做的一些方法，但好的，但簡潔的jstree文檔並沒有幫助我確定正確的方式來做到這一點。我非常感謝任何幫助。

來源

2012-08-23 DroidOS

jsTree很棒，但它的文檔相當密集。我最終弄明白了，所以這裏是任何人跑到這個線程的解決方案。

首先，您需要將open_node事件綁定到相關樹。東西沿線

$("tree").jstree({"themes":objTheme,"plugins":arrPlugins,"core":objCore}). 
bind("open_node.jstree",function(event,data){closeOld(data)});

即您配置treeview實例，然後綁定open_node事件。在這裏，我調用closeOld函數來完成我需要的工作 - 關閉任何可能打開的其他節點。功能如下

function closeOld(data) 
{ 
    var nn = data.rslt.obj; 
    var thisLvl = nn; 
    var levels = new Array(); 
    var iex = 0; 
    while (-1 != thisLvl) 
    { 
     levels.push(thisLvl); 
     thisLvl = data.inst._get_parent(thisLvl); 
     iex++; 
    } 

    if (0 < ignoreExp) 
    { 
     ignoreExp--; 
     return; 
    } 

    $("#divElements").jstree("close_all"); 
    ignoreExp = iex; 
    var len = levels.length - 1; 
    for (var i=len;i >=0;i--) $('#divElements').jstree('open_node',levels[i]); 
}

這將正確處理所有其他節點的摺疊，而不管剛剛擴展的節點的嵌套級別。

的步驟簡要說明參與

首先，我們退一步了樹形視圖，直到我們達到一個頂級節點（-1 jstree說吧）確保我們在錄製過程中遇到的所有祖先節點在陣列水平
接下來，我們摺疊所有在TreeView
我們現在要重新展開所有nodees在水平陣列的節點。雖然這樣做，我們不希望此代碼再次執行。爲了阻止這種情況發生，我們設置全局ignoreEx變量節點的數量水平
最後，我們在水平通過節點步驟，擴大它們中的每一個

來源

2012-08-28 12:33:09 DroidOS

以上答案會一次又一次地構造樹。下面的代碼將打開已打開的節點並摺疊，並且不再構造樹。

.bind("open_node.jstree",function(event,data){ 
     closeOld(data); 
     });

和closeOld功能包含：

function closeOld(data) 
{ 
    if($.inArray(data.node.id, myArray)==-1){ 
      myArray.push(data.node.id); 
      if(myArray.length!=1){ 
       var arr =data.node.id+","+data.node.parents; 
       var res = arr.split(","); 
       var parentArray = new Array(); 
       var len = myArray.length-1; 
       for (i = 0; i < res.length; i++) { 
        parentArray.push(res[i]); 
       } 
       for (var i=len;i >=0;i--){ 
        var index = $.inArray(myArray[i], parentArray); 
       if(index==-1){ 
        if(data.node.id!=myArray[i]){ 
        $('#jstree').jstree('close_node',myArray[i]); 
         delete myArray[i]; 
        } 
       } 
       } 
     } 
    }

來源

2015-04-03 12:28:09

另一個用於jstree 3.3.2例子。它使用underscore lib，隨時適應jquery或vanillla js的解決方案。

$(function() { 
    var tree = $('#tree'); 
    tree.on('before_open.jstree', function (e, data) { 
     var remained_ids = _.union(data.node.id, data.node.parents); 
     var $tree = $(this); 
     _.each(
       $tree 
        .jstree() 
        .get_json($tree, {flat: true}), 
       function (n) { 
        if (
         n.state.opened && 
         _.indexOf(remained_ids, n.id) == -1 
        ) { 
         grid.jstree('close_node', n.id); 
        } 
       } 
     ); 
    }); 
    tree.jstree(); 
});

來源

2016-10-20 03:02:44 userlond

我實現了僅通過使用事件「before_open」並關閉所有節點，我的樹剛一個平壽，不知道如果多數民衆贊成你所需要的。

$('#dtree').on('before_open.jstree', function(e, data){ 
    $("#dtree").jstree("close_all"); 
});

來源

2018-02-28 19:52:16

jsTree節點展開/摺疊

回答

相關問題