Erstellen eines Dropdown-Reihe in displaytag

Question

Ich bin derzeit displaytag für tabellarische Daten, möchte aber eine „kayak.com-like“ Schnittstelle schaffen, in dem, wenn ein Benutzer eine Zeile klickt, wird der Benutzer weitere Informationen über die jeweilige Zeile ohne Aktualisierung der Seite gezeigt.

Zum Beispiel, bevor Sie auf Details des Link auf Zeile 1:

row1 | col1 | col2 | col3 | col4 | Detail
row2 | col1 | col2 | col3 | col4 | Detail
row3 | col1 | col2 | col3 | col4 | Detail

Nach dem Klick:

row1 | col1 | col2 | col3 | col4 | Detail
-------- row1Detail ---------------
row2 | col1 | col2 | col3 | col4 | Detail
row3 | col1 | col2 | col3 | col4 | Detail

Ich habe versucht, einen Dekorateur mit Javascript zurückzukehren, die dies tun würde. Die Javascript ausgeführt wird, aber es ist nur in der Spalte reflektiert, wo sie erbracht wurde. Ich suche eine neue Zeile mit den Daten einzufügen, die nicht displaytag die Paginierung nicht beeinträchtigt und zu sortieren.

z.

public class CustomDecorator extends TableDecorator {
   public String getDetailsRow() {
      MyObject object = (MyObject)this.getCurrentRowObject();
      return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
   }
}

... und in der JSP würde ich eine detailsRow Eigenschaft zwischen der Anzeige verschachtelt ist: Tabellen-Tags:

<display:column property="detailsRow" sortable="false" />

Irgendwelche Tipps, wie man richtig eine neue Zeile einzufügen? Die Lösung kann in der Art und Weise, dass die Javascript geschrieben - ich bin kein Experte mit Javascript, so irgendwelche Tipps geschätzt würde. Gibt es einen besseren Weg, dies mit displaytag zu tun? Ich weiß nicht, jede expliziten Integration dass displaytag mit Javascript hat (wie ein „Onclick“ Parameter) auch nicht.

Dies ist meine erste Frage auf Stackoverflow, btw -. So lassen Sie es mich wissen, ob Sie mehr Details benötigen

Answer 1

Sorry drag auf eine alte Frage, aber hier ist eine mögliche Lösung Incase jemand läuft in diesen. Wenn TableDecorator überschreiben, überschreiben die finishRow Methode, um Ihre Detailzeile zurückzukehren. Diese Methode wird ausgeführt, nachdem jede Zeile in der Tabelle geschrieben wird, so dass für jede reelle Reihe, werden Sie eine ausgeblendete Zeile mit den Details in ihm

public String finishRow() {
   return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>";
}

Dann müssen Sie nur noch einige Javascript auf der Spalte Details der ausgeblendeten Zeile zu sichtbar setzen.

Edit: Weitere Details:

Fügen Sie eine neue JavaScript-Funktion

function displayDetails(id) {
   document.getElementById(id + 'details').style.visibility = 'visible'
}

Dann ist Ihre normale Zeile würde in etwa so aussehen:

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr>

Answer 2

Ich bin mir nicht sicher, ob dies dazu beitragen wird, aber ich bin ein großer Fan von DataTables.net . Es basiert auf jQuery, aber es ist extrem leistungsfähig.

Sie haben ein Beispiel, das sehr viel klingt wie das, was Sie wollen: Row Details