Kembali lagi di ekorkode.com, kali ini saya akan membuat topik bahasan Framework CSS. Lebih tepatnya membahas cara membuat Bootstrap 5 List Tree View. Diharapkan dengan cara ini, Anda dapat menampilkan susunan data tree menjadi lebih terstruktur. Cukup bermodal Framework Bootstrap 5 + Custom CSS + Custom Javascript.
Sebagai Front-end atau bahkan mungkin Full-stack Developer tampilan adalah bagian yang tak boleh dipandang remeh. Beberapa orang bilang "ah gapapalah yang penting muncul datanya!" itu pernyataan yang kurang tepat. Tampilan data perlu di kemas secara interaktif dan menarik agar pengalaman pengguna (user experience) baik pula.
Salah satu bentuk data yang kadang di buat dalam beberapa kasus adalah Data Tree atau Binary. Source data dari tree bisa bermacam-macam seperti JSON, ARRAY, XML dan lain-lain. Untuk menyajikan tampilan data seperti itu, antara satu data dengan data lainnya memiliki keterkaitan. Umumnya berupa "parent" sebagai identifikasi induk dan "child" sebagai identifikasi turunan atau anak.
Nah tampilan sederhana yang dapat menampilkan keseluruhan data yaitu dengan menggunakan List. Dengan list Anda bisa menampilkan urutan data yang paling tinggi hingga keseluruhan turunannya. Namun untuk melakukan hal itu agar tampilan menjadi menarik perlu merombak tampilan dengan menambahkan CSS dan JavaScript.
Baca Juga: Bootstrap 5 Show Hide Password Font Awesome + jQuery
Tampilan Default List Bootstrap 5 (gak bagus)
Source Code Bootstrap 5 Tree List View CSS + JavaScript dengan Caret
<html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <title>www.ekorkode.com</title> <style> ul, #myUL { list-style-type: none; } #myUL { margin: 0; padding: 0; } .caret { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; } .caret-down::before { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .nested { display: none; } .active { display: block; } </style> </head> <body class="bg-success"> <nav class="navbar navbar-expand-lg navbar-light bg-white shadow border border-dark border-1"> <div class="container"> <a class="navbar-brand" href="index.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-mALuiBB2tOhax0cW_MpoALsdNAuHozStXStxkH7YnKHs0p93pny_YVk7Jjm-g1rOGHkXzKThUgYheGZ-9ZK8OuAdnc0y2dFRB8xN0qwVrqqO4pUU2F0UMaXGlo1NEM5e8N3QF5ygi9i/w250/header.png" alt="logo-ekorkode" class="text-center" width="200px"> </a> </div> </nav> <section class="container"> <div class="row content d-flex justify-content-center align-items-center"> <div class="col-lg-5 py-5"> <div class="box shadow bg-light p-4 rounded-3 border border-dark border-5"> <ul id="myUL"> <li><b> <span class="caret">TITIK PUSAT</span> <ul class="nested"> <li> <span class="caret">Generasi 1</span> <ul class="nested"> <li> <span class="caret">Generasi 2</span> <ul class="nested"> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> </ul> </li> <li> <span class="caret">Generasi 2</span> <ul class="nested"> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> <li> <span class="caret">Generasi 3</span> <ul class="nested"> <!-- seterusnya --> </ul> </li> </ul> </li> </ul> </li> </ul> </b></li> </ul> </div> </div> </div> </section> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"> </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <!-- Script ikon Caret List --> <script> var toggler = document.getElementsByClassName("caret"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function () { this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down"); }); } </script> </body> </html>
Pembahasan Singkat
- Lihat Script terakhir, membuat variabel toggler dengan mendapatkan class "caret".
- Jika sebuah tag mengandung tag "caret", ketika di klik akan memproses 2 perintah yaitu:
- Pertama: membuat class "nested" menjadi "active" akibatnya akan muncul list turunannya.
- Kedua: mengubah class "caret" menjadi "caret-down" sehingga icon akan berotasi 90 derajat.
Hasilnya
Contoh di atas adalah hasil tampilan HTML Source Code yang saya berikan, berikut spesifikasi tampilan tersebut:
- TITIK PUSAT memiliki 1 turunan yaitu Generasi 1.
- Generasi 1 memiliki 2 turunan yaitu Generasi 2 dan Generasi 2.
- Masing-masing Generasi 2 memiliki tururan yaitu masing-masing 3 Generasi 3.
Kesimpulan
Setelah Anda mengetahui dan cara kerja dari Source Code List Tree yang saya bagikan, sekarang Anda bisa memodifikasinya. Atau mungkin menjadikannya Dinamis dengan database. Tampilan List Tree ini memudahkan pengguna melihat ringkasan urutan dan keterkaitan antara satu data dengan data lainnya.
Sekian artikel tentang bagaimana membuat Tampilan Bootstrap 5 List Tree dengan CSS dan JavaScript. Semoga bermanfaat untuk Anda Semua. Terima kasih.
Hi,
BalasHapusThank you for the code!
How would you save the tree state if a tree item is a link?
Scot
Oh hi Scot,
HapusIf you want to do that, you just place "a" tag inside "span" tag.