JStree는 다른 데이터를 제공 할 때 HTML 형식의 트리를 보여줍니다.

Question

저는 JStree에 데이터를 가지고 있습니다. <ul>과 <li>입니다. 내 자바 스크립트의 기능은 다음과 같습니다

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

나는 또한 바이올린 만들었습니다 https://fiddle.jshell.net/brb44wkh/1/

우리가 그 일을 더 나은 방법이 있다면 확인됩니다. 희망이 도움이됩니다.