当前位置: 开发笔记 > 编程语言 > 正文

使用新的json数据重新创建整个jstree实例-Recreateentirejstreeinstancewithnewjsondata

作者：亲爱one | 来源：互联网 | 2023-05-18 23:57

Iwishtoreplacetheentirecontentsofajstreetreewithnewjsondata.我希望用新的json数据替换jstree树的全部内

I wish to replace the entire contents of a jstree tree with new json data.

我希望用新的json数据替换jstree树的全部内容。

I'm using jsTree 1.0 downloaded July 25, 2011 from github

我正在使用jsTree 1.0从2011年7月25日从github下载

Say I have this function...

说我有这个功能......

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" ]
  });
}

where demo1 refers to a

其中demo1指的是a

What I'm trying to do is to completely replace the tree with new data that I load from my server. For purposes of this question, however, let's pretend I just want to do this...

我要做的是用我从服务器加载的新数据完全替换树。然而,出于这个问题的目的,让我假装我只想这样做......

$(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

});

I'm doing this based on this link, where Ivan seems to advocate this http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

我是根据这个链接做到这一点的,Ivan似乎主张这个http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

However, what's happening is that, on the 2nd call to init, I end up geting this error in firebug

然而,正在发生的事情是,在第二次调用init时,我最终在firebug中发现了这个错误

instance._get_settings is not a function

instance._get_settings不是函数

I tried calling destroy

我试着叫破坏

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

but that didn't fix my problem.

但这并没有解决我的问题。

How can I replace the entire tree with new json data?

如何用新的json数据替换整个树?

2 个解决方案

#1

Here's how I solved this problem: - wrap all the bindings and initialization of the tree in a function - call this function from my document.ready function (this handles initial setup of the tree) - in the success callback of my ajax call, I destroy the tree and then call the function again

这是我如何解决这个问题: - 在函数中包装树的所有绑定和初始化 - 从我的document.ready函数调用此函数(这处理树的初始设置) - 在我的ajax调用的成功回调中,我销毁树然后再次调用该函数

Here's the 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, ...");
                }
        }
     })

#2

I had the same problem. Version jsTree - 3.0.*. A have solved it in the next way:

我有同样的问题。版本jsTree - 3.0。*。 A已经在下一个方面解决了它:

$(function (){

            var data = JSON.parse('');
            initTree(data);
            var data1 = JSON.parse('');
            var flag = 0;
            $("#butree").on("click", function () {
                if (flag) {
                    $("#termtree").jstree("destroy");
                    initTree(data);
                    flag = 0;
                } else {
                    $("#termtree").jstree("destroy");
                    initTree(data1);
                    flag = 1;
                }
            });
        });