Dojo ağacı verilerini dinamik olarak güncelleştirme

Question

Dojo.dijit.tree bileşeninin verilerini dinamik olarak nasıl güncelleyeceğini bilmek isterim. Şu anda dojo.data.ItemFileReadStore ve dijit.tree.ForestStoreModel kullanarak ağacı yaratıyorum. Ağacı oluşturduktan sonra, düzenli olarak yeni JSON verileriyle yeniden yüklemek istiyorum. peşin

<div dojoType="dojo.data.ItemFileReadStore" jsId="myStore" url=getJSONResult></div> 

<div dojoType="dijit.tree.ForestStoreModel" jsId="myModel" store="myStore" query="{type:'cat'}" rootId="myRoot" rootLabel="Data" childrenAttrs="children"></div> 

<div dojoType="dijit.Tree" model="myModel" labelAttr="sname" label="Data" /> 

Teşekkür:

Bu şu anda ağacı oluşturmak nasıl.

Answer 1

Açıkça "yapamazsınız", ama bu, parçaları parçalara ayıramayacağınız ve denemediğiniz anlamına gelmez.

refreshTree : function(){ 
    dijit.byId("myTree").dndController.selectNone(); // As per the answer below  
    // Credit to this discussion: http://mail.dojotoolkit.org/pipermail/dojo-interest/2010-April/045180.html 
    // Close the store (So that the store will do a new fetch()). 
    dijit.byId("myTree").model.store.clearOnClose = true; 
    dijit.byId("myTree").model.store.close(); 

    // Completely delete every node from the dijit.Tree  
    dijit.byId("myTree")._itemNodesMap = {}; 
    dijit.byId("myTree").rootNode.state = "UNCHECKED"; 
    dijit.byId("myTree").model.root.children = null; 

    // Destroy the widget 
    dijit.byId("myTree").rootNode.destroyRecursive(); 

    // Recreate the model, (with the model again) 
    dijit.byId("myTree").model.constructor(dijit.byId("myTree").model) 

    // Rebuild the tree 
    dijit.byId("myTree").postMixInProperties(); 
    dijit.byId("myTree")._load(); 

}, 

Bu, Ağacınızı yenileyecektir.

Answer 2

Şu anda desteklenmiyor. Bakınız here.

Answer 3

Ticari bir web sitesi için üretim öncesi testi ile bulunan Layke'nin çözümü (aksi halde işe yarayacak) ile ilgili bir sorun var.

Durum 1:

• & bir ağaç doldurmak oluşturun.
• Seçmek için bir düğüme tıklayın.
• Layke'ın çözümünde olduğu gibi yenileme işlemini tamamlayın.
• Düğüme tıklayın, "this.labelNode undefined" hatasını alın.
  • & bir ağaç doldurmak oluşturun:

Şimdi durum 2, tekrar başlayın.
• Seçmek için bir düğüme tıklayın.
• Önceden seçilmiş olan düğüme Ctrl-tıklayın.
• Layke'ın çözümünde olduğu gibi yenileme işlemini tamamlayın.
• Düğüme tıklayın, hata yok. Birinci seçime

depolanan seçimi referansları ikinci seçim yapıldığında seçim özelliklerini (arka plan rengi gibi) geri almak için kullanılmaktadır. Maalesef, atıfta bulunulan nesneler artık bit kepçede. Değiştirilmiş kod , üretime hazır gibi görünmektedir, yani herhangi bir üretim öncesi testi başarısız olmuştur.

çözeltisi koymaktır:

Tree.dndController.selectNone(); 

önce yukarıdaki Layke en refreshTree çözeltisi ilk satırına. Bu fonksiyon için

refreshTree : function() { 
    // Destruct the references to any selected nodes so that 
    // the refreshed tree will not attempt to unselect destructed nodes 
    // when a new selection is made. 
    // These references are contained in Tree.selectedItem, 
    // Tree.selectedItems, Tree.selectedNode, and Tree.selectedNodes. 
    Tree.dndController.selectNone(); 

    Tree.model.store.clearOnClose = true; 
    Tree.model.store.close(); 

    // Completely delete every node from the dijit.Tree  
    Tree._itemNodesMap = {}; 
    Tree.rootNode.state = "UNCHECKED"; 
    Tree.model.root.children = null; 

    // Destroy the widget 
    Tree.rootNode.destroyRecursive(); 

    // Recreate the model, (with the model again) 
    Tree.model.constructor(dijit.byId("myTree").model) 

    // Rebuild the tree 
    Tree.postMixInProperties(); 
    Tree._load(); 

} 

Answer 4

sayesinde benim ağacında iyi çalışıyor: Meta önerilerine yanıt olarak

, işte burada.

Dojo için yeni olanlara bir not (benim gibi) ...Ağacın oluşturulması sonra, yenileme fonksiyonu ile ağaç uzatmak için gereklidir:

dijit.byId('myTree').refresh(); 

Answer 5

mağaza güncelleme otomatik olarak ağaç güncellenir:

dojo.extend(dijit.Tree, { 
    refresh: function() { 
     this.dndController.selectNone(); 
     //... 
    } 
}); 

Sonra birlikte işlevini çağırabilirsiniz!

1. Sen size verilerinde değişiklik yapma olanağını veren bir FileWriteStore, gerekir.
2. Sorguyla güncellemek istediğiniz öğeleri almak için mağazayı kullanın.
3. Döndürülen her öğeyi güncelle.

4. Mağazayı kaydedin ve ağaç güncellenecektir.

   FileWriteStore.fetch({ 
       query: { color: "red" }, 
       onComplete: function(items){ 
        for (var i = 0; i < items.length; i++){ 
         FileWriteStore.setValue(items[i], "color", "green"); 
        } 
        FileWriteStore.save();    
       } 
   }); 
   

Answer 6

Layke çözümü için beni işe yaramadı. Dojo 1.9.1 kullanıyorum. Mağazam, "ItemFileWriteStore" türünde ve "TreeStoreModel" türünde bir model.

myStore = new ItemFileWriteStore({ 
    url : "../jaxrs/group/tree" 
}); 

itemModel = new TreeStoreModel({ 
    store : myStore, 
    query : { 
     id : "0" 
    } 
}); 
parser.parse(); 

Bu benim için çalışıyor:

var tree = dijit.byId('myTree'); 
tree.dndController.selectNone(); 
tree._itemNodesMap = {}; 
tree.model.root = null; 
tree.model.store.clearOnClose = true; 
tree.model.store.urlPreventCache = true; 
tree.model.store.revert(); 
tree.model.store.close(); 
tree.rootNode.state = "UNCHECKED"; 
if (tree.rootNode) { 
    tree.rootNode.destroyRecursive(); 
} 
tree.postMixInProperties(); 
tree._load(); 

Answer 7

Bir defada bir kere belirli düğümler güncelleme ve yenileme ihtiyacı DEĞİL için kendi yöntemini inşa ettik bu cevaplar üzerinde çalışırken. Yanıtınız Andy için

_refreshNodeMapping: function (newNodeData) { 

    if(!this._itemNodesMap[newNodeData.identity]) return; 

    var nodeMapToRefresh = this._itemNodesMap[newNodeData.identity][0].item; 
    var domNode = this._itemNodesMap[newNodeData.identity][0].domNode; 

    //For every updated value, reset the old ones 
    for(var val in newNodeData) 
    { 
     nodeMapToRefresh[val] = newNodeData[val]; 

     if(val == 'label') 
     { 
      domNode.innerHTML = newNodeData[val]; 
     } 
    } 
}