jsTree nasıl ajax url değiştirmek ve verileri

$('#jstree_demo_div2').jstree({ 
     'core': { 
      'data': { 
       "url": "tree.ashx?id=" + _id, 
       "dataType": "json" // needed only if you do not supply JSON headers 
      } 
     }, 
     "checkbox": { 
      'visible': true, 
      'keep_selected_style': false, 
     }, 
     "plugins": ["wholerow", "checkbox"] 
    });

ben URL'sini (veya değişken _id değişecek) ve daha sonra veriyi yenilemek değiştirmeniz gerekir

yeniden. Ancak bir önbellek sorun var gibi görünüyor.jsTree nasıl ajax url değiştirmek ve verileri

HTTP isteğini izledim, istek param _id değişmedi.

Ben

'core': { 
       'data': { 
        "url": "tree.ashx?id=" + _id, 
        "cache":false, //←←←← 
        "dataType": "json" // needed only if you do not supply JSON headers 
       } 
      },

denedim ve işe yaramadı.

BTW, jsTree.js sürüm 3.0.8'dir.

kaynak

2014-11-04 wtf512

Ve beform Ben $ ('# jstree_demo_div2') kullanın. Jstree ('yenileme'); 'verileri silmek için, '_id' parametresi değiştirildi. – wtf512

bunun yardımcı olacağını umarız: http://stackoverflow.com/questions/26270239/creating-dynamic-jstree-using-alternative-json-format-stored-in-array/26299310#26299310 ajax döndürülen jsonu arrayCollection değişkeninde saklayabilirsiniz –

normal bir jquery ajax çağrısı yapın ve yeni url ile ajax araması yaptığınızda, arrayCollection'a cevabı atayın ve bu şekilde ağacı yenileyin: $ ('# jstree'). Jstree (true) .settings.core.data = arrayCollection ; $ ('# Jstree') jstree (doğru) .Refresh().; –

Kullanım durumunuzu test etmek için aşağıdaki kodu kullanıyorum. Bütün ağacı çökertmeden jstree'yi yeniliyor.

<!DOCTYPE html> 

<html> 
    <head> 
     <title>JSTree</title> 
     <link rel="stylesheet" href="dist/themes/default/style.css" /> 
     <script src="dist/libs/jquery.js"></script> 
     <script src="dist/jstree.js"></script> 
     <script> 
      var arrayCollection; 
      $(function() { 
       arrayCollection = [ 
        {"id": "animal", "parent": "#", "text": "Animals"}, 
        {"id": "device", "parent": "#", "text": "Devices"}, 
        {"id": "dog", "parent": "animal", "text": "Dogs"}, 
        {"id": "lion", "parent": "animal", "text": "Lions"}, 
        {"id": "mobile", "parent": "device", "text": "Mobile Phones"}, 
        {"id": "lappy", "parent": "device", "text": "Laptops"}, 
        {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"}, 
        {"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"}, 
        {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"}, 
        {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"}, 
        {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"}, 
        {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"}, 
        {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"}, 
        {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"} 
       ]; 
       $('#jstree').jstree({ 
        'core': { 
         'data': arrayCollection 
        }, 
        "checkbox": { 
         'visible': true, 
         'keep_selected_style': false 
        }, 
        "plugins": ["wholerow", "checkbox"] 
       }); 
      }); 
      function resfreshJSTree() { 
       $('#jstree').jstree(true).settings.core.data = arrayCollection; 
       $('#jstree').jstree(true).refresh(); 
      } 
      function addNokia() { 
       var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"}; 
       arrayCollection.push(nokia); 
       resfreshJSTree(); 
      } 
      function deleteDalmatian() { 
       arrayCollection = arrayCollection 
         .filter(function(el) { 
          return el.id !== "dalmatian"; 
         }); 
       resfreshJSTree(); 
      } 
     </script> 
    </head> 
    <body> 
     <input type="button" onclick="addNokia()" value="Add Nokia"/> 
     <input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/> 
     <div id="jstree"></div> 
    </body> 
</html>

Not:
bir tarayıcıda yukarıdaki sayfayı açtıktan sonra, tüm düğümleri ve jstree çocuk düğümleri açın.
Nokia ekle düğmesine tıklayın.
Nokia Lumia düğümü, Ağacı düğümünde, ağacını kök düğümüne taşımadan ekleyecektir.
Benzer şekilde Dalmaitian Sil düğmesini tıklayın.
Ve Dalmatian düğümünü, Köpekler düğümünden silecek ve kök yapısına çökmeden yeni yapıyı görüntülemek için ağacını yeniliyor.

kaynak

2014-11-17 06:52:49

Soruyu cevaplayan kod sadece 'resfreshJSTree' içeriğidir işlevi. $ ('# jstree'). jstree (true) .settings.core.data = 'put/the/url/here.json'; 've' $ ('# jstree'), jstree (true) .refresh (); ' –

Benim için ne çalıştı: $ ('# jstree'). Jstree (true) .settings.core.data = {'url': 'put/the/url/here.json'}; –

$ ('# jstree'). jstree (doğru) .settings.core.data.url = 'put/the/url/here.json'; –

jsTree nasıl ajax url değiştirmek ve verileri

cevap

İlgili konular