Ngtable: Benötige explizite Tabellenüberschrift und Auswahlfilter
Ich habe die Anforderung, eine 5-Spalten-Tabellendaten mit 3-Spalten-Kopfzeile ähnlich dem folgenden Screenshot anzuzeigen (Bitte die 1. Spalte im Tabellenkörper mit einem gelben Stern markieren).
Helfen Sie mir mit einigen der unten angegebenen Probleme.
- Wenn ich explizite Header-Werte innerhalb desads zur Verfügung stelle, um einen Colspan von 3 für
last 3 runszu erstellen, erhalte ich keine Filter. - Ist es richtig / am besten, einen Auswahlfilter mit
filterStatusFor0($column),filterStatusFor1($column)& amp;filterStatusFor2($column)in meinem Code?
ngtable
%Vor%Wählen Sie den Filtercode
aus %Vor%Bitte überprüfen Sie diesen Plocker-Link
1 Antwort
Sie könnten einen benutzerdefinierten Header mit template-header="my_header.html" als direcitve-Attribut hinzufügen und dann wäre der einfachste Weg, Ihre colgroup zu bekommen, eine Zeile über der normalen Header-Vorlage hinzuzufügen.
So ist es einfacher, alle Filter an Ort und Stelle zu haben, und für die anderen leeren Zellen in dieser Zeile könnten Sie css stylen, um die Grenzen zu entfernen, um eine besser aussehende Tabelle zu haben. (Nicht in der aktualisierten Plunkr hinzugefügt).
Für den zweiten Teil Ihrer Frage mit der Filtermethode. Du wiederholst den gleichen Code dreimal (das folgt nicht dem DRY Prinzip).
Sie könnten das verbessern, indem Sie Ihrer Funktion ein id hinzufügen, so dass Sie nur eine Filtermethode haben, die nur mit anderen IDs aufgerufen wird.
Im Folgenden finden Sie den aktualisierten Code mit der hinzugefügten benutzerdefinierten Header-Vorlage. Sie finden den Code auch in diesem plunkr .