2011-09-06 28 views
13

Khi tôi thực hiện như saulàm thế nào để tải lại/làm mới/reinit DynaTree?

$('#tree').dynatree("option","initAjax",{url:"http://google.com"}); 

Tôi muốn dynatree quên về dữ liệu cây hiện tại và tải lại với dữ liệu mới từ url được chỉ định thay thế. Nhưng tôi thấy nó không làm điều đó theo mặc định.

Cảm ơn.

Trả lời

13

xem phương thức tree.reload(), bạn nên làm gì sau đó.

thấy các tài liệu ở đây: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

như trong các tài liệu, cây là các bản vẽ nội bộ của cây, và bạn nhận được nó bằng cách gọi lệnh getTree: $("#node").dynatree("getTree")

+0

"cây" ở đây là gì và làm cách nào tôi có thể truy cập vào nó ?? –

+0

bạn có ở đó không ?? –

+0

Tôi đã thêm bản chỉnh sửa để rõ ràng hơn. – longstaff

5

Chức năng khởi tạo:

function InitTree() { 
    $("#tree3").dynatree({ 
     (...init params...) 
    }); 
} 

InitTree(); 

Để tải lại dữ liệu, hãy gọi:

$("#tree3").dynatree("destroy"); 
InitTree(); 
8

tree.reload(); là cho dữ liệu được tải động như trong Ajax. Nếu bạn đang làm việc với danh sách ul/li và cần phải tải lại cây, bạn phải làm: $("#tree").dynatree("destroy");trước mã tạo dynatree thông thường của bạn. Thông số hủy không được ghi lại (xem http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

+0

Thông tin rất hữu ích. Cảm ơn! – DavidB

5

Câu hỏi này là một bản sao của Trying to reload/refresh dynatree with new data

Giải pháp của tôi không đòi hỏi đường vòng như empty()destroy() vv Hãy suy nghĩ về điều này: Khi Dynatree được tạo ra bạn chỉ định một từ điển các thiết lập nó phải sử dụng. Tuy nhiên vì đây là từ điển cấu hình, nó sẽ không được đánh giá lại mặc dù một số tham số là biến và thay đổi do nhấp chuột, v.v. Vì vậy, để giải quyết điều này và tránh các hoạt động tốn kém như xóa DOM và tạo lại nó, chúng tôi làm theo cách tôi nghĩ phát triển Dynatree đã có ý định này (nhưng không được minh chứng rất rõ ràng trong ví dụ 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(); 
    }); 

dụ này thiết lập cấu hình trên #tree mỗi khi nút được nhấn vào, sau đó tải lại cây.

+1

Chỉ liên kết câu trả lời không được chào đón trong SO – hims056

+4

Cảm ơn sự giáo dục. Tôi đã chỉnh sửa câu trả lời của mình để bao gồm câu trả lời đầy đủ. – user1737092

0
n= "#tree"; 
$(n).dynatree({}); 
tree = $(n).dynatree("getTree"); 
root = tree.getRoot(); 
tree.enableUpdate(false); 
root.removeChildren(); 
tree.enableUpdate(true); 
1

Ban đầu, tôi đã sử dụng "tùy chọn" với initAjax để thực hiện cuộc gọi ajax. Tuy nhiên, kể từ khi tôi đã phải hiển thị một thông báo lỗi trong trường hợp có một phản ứng trống từ máy chủ sau khi tải lại, tôi quyết định đi theo tuyến đường ajax thông thường. Tôi thực hiện cuộc gọi ajax, nhận phản hồi và sau đó tải lại cây. Vì vậy, tôi đã làm nó như thế này trong tập tin javascript tôi

var myObj = {getDynaTree :function(){ 

    //Refresh the dynatree 
    $("#dynaTree").dynatree("option", "children", null); 
    $.ajax({ 
     url: "myurl", 
     type: "POST", 
     dataType: "application/json", 
     headers:{'Accept' :'application/json', 'Content-Type':  'application/json' }, 
     data : JSON.stringify(myData), 
     //handle the response 
     complete : function(treeData) 
      { 

      $("#dynaTree").dynatree("option", "generateIds", true);  

      var parsedTreeData = JSON.parse(treeData.responseText); 

      if(parsedTreeData.length ==0) { 
       var parsedTreeData = [{title: "No documents found for the search criteria, please revisit the criteria", 
        isFolder: false, tooltip: "No documents found for the search criteria, please revisit the criteria" }]; 

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

      } 
     }); 

    }} 

gọi hàm

$("#myLink").click(function() { myObj.getDynaTree(); } 

Các dynatree được khởi tạo trong một riêng biệt javascript tập tin

//Initialization for the dyna tree. 
    var treeData = [{title: "Dynamic Tree Demo",isFolder: false, tooltip: "Here, is your Dynamic Tree!" }]; 

    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; 
     }, 

     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; 
      } 
     } 


    }); 
} 
2

Nếu bạn muốn Reload Dynatree Có nghĩa là đầu tiên Hủy bỏ nút Bởi ông dưới đây mã

$ ("# cây"). dynatree ("getRoot"). removeChildren();

+0

Cảm ơn bạn đã chờ đợi nó –

+0

niềm vui của tôi .... –

Các vấn đề liên quan