jQuery erweitern/reduzieren Sie hierarchische Tabelle Zeile

Ich bin auf der Suche nach einer effizienten Möglichkeit zum erweitern/reduzieren Sie hierarchische Tabelle Zeilen mit jQuery. Das problem ist, dass das erweitern und reduzieren, die Funktionalität unterscheidet sich.

  • Zunächst nur die Zeilen mit Klasse level_0 werden zeigen, alle anderen Zeilen werden ausgeblendet.
  • erweitern Sie sollte nur zeigen das nächsten Niveau, sodass durch klicken auf die Zeile id=10 sollten nur Zeilen mit id=11 und id=14 sichtbar.
  • Zusammenbruch auf der anderen Seite, sollte der Zusammenbruch alle aufeinander folgende Zeilen mit einem tieferen Niveau als das aktuelle. Zum Beispiel, indem Sie Zusammenbruch in der Zeile id=10 sollten ausgeblendet werden die Zeilen mit den ids 11, 12, 13, 14, wenn Sie sichtbar sind.

Die Daten der Tabelle sieht wie folgt aus:

<table id="mytable">
    <tr class="level_0" id="10">...</td>
    <tr class="level_1 parent_10" id="11">...</td>
    <tr class="level_2 parent_11" id="12">...</td>
    <tr class="level_2 parent_11" id="13">...</td>
    <tr class="level_1 parent_10" id="14">...</td>
    <tr class="level_0" id="15">...</td>
</table>

Meine nicht funktionierende Lösung:

$('#mytable tr').live('click', function() {
  var toggleClass = 'parent_' + $(this).attr('id');
  $(this).nextAll('tr').each(function() {
    if ($(this).is('.'+toggleClass)) {
      $(this).toggleClass("showme");
    }
  });
});

Das problem ist, dass es nur klappt die nächste Ebene von Zeilen. Sichtbar und tiefere Zeilen unterhalb der Zeile geklickt werden weiterhin angezeigt.

Kann mir jemand ein paar Hinweise, wie ich dies tun könnte in einer effizienten Weise? Der HTML-code kann angepasst werden, wenn nötig.

Vielen Dank für alle Hinweise.

InformationsquelleAutor Lukas | 2010-08-24
  1. 2

    Den html-Tabelle in Ihrem post ist nicht gültig (tr umschlossen von td). Auf der korrekt strukturierten Tabelle, dieser code funktioniert.

    $("tr.level_0").live("click", function () {
  $(this).nextUntil(".level_0").toggle();
});
    InformationsquelleAutor Jules
  2. 0

    Ich denke, Sie sind gonna brauchen ein wenig etwas mehr code, so können Sie die Verarbeitung von Klicks auf alle die Zeilen in beiden geschlossen und öffnen Staaten.

    Ich habe eine Klasse wechseln, um anzuzeigen, wenn eine Zeile öffnen, und behandeln Klicks ist unterschiedlich je nach seinem Zustand. Beide collapse und expand haben while-Schleifen, die sich zu Fuß durch die Reihen, beginnend mit dem unmittelbar nach der angeklickten Zeile, und Sie stoppen, wenn Sie kommen, um Zeilen der gleichen Ebene. Diese Logik sollte jedem Niveau, nicht nur 0. Auch die while - Schleife könnte wahrscheinlich werden Reiniger mit nextUntil Logik mit einer schicken Auswahl - ich war nicht vertraut mit, dass die jQuery-Methode, bis zu sehen, Jules Antwort - sehr glatt!

    Auch, für die Führung dieser Beispiel-code einfacher, ich behandelte Ihre Klasse naming system als HTML-Daten, Attribute, so eine Zeile sieht wie folgt aus: <tr data-level="0" id="10">. Sie ersetzen könnten Anrufe zu .data mit code analysieren Ihre Klasse Namen.

    var $rows = $('#mytable tr');

$rows.live('click', function() {
$(this).toggleClass('open');

if ($this.hasClass('open')){
    collapse($(this));
} else {
    expand($this);
}
}

function collapse ($row) {
    $row.removeClass('open');
var rowIndex = $rows.index($row);
var siblingOrAncestorRowFound = false;

while (!siblingOrAncestorRowFound){
    var $nextRow = $rows.eq(rowIndex + 1);
    if ($nextRow.level  > $row.level){
        $nextRow.hide().removeClass('open');
        rowIndex++;
    } else {
        siblingOrAncestorRowFound = true;
    }
}
}

function expand ($row) {
    $row.addClass('open')
var rowIndex = $rows.index($row);
var siblingOrAncestorRowFound = false;

while (!siblingOrAncestorRowFound){
    var $nextRow = $rows.eq(rowIndex + 1);
    if ($nextRow.level  > $row.level){

        //only show rows exactly one level below
        if ($nextRow.level == $row.level + 1){
            $nextRow.show();
        }

        rowIndex++;
    } else {
        siblingOrAncestorRowFound = true;
    }
}
}

    (Das ist nicht getestet - sorry gotta hit the sack!)

    InformationsquelleAutor peteorpeter
  3. 0

    Ich habe eine version für mehrere Ebenen der Hierarchie als Antwort auf eine andere Frage.

    Die jQuery für die Tabelle wäre:

    var treeTable = {
    parentClassPrefix : '',
    collapsedClass : 'collapsed',
    init : function(parentClassPrefix) {
        this.parentClassPrefix = parentClassPrefix;
        $('table').on('click', 'tr', function () { 
            treeTable.toggleRowChildren($(this));
        });
    },
    toggleRowChildren : function(parentRow) {
        var childClass = this.parentClassPrefix+parentRow.attr('id');
        var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
        childrenRows.toggle();
        childrenRows.each(function(){
            if (!$(this).hasClass(treeTable.collapsedClass)) {
                treeTable.toggleRowChildren($(this));
            }
        });
        parentRow.toggleClass(this.collapsedClass);
    }
};

treeTable.init('parent_');

    Sehen diese JSFiddle für Sie arbeiten.

    Optimierungen

    Habe ich eine etwas andere Tabelle-Struktur, mit der Angabe von Eltern und Kindern, so dass die Suche kann effizienter sein.

    Habe ich dann auch gemacht jQuery hierarchischen Tabelle die Zeile Umschalten Gist von es und wandelten es in verdinglicht javascript mit Optimierungen. Die Optimierungen kommen aus http://24ways.org/2011/your-jquery-now-with-less-suck/.

    Speziell:

    Event-delegation auf dem Tisch statt auf die Zeilen.

    $('table').on('click', 'tr.'+treeTable.parentClass, function () {
    treeTable.toggleRowChildren($(this));
});

    Cache der Kinder Auswahl.

    Verwenden der schnelleren element-Selektor gefolgt von einer langsameren filter auf der .childClass

    var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
    InformationsquelleAutor icc97
Schreibe einen Kommentar