jquery-tablesorter-plugin - alternative behalten Zeile Farben

Nahm ich eine html-Tabelle, dass ich die Anwendung alternativer Zeilen-Farben, und ich habe Hinzugefügt, jquery Tabelle sorter so-Benutzer können die Tabelle Sortieren.

Das Problem ist, dass die alternative Zeile Farben sind alle Durcheinander jetzt, da (basierend auf der Sortierung) gibt es mehrere Zeilen mit der gleichen Hintergrundfarbe.

Gibt es eine Möglichkeit zum zurücksetzen der alternative zeilenfarbe mit jquery Tabelle sorter?

InformationsquelleAutor der Frage leora | 2009-09-18

49

Gibt es bereits ein Standard-widget zebragebaut in den Kern, das gilt für die Klassen odd und even um Alternative Zeilen. Es funktioniert unabhängig davon, ob oder nicht, die Sie Hinzugefügt haben class=even/odd auf die html-Datei.

Es ist wirklich einfach zu set-up. Ich einfach den Anweisungen gefolgt, die auf der Tabelle sorter websiteund dann verändert die document-ready-Funktion, um die folgenden:
```
<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>
```
Habe ich ein Beispiel bei der Beantwortung der Frage. Sie können sehen Sie das Ergebnis in Aktionoder siehe Beispiel-code.

InformationsquelleAutor der Antwort Alasdair
6

Basiert auf Anthony ' s Antwort, aber umformuliert als ein one-liner (meistens):
```
function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);
```
JQuery-Aufrufe werden können "angekettet", wie oben, mit Operationen wie filter() zu begrenzen, werden die ausgewählten Elemente, und .end() "reset", um die Letzte Auswahl. Anders ausgedrückt, jeder .end() "macht" die bisherigen .filter(). Die endgültige .end() ist weggelassen, da es nichts damit zu tun, dass nach.

InformationsquelleAutor der Antwort dcrosta
5

Zur Aufrechterhaltung der Zebrastreifen nach einer Art stattgefunden hat, müssen Sie zum auslösen der zebra-widget wieder.
```
$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});
```
Dies ist weniger ein hack, da Sie die Wiederverwendung der Logik der zebra-widget anstatt replizieren.

Hinweis: Diese Art von work-around ist nur erforderlich, in Fällen, wo die Standard-zebra-widget nicht. Ich habe gefunden, in den meisten Fällen, dass dieser hack ist nicht erforderlich, da das widget ist einwandfrei post Sortieren.

InformationsquelleAutor der Antwort holsee
1

Wie etwa:
```
function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);
```
Oh, und wenn Sie wollen eine wirklich einfache Lösung, Sie könnte halten Sie den Atem für diese CSS-pseudo-Klasse abgeholt, die von allen gängigen Browsern:
```
table tr:nth-child(n+1) {
    color: #ccc;
}
```
Aber meine Vermutung ist, basierend auf, wie FF und Unternehmen mit CSS für dynamische HTML -, es würde Ihre Streifen onload, aber nicht für die CSS nach der Sie Sortieren. Aber ich würde gerne sicher wissen.

InformationsquelleAutor der Antwort Anthony

Überarbeitet und die Letzte funktionierende Lösung - eingebaute
*Dies ermöglicht auch das ändern der Farbe klicken.*

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

Nun sollte alles kick von selbst !

InformationsquelleAutor der Antwort Sakthivel

Über Ihre css:

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }

InformationsquelleAutor der Antwort alwaysVBNET

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.