Treeview dalam Javascript ~ Pemrograman dan Teknologi

Untuk menampilkan.tree view, pertama kita harus membuat listnya dengan ul atau ol. Kita bisa mengubah bullet atau penomorannya dengan pseudo element "::before". Kita juga memerlukan <a> atau <span> untuk menandai bagian dari list yang bisa diklik.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <link rel="stylesheet" href="styleku.css"/>
</HEAD>
<BODY>
 <div class="menu">
  <ul id="tree">
   <li>
    <span>Menu 1</span>
    <ul>
     <li>
      <span>Sub-Menu 1</span>
      <ul>
       <li>Sub-Menu 1</li>
       <li>Sub-Menu 2</li>
       <li>Sub-Menu 3</li>
      </ul>
     </li>
     <li>Sub-Menu 2</li>
     <li>Sub-Menu 3</li>
    </ul>
   </li>
   <li>
    <span>Menu 2</span>
    <ul>
    <li>
     <span>Sub-Menu 1</span>
     <ul>
      <li>Sub-Menu 1</li>
      <li>Sub-Menu 2</li>
      <li>Sub-Menu 3</li>
     </ul>
    </li>
   <li>
    <span>Sub-Menu 2</span>
    <ul>
     <li>Sub-Menu 1</li>
     <li>Sub-Menu 2</li>
     <li>Sub-Menu 3</li>
    </ul>
   </li>
   <li>Sub-Menu 3</li>
   </ul>
   </li>
   <li>Menu 3</li>
   </ul>
   <ul>
     <li>Menu 1</li>
     <li>Menu 2</li>
     <li>Menu 3</li>
   </ul>
 </div>
<SCRIPT src="scriptku.js" ></SCRIPT>
</BODY> 
</HTML>

Untuk mengubah tampilannya, gunakan CSS sehingga pointer dan pseudo element-nya bisa kita atur sesuai keinginan kita. Kalian bisa meletakkan kode CSS berikut ini di dalam tag style atau file CSS eksternal.

.menu {
    position: relative;
    display: inline-block;
}

#tree{
    margin:4px;
    padding:0px;
}

#tree li{
    list-style:none;
    color:brown;
}

#tree span{
    cursor:pointer;
}

#tree span:before{
   content:"\25B6";
   display:inline-block;
   margin-right:6px;
   color:blue;
}

.dipilih::before{
   transform:rotate(90deg);
}

.tampilkan{
   display:block;
}

Sekarang kita akan menambahkan scriptnya. Kita akan menyembunyikan isi dari list dengan "style.display" saat event window.onload dimulai.

x=document.getElementById("tree").querySelectorAll("li span");
for(i=0;i<x.length;i++){
    ul=x[i].parentElement.querySelector("ul");
    if(ul!=null){
        ul.style.display="none";
        x[i].onclick=function(e){
            var ortu=this.parentElement;
            var ul;
            ul=ortu.querySelector("ul");
            if(ul.style.display=="none")ul.style.display="block";
            else ul.style.display="none";
        }
    }
}

Kita akan sedikit mengubah scriptnya agar hanya salah satu dari beberapa bagian list yang ditampilkan dan panahnya "berputar" saat diklik.

x=document.getElementById("tree").querySelectorAll("li span");
for(i=0;i<x.length;i++){
 ul=x[i].parentElement.querySelector("ul");
 if(ul!=null){
    ul.style.display="none";
    x[i].onclick=function(e){
    var ortu=this.parentElement;
    var teman=ortu.parentElement.children;
    var ul;
      for(i=0;i<teman.length;i++){
        ul=teman[i].querySelector("ul");
        if(ul!=null && teman[i]!=ortu)ul.style.display="none";
      }
      ul=ortu.querySelector("ul");
      if(ul.style.display=="none"){
        ul.style.display="block";
        this.classList.toggle("dipilih");
      }else ul.style.display="none";
      this.scrollIntoView();
    }
 }
}

Semoga tulisan ini berguna untuk kalian yang belajar webprogramming. Kalau kalian malas mengetik, download kode HTMLnya di sini.