Wie man hinzufügen JSTree in einer Web-Seite Richtung

Ich will diesen Code hinzuzufügen:Wie man hinzufügen JSTree in einer Web-Seite Richtung

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

als JSTree in eine Webseite Position, hier dargestellt.

My Heading

Allerdings bekomme ich es nur als Text, in dem Bild, wie dargestellt. Wie bekomme ich es in der HTML-Überschrift als ordentliche Ordnerstruktur angezeigt?

HTML-Code:

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

Quelle

2017-01-24 Nawlidge

ist es, dass Sie die Ordner-Symbole auf Ihrem Knoten sichtbar sein sollen? Außerhalb davon sehe ich nicht, was mit deinem Baum nicht stimmt. –

Ja, im Wesentlichen, die Ordnerstruktur, klickbare Knoten usw. werden nicht angezeigt, wie im Bild zu sehen, es ist nur statischer Text – Nawlidge

Sie haben vergessen, die jsTree CSS-Datei aufzunehmen. Sie können die Datei verwenden, die mit der lib geliefert wird, oder eine CDN verwenden, wie unten. auch Demo-Check - 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> 
...

Quelle

2017-01-26 21:20:41

Wie man hinzufügen JSTree in einer Web-Seite Richtung

Antwort

Verwandte Themen