Recréer l'instance entière de jstree avec de nouvelles données json

je souhaite remplacer tout le contenu d'un arbre jstree par de nouvelles données json.

j'utilise jsTree 1.0 téléchargé le 25 juillet 2011 à partir de github

disons que j'ai cette fonction...

function init_my_tree(my_json_data)
{
  $("#demo1").jstree({
    themes: {
      "theme": "classic",
      "dots": false,
      "icons": true,
      "url": "//js.myliburl.com/jstree/themes/classic/style.css"
    },
    json : {
      data : my_json_data
    },
    plugins : [ "core","ui","themes", "json" ]
  });
}

où demo1 fait référence à un 

<div id="demo1"></div>

ce que j'essaie de faire, c'est de complètement remplacer l'arbre par de nouvelles données que je charge depuis mon serveur. Pour les besoins de cette question, cependant, faisons semblant que je veux juste le faire...

$(document).ready(function() {
  var text_data = '[{"title":"All","data":{"jstree":{"opened":true}},"children":[{"title":"Item 1","data":{"jstree":{}},"children":false,"li_attr":{"id":"1","class":"jstree-leaf","href":"#"},"a_attr":{"href":"#"}},{"title":"Item B","data":{"jstree":{}},"children":false,"li_attr":{"id":"2","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}],"li_attr":{"id":"0","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}]';
  var my_json_data = $.parseJSON(text_data); 
  init_my_tree(my_json_data);  // initialize the tree view

  text_data = '[{"title":"Something Else","data":{"jstree":{"opened":true}},"children":[{"title":"Item A","data":{"jstree":{}},"children":false,"li_attr":{"id":"1","class":"jstree-leaf","href":"#"},"a_attr":{"href":"#"}},{"title":"Item 2","data":{"jstree":{}},"children":false,"li_attr":{"id":"2","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}],"li_attr":{"id":"0","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}]';
  my_json_data = $.parseJSON(text_data); 
  init_my_tree(my_json_data);  // re-initialize the tree view to load with new data

});

je suis faire cela sur la base de ce lien, où Ivan semble préconiser http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

cependant, ce qui se passe, c'est que, sur le 2ème appel à init, je finis par faire cette erreur dans firebug

instance._get_settings n'est pas une fonction

j'ai essayé d'appeler détruire

$("#demo1").jstree("destroy");

mais ça n'a pas réglé mon problème.

Comment puis-je remplacer l'arbre entier avec les nouvelles données json?

15
demandé sur Tom 2011-07-27 01:03:49

2 réponses

Voici comment j'ai résolu ce problème: - envelopper toutes les fixations et l'initialisation de l'arbre dans une fonction - appelez cette fonction depuis mon document.fonction ready (qui gère la configuration initiale de l'arbre) - dans le succès callback de mon appel ajax, je détruis l'arbre et ensuite je rappelle la fonction

Voici le code:

function loadTargetTree() {
    $("#target-book-tree").bind("select_node.jstree", function (e, data) {
      data.rslt.obj; // the LI node that was clicked
      selectedTargetID = data.rslt.obj.attr("id");
      if(data.rslt.obj.hasClass("book") || data.rslt.obj.hasClass("section")) {
        targetChapterIsSelected = false;
        toggleCopyTools()
      } else {
        targetChapterIsSelected = true;
        toggleCopyTools();
        target_parent_id = selectedTargetID;
      }
    });

    $("#target-book-tree")
        .jstree({
            core : {
                "initially_open" : ["book_"+getParameterByName('target_book_id')],
                "animation": 100
                },
            "plugins":["themes","html_data","ui"],
            "themes" : {
                "theme" : "classic",
                "dots" : true,
                "icons" : false
                },
            "ui" : {
                "select_limit" : 1,
                "selected_parent_close" : "deselect",
                },
        });
}


$(document).ready(function() {
    loadTargetTree();
});



AND MY AJAX CALL:

    var sendData = 'new_name='+$('input#new_name').val()+'&target_book_id='+target_book_id + '&source_lib_id='+source_lib_id + '&target_parent_id='+target_parent_id;
    $.ajax({
          dataType: "json",
       type: "POST",
       url: "/ajax/CopySelectedSection",
       data: sendData,
        error: function(data) {
            alert("Oops! An error occured. Please try again later.")
        },
        success: function(data) {
                if (data['status'] == "ok") {
                    $("div#target-book-tree").html(data['book_outline']);
                    $("#target-book-tree").jstree('destroy');
                    loadTargetTree();
                } else {
                    alert("Sorry, ...");
                }
        }
     })
13
répondu saiena 2011-08-08 17:30:05

j'ai eu le même problème. Version jsTree-3.0.*. Ont résolu de la façon suivante:

$(function (){

            var data = JSON.parse('<?php echo $treedata;?>');
            initTree(data);
            var data1 = JSON.parse('<?php echo $terminsData;?>');
            var flag = 0;
            $("#butree").on("click", function () {
                if (flag) {
                    $("#termtree").jstree("destroy");
                    initTree(data);
                    flag = 0;
                } else {
                    $("#termtree").jstree("destroy");
                    initTree(data1);
                    flag = 1;
                }
            });
        });
9
répondu Sergey Povisenko 2014-02-12 20:35:50