Lompat ke konten Lompat ke sidebar Lompat ke footer

Bootstrap 5 List Tree View Sederhana CSS + JavaScript

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.

Bootstrap 5 list tree View html

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)

contoh bootstrap 5 list default
Jika anda lihat tampilan Default Bootstrap 5 List seperti itu pasti anda berpikir "ah gak bagus, gak sesuai kebutuhkan". Sehingga Anda perlu merombaknya dengan menambahkan beberapa kode CSS dan JavaScript. Tak perlu basa-basi berikut ini SOurce Code List Tree Statis dan pembahasan singkatnya.

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://2.bp.blogspot.com/-wddloSb4d5g/X9wanENP2nI/AAAAAAAACFg/rUIGvFmPhRAM8It87shmxUsCyKXNQ-XpQCK4BGAYYCw/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 bootstrap 5 list tree view

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.
Jadi setelah mengetahui Kode dan cara membuatnya kini Anda bisa membuatnya sesuai keinginan. Anda juga bisa membuatnya menjadi Dinamis sesuai database memakai PHP misalnya dengan menambah Looping.

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.

2 komentar untuk "Bootstrap 5 List Tree View Sederhana CSS + JavaScript"

  1. Hi,

    Thank you for the code!

    How would you save the tree state if a tree item is a link?

    Scot

    BalasHapus
    Balasan
    1. Oh hi Scot,

      If you want to do that, you just place "a" tag inside "span" tag.

      Hapus