Membuat Struktur Organisasi Vertikal dengan Jquery

Pada tutorial sebelumnya kita telah membuat sebuah struktur organisasi dengan menggunakan plugin orgchart pada tutorial yang berjudul : " Membuat Bagan Organisasi dengan Jquery " . Dalam tutorial kali ini, topik pembahasan masih berhubungan dengan pembuatan struktur organisasi dengan orgchart.

Pada tutorial sebelumnya, kita membuat struktur organisasi dengan masing-masing bagan tertata secara horizontal untuk sub hirarki. Kalau seandainya struktur organisasi kita kompleks, tentu saja hal ini akan memakan lebar halaman yang lebih besar. Dan bisa saja hal ini kurang enak dilihat.

Dalam mengatasi penyusunan struktur organisasi yang kompleks, kita dapat menambahkan tag <ul type="vertical">, yang akan menata subhirarkinya secara vertikal. Berikut ini adalah target output yang kita harapkan seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

(Gambar.1)

Untuk membuat struktur organisasi seperti yang ditunjukkan oleh Gambar.1, maka penulisan scriptnya dalam html sebagai berikut :

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

    <ul id="tree-data" style="display:none">
            <li id="root">
                Direktorat Utama
                <ul>
                    
                    <li id="node1">
                        Direktorat Operasi
                        <ul type="vertical">
                            <li id="node2">
                            Divisi Layanan
                            </li>
                            <li id="node3">
                            Divisi Kepersetaan
                                
                            </li>
                            <li id="node6">
                            Divisi Aktuaria
                            </li>
                        </ul>
                    </li>
                    
                    <li id="node7">
                        Direktorat Investasi
                        <ul>
                            <li id="node8">
                            Divisi Investasi
                            Pasar Uang
                            </li>
                            <li id="node9">
                            Divisi Investasi
                            Pasar Modal
                            </li>
                            <li id="node10">
                            Analisis Investasi
                            </li>
                        </ul>
                    </li>
                    <li id="node11">
                       Direktorat Umum
                       <ul type="vertical">
                            <li id="node12">
                            Divisi Logistik
                            </li>
                            <li id="node13">
                            Desk Hukum
                            </li>
                            <li id="node14">
                            Desk Layanan
                            </li>
                            <li id="node15">
                            UPTD
                            </li>
                        </ul>
                        
                    </li>
                    <li id="node4">
                       Direktorat Keuangan
                       <ul type="vertical">
                            <li id="node16">
                            Divisi Anggaran
                            </li>
                            <li id="node17">
                            Divisi Bendahara Umum
                            </li>
                        </ul>
                    </li>
                    <li id="node18" class="last">
                       Direktorat Informasi
                       <ul type="vertical">
                            <li id="node19">
                            Divisi Perencanaan
                            Bisnis
                            </li>
                            <li id="node20">
                            Divisi TI
                            </li>
                            <li id="node21">
                            Desk Manajemen Resiko
                            </li>
                            <li id="node22" >
                            Desk Kepatuhan
                            </li>
                        </ul>
                    </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>

Live Preview Download