JStreeは、異なるデータを提供するときにHTML形式のツリーを表示しています

Question

私はと<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

jstreeの古い要素をdomから削除してもう一度作成すると、それは機能します。

 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); 

私はまた、フィドルを作成しました： https://fiddle.jshell.net/brb44wkh/1/

我々はそれを行うためのより良い方法を持っている場合は、私がチェックします。それが役に立てば幸い。