Membuat Bagan Organisasi dengan Jquery

Pada tutorial web edisi ini, kita akan mencoba membuat bagan organisasi dengan jquery. Seringkali  kita lihat untuk website profil pemerintahan terdapat sebuah halaman yang mendeskripsikan struktur organisasi. Cara tergampangnya, kita sketsa di image editor atau menggunakan ms.visio, ms.word ataupun editor yang terdapat menu membuat bagan organisasi, kemudian kita menyimpannya sebagai image baik berupa jpg, png dsb. Lalu pada halaman web, kita memangilnya melalui tag <img src="lokasi gambar">.

Dengan model pemanggilan tag img src, cara ini akan menambah beban loading dari website. Untuk itu kita dapat menggunakan alternatif pembuatan sturktur organisasi pemerintahan ataupun perusahaan dengan menggunakan plugin jquery.

Dua librari utama untuk membentuk bagan organisasi adalah :

<link href="orgchart/orgchart.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="orgchart/orgchart.js"></script>

Contoh 1:
Misalkan kita akan membuat sebuah struktur organisasi seperti yang ditunjukkan Gambar.1 berikut :

(Gambar.1)

Maka untuk membuat struktur organisasi seperti gambar diatas, pembuatan script dalam html sebagai berikut :

<div class="container">
    <div class="row">
        <ul id="tree-data" style="display:none">
            <li id="root">
                Direktorat Utama
                <ul>
                    <li id="node1">
                       Direktorat Operasi
                    </li>
                    <li id="node2">
                       Direktorat Investasi
                    </li>
                    <li id="node3">
                       Direktorat Umum
                    </li>
                    <li id="node4">
                       Direktorat Keuangan
                    </li>
                    <li id="node5">
                       Direktorat Informasi
                    </li>
                </ul>
            </li>
        </ul>
    <div id="tree-view"></div>  
    
    <script>
        $(document).ready(function () {
        // create a tree
        $("#tree-data").jOrgChart({
            chartElement: $("#tree-view"), 
            nodeClicked: nodeClicked
        });
        // lighting a node in the selection
        function nodeClicked(node, type) {
            node = node || $(this);
            $('.jOrgChart .selected').removeClass('selected');
                node.addClass('selected');
            }
        });
    </script>       
    </div>
</div>

Untuk tag <div class="container"> dan <div class="row"> dapat diabaikan, jika anda tidak menggunakan Bootstrap.


Contoh 2:
Misalkan kita akan membuat sebuah struktur organisasi lanjutan dari Gambar.1 dengan ouput yang diharapkan seperti yang seperti Gambar.2 dibawah ini :

(Gambar.2)

Untuk membuat struktur organisasi seperti Gambar.2 diatas, script dalam html sebagai berikut :

<div class="container">
<div class="row">

    <ul id="tree-data" style="display:none">
            <li id="root">
                Direktorat Utama
                <ul>
                    <li id="node1">
                       Direktorat Operasi
                       <ul>
                            <li id="node6">
                            Divisi Layanan
                            </li>
                            <li id="node6">
                            Divisi Kepersetaan
                            <ul>
                                <li id="node6">
                                Divisi Administrasi
                                </li>
                                <li id="node6">
                                Divisi Sosialisasi
                                </li>
                            </ul>
                            </li>
                            <li id="node6">
                            Divisi Aktuaria
                            </li>
                        </ul>
                    </li>
                    <li id="node2">
                        Direktorat Investasi
                        <ul>
                            <li id="node6">
                            Divisi Investasi
                            Pasar Uang
                            </li>
                            <li id="node6">
                            Divisi Investasi
                            Pasar Modal
                            </li>
                            <li id="node6">
                            Analisis Investasi
                            </li>
                        </ul>
                    </li>
                    <li id="node3">
                       Direktorat Umum
                        
                    </li>
                    <li id="node4">
                       Direktorat Keuangan
                       
                    </li>
                    <li id="node5">
                       Direktorat Informasi
                    </li>
                </ul>
                
            </li>
    </ul>
    <div id="tree-view"></div>  
<script>
    $(document).ready(function () {
    // create a tree
    $("#tree-data").jOrgChart({
        chartElement: $("#tree-view"), 
        nodeClicked: nodeClicked
    });
    // lighting a node in the selection
    function nodeClicked(node, type) {
        node = node || $(this);
        $('.jOrgChart .selected').removeClass('selected');
            node.addClass('selected');
        }
    });
</script>       
        
</div>
</div>

Pada tag <li id=""></li>, kita melakukan duplikasi lebih dari dua kali untuk <li id="node6">, hal ini tidak menjadi masalah. Untuk Contoh 2, anda dapat melihat demo pada link live preview dibawah. Anda juga dapat mendownloadnya pada link Download (sudah termasuk librari orgchart.css dan orgchart.js).

Live Preview Download