이 코드를 추가 꿔

Question

제목 웹 페이지에 JSTree을 추가하는 방법 :

<div id="jstree"> 
     <ul> 
      <li>Core 1 
       <ul> 
        <li id="child_node_1">Trigonometry</li> 
        <li>Child node 2</li> 
       </ul> 
      </li> 
      <li>Core 2</li> 
     </ul> 
    </div> 
    <button>demo button</button> 

    <script src="oi/dist/libs/jquery.js"></script> 
    <script src="oi/dist/jstree.min.js"></script> 
    <script> 
    $(function() { 
     $('#jstree').jstree(); 
     $('#jstree').on("changed.jstree", function (e, data) { 
      console.log(data.selected); 
     }); 
     $('button').on('click', function() { 
      $('#jstree').jstree(true).select_node('child_node_1'); 
      $('#jstree').jstree('select_node', 'child_node_1'); 
      $.jstree.reference('#jstree').select_node('child_node_1'); 
     }); 
    }); 
    </script> 

을 JSTree 여기에 도시 된 웹 페이지의 제목으로. 그림에 나타낸 바와 같이

My Heading

그러나, 나는 그냥 텍스트로 그것을 얻을. HTML 제목에 적절한 폴더 구조로 나타나게하려면 어떻게해야합니까?

HTML 코드 :

<header id="header"><p>Header...</p></header> 

<div id="container"> 

    <main id="center" class="column"> 
     <article> 

      <h1>Heading</h1> 
      <div id="jstree"> 
       <ul> 
        <li>Core 1 
         <ul> 
          <li id="child_node_1">Trigonometry</li> 
          <li>Child node 2</li> 
         </ul> 
        </li> 
        <li>Core 2</li> 
       </ul> 
      </div> 
      <button>demo button</button> 

      <script src="oi/dist/libs/jquery.js"></script> 
      <script src="oi/dist/jstree.min.js"></script> 
      <script> 
      $(function() { 
       $('#jstree').jstree(); 
       $('#jstree').on("changed.jstree", function (e, data) { 
        console.log(data.selected); 
       }); 
       $('button').on('click', function() { 
        $('#jstree').jstree(true).select_node('child_node_1'); 
        $('#jstree').jstree('select_node', 'child_node_1'); 
        $.jstree.reference('#jstree').select_node('child_node_1'); 
       }); 
      }); 
      </script> 


     </article>        
    </main> 

    <nav id="left" class="column"> 
     <h3>Left heading</h3> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
     </ul> 
     <h3>Left heading</h3> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
     </ul> 

    </nav> 

    <div id="right" class="column"> 
     <h3>Right heading</h3> 

    </div> 

</div> 

<div id="footer-wrapper"> 
    <footer id="footer"><p>Footer...</p></footer> 
</div> 

Answer 1

당신은 jsTree의 CSS 파일을 포함하도록 잊어 버렸습니다. lib와 함께 제공되는 파일을 사용하거나 아래처럼 CDN에서 파일을 사용할 수 있습니다. 당신은 폴더 아이콘이 노드에 볼 수 있도록하려는 Fiddle Demo

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"> 

<script src="oi/dist/libs/jquery.js"></script> 
<script src="oi/dist/jstree.min.js"></script> 
...