2012-05-09 39 views
4

我已經看過這個question了,我已經嘗試瞭解決方案(使用tree.reload()),但它不適用於我。我有一個使用initAjax()在doc上初始化的樹,並且我試圖使用不同的值重新加載樹,以改變選擇輸入。基本上這樣的:試圖用新數據重新加載/刷新dynatree

$(document).ready(function(){ 
    // global variables 
    var myVal = 'initial value'; 

    // initialize tree 
    $('#tree').dynatree({ 
     persist: false, 
     initAjax: { 
      url: 'getMyStuff.cfc', 
      data: { myParam: myVal } 
     }, 
     ... more params 
    )}; 

    // select change handler 
    $('#mySelect).change(function(){ 
     var tree = $('#tree').dynatree('getTree'); 
     myVal = $(this).find('option:selected').val(); 
     tree.reload();   
    )}; 
)}; 

的問題是,這棵樹不斷得到使用相同的參數重新加載...我可以在那個被髮送的參數是相同的每次控制檯的網絡選項卡上看到,即使我已經證實,我正在瞄準正確的元素,並且正在爲變化獲得正確的價值。

我試圖改變的變量的範圍,我試圖放置dynatree選項在一個單獨的變量,我試圖調用

$('#tree').children().remove(); 
$('#tree').dynatree(treeoptions); 

的變化()函數中,我試圖調用tree.initialize()(是的,我知道它是一個構造函數),我試過tree.redraw(),我已經嘗試在調用reload()之前單獨設置initAjax選項,並且卡住了。

任何想法?

在這一點上,我決定要做的唯一事情就是把樹初始化放入一個函數中,當改變select選項時,吹掉樹(包括它的父div)並重建它。如果確實沒有其他方法可以用新數據重建樹,這與我與其他小部件的經驗背道而馳,我會感到驚訝。

回答

7

我在dynatree谷歌組上找到了這個。這個對我有用。

$('.tree').dynatree('destroy'); 
$('.tree').empty(); 

這是original link

+0

您可能沒有一棵樹類的dynatree DIV所以最好由ID $(「#樹」) – Spre3

10

這個問題就是一個重複:) how to reload/refresh/reinit DynaTree?

我的解決方案並不需要像空的彎路()和destroy(等想一想: 當Dynatree創建您指定的設置字典它必須使用。 但是,由於這是一個配置字典,即使某些參數是變量並因點擊而發生變化,它也不會被重新評估。 因此,要解決這個問題並避免昂貴的操作,如刪除DOM並重新創建它,我們會這樣做Dynatree開發商有這個打算(但AJAX/JSON例子並非如此明確記載):

//The HTML: 
     <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br> 
     <label id="mylabel"></label> 

    $("#checkbox").click(function() { 
    $("#mylabel").text($(this).is(":checked")) 
    $("#tree").dynatree("option", "initAjax", { 
      url: "myurl/myphp.php", 
      data: { 
       myparameter: $("#checkbox").is(":checked").toString() 
      } 
    }); 

    $("#tree").dynatree("getTree").reload(); 
    }); 

這個例子每次按鈕被點擊時設置的#tree配置,然後重新加載樹。

+0

豎起大拇指(Y選擇它)!你救了我的朋友。 – NullPointer

+0

這刷新整個樹,有沒有一種方法來刪除頁面刷新? – rd22

1

我想用默認JSON並初始化塊,然後點擊按鈕,我想從服務器刷新它, 這是我做的, Intially, VAR treeData = {[標題: 「動態樹演示」,isFolder:false,工具提示:「這裏是你的動態樹!」 }];

jQuery(document).ready(function() { 
    initReqActions(treeData); 
}); 

initReqActions= function(myTree){ 
    $("#dynaTree").dynatree({ 
     checkbox: false,    
     selectMode: 2, 
     // create IDs for HTML elements that are generated 
      generateIds: true, 
      cookie: { 
       expires :-1 
      },  
     children: myTree,   
     onQuerySelect: function(select, node) { 
      if(node.data.isFolder) 
       return false; 
     }, 
     onSelect: function(select, node) { 
      // Display list of selected nodes 
      var selNodes = node.tree.getSelectedNodes(); 
      // convert to title/key array 
      //var selKeys = $.map(selNodes, function(node){ 
      //  return "[" + node.data.key + "]: '" + node.data.title + "'"; 
      //}); 
      //$("#echoSelection4").text(selKeys.join(", ")); 
     }, 
     onClick: function(node, event) { 
      if(! node.data.isFolder) 
       node.toggleSelect(); 
     }, 
     onDblClick: function(node, event) { 
      node.toggleExpand(); 
     }, 
     onKeydown: function(node, event) { 
      if(event.which == 32) { 
       node.toggleSelect(); 
       return false; 
      } 
     } 

    }); 
} 

然後,當按鈕被點擊

 jQuery(document).ready(function() { 
     $("#RefreshButton").click(function() {   
     $("#dynaTree").dynatree("option", "initAjax", { 
      url: "refreshTree", 
      dataType: "json" 

     }); 

     $("#dynaTree").dynatree("option", "children", null);   
     $("#dynaTree").dynatree("getTree").reload(); 
    }); 

    });