JStree 在提供不同数据时以 HTML 格式显示树

Question

我有一个数据，我在 <ul> 和 <li> 中提供给 JStree。我的 Javascript 函数是：

function displayData(data){
    //your codes to parse and display json data  in html table in your page.
    if (data !=null || data!=undefined){
        var myDiv = document.getElementById("myTree");
        myDiv.innerHTML = data;
        makeTree();
        console.log(data);
    }
    else{
        console.log("No such data!");
    }
}


function makeTree(){
        $('#treeDiv').removeAttr('hidden');
         var tree = $("#myTree");
         $("html, body").animate({ scrollTop: 0 }, 500);
            tree.bind("loaded.jstree", function (event, data) {
                tree.jstree("open_all");
            });

        $('#myTree').jstree({

            "plugins": ["checkbox"]
        });

};

当我第一次调用函数显示数据时用的数据：

<ul>
    <li>NodeB
        <ul>
            <li>NodeA
                <ul>
                    <li>NodeC</li>
                </ul>
                <ul>
                    <li>NodeD</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我在这张图片上得到了一个 JStree：。但是当我选择另一个数据并再次调用显示数据函数时，数据只显示为HTML。如何保持启用 JStree 插件？谢谢。

Answer 1

如果您从 dom 中删除 jstree 的旧元素，然后重新创建它，它就会起作用。

        function displayData(data) {
      //your codes to parse and display json data  in html table in your page.
      if (data != null || data != undefined) {
        var myDiv = document.getElementById("myTree");
        var newDiv;
        var parentNode = myDiv.parentNode;
        if (parentNode) {
          parentNode.removeChild(myDiv);
          newDiv = document.createElement('div');
          newDiv.setAttribute('id', 'myTree');
          parentNode.appendChild(newDiv);
        } else {
          newDiv = myDiv;
        }

        newDiv.innerHTML = data;
        makeTree();
        console.log(data);
      } else {
        console.log("No such data!");
      }
    }


    function makeTree() {

      var tree = $("#myTree");
      $("html, body").animate({ scrollTop: 0 }, 500);
      tree.bind("loaded.jstree", function(event, data) {
        tree.jstree("open_all");
      });

      $('#myTree').jstree({

        "plugins": ["checkbox"]
      });

    };

    var test1 = '<ul> <li>NodeB <ul> <li>NodeA <ul> <li>NodeC</li> </ul> <ul> <li>NodeD</li> </ul> </li> </ul> </li> </ul>';




    var test2 = '<ul> <li>NodeB-1 <ul> <li>NodeA-2 <ul> <li>NodeC-3</li> </ul> <ul> <li>NodeD-4</li> </ul> </li> </ul> </li> </ul>';

    displayData(test2);

    setTimeout(function() { displayData(test1); }, 4000);

我还创建了一个 fiddle： https://fiddle.jshell.net/brb44wkh/1/

我会检查我们是否有更好的方法。希望对你有帮助。

JStree 在提供不同数据时以 HTML 格式显示树

JStree is showing the tree in HTML format when supplying different data

javascript

jquery

jstree