Luaskan/Perkecil tabel pohon jQuery

Saya menggunakan perpustakaan treetable dari jQuery dan saya mencoba melakukan perilaku seperti akordeon, sehingga ketika saya membuka salah satu level dan itu meluas, saya ingin menutup level lain yang sebelumnya dibuka. Saya tidak tahu bagaimana menerapkan perilaku ini menggunakan perpustakaan jQuery treetable.

Ini adalah kode untuk tabel pohon saya:

function buildTreeTable(tree){

    $("#example").treetable({
        expandable:     true,
        onNodeExpand:   nodeExpand,
        onNodeCollapse: nodeCollapse
    });

function nodeExpand () {
        getNode(this.id); 
 }


function nodeCollapse () {
         console.log("Collapsed: " + this.id);
    }

function getNode(parentNode){
        id = parentNode;
        console.log("The new var is", id);
        console.log("The id of the parent is: ", parentNode);
        var parentNode = $("#example").treetable("node", parentNode);
        $("#example").treetable("unloadBranch", parentNode);
    console.log("parent node",parentNode);
}

Terima kasih sebelumnya!


javascript jquery accordion treetable
person blaa    schedule 17.08.2017    source sumber
comment
Ide ... Anda dapat menyimpan ID node yang Anda buka dan kemudian Anda dapat menutup Semua() dan selanjutnya memperluas node yang ID-nya Anda ingat dalam variabel .expandNode(id).   -  person daremachine    schedule 17.08.2017

Jawaban (1)


arrow_upward
0
arrow_downward

Anda dapat mencoba ini:

  1. Awalnya ciutkan semua baris di tabel Treegrid.

  2. Kemudian, dalam fungsi 'onExpand' periksa apakah node sebelumnya diperluas. Jika diperluas, hancurkan node itu. (Catatan: Saya telah menyimpan id sebelumnya dalam variabel temp di sini.)

Sekarang, ini berfungsi dengan baik seperti 'runtuh & akordeon' normal

$(document).ready(function () {
    var temp = "";
    $('.tree').treegrid({
        'expanderExpandedClass': 'glyphicon glyphicon-minus',
        'expanderCollapsedClass': 'glyphicon glyphicon-plus',
        'initialState': 'collapsed',
        **'onExpand': function () {
            if ($(document.getElementById(temp)).treegrid('isExpanded')) {
                $(document.getElementById(temp)).treegrid('collapse');
            }
            temp = $(this).attr("id");
        }**
    });
});
person Vijayakumar.Raja    schedule 25.02.2020