Umgang mit onClick für ein Kontrollkästchen in einer CellTable-Header
Ich versuche zum erstellen einer CellTable, dass eine Spalte mit text und eine checkbox, die verwendet werden, als ein wählen Sie alle Kontrollkästchen (siehe Zeichnung unten, "cb" ist markiert). Momentan benutze ich eine Klasse abgeleitet von Kopf-und überschreiben Sie die Methode render zur Ausgabe von text und einer checkbox. Ich bin übergeordnete onBrowserEvent() ist es jedoch nur geben mir die onChange-events, das würde funktionieren, außer, dass die checkbox nicht richtig funktionieren. Hat jemand irgendwelche Ideen dazu?
+-------+------------+
| col 1 | Select All |
| | cb |
+-------+------------+
| row 1 | cb |
+-------+------------+
Probleme ich habe mit der checkbox ist, dass, wenn es nicht aktiviert ist, müssen Sie klicken Sie doppelt, um das Häkchen zu erscheinen (zumindest in Chrome), obwohl es in der "checked" - Eigenschaft true ist das erste mal. Ein Klick, deaktiviert es richtig.
Hier einige code:
Setup der CellTable Spalten:
/** Setup the table's columns. */
private void setupTableColumns() {
//Add the first column:
TextColumn<MyObject> column1 = new TextColumn<MyObject>() {
@Override
public String getValue(final MyObject object) {
return object.getColumn1Text();
}
};
table.addColumn(macColumn, SafeHtmlUtils.fromSafeConstant("Column1"));
//the checkbox column for selecting the lease
Column<MyObject, Boolean> checkColumn = new Column<MyObject, Boolean>(
new CheckboxCell(true, false)) {
@Override
public Boolean getValue(final MyObject object) {
return selectionModel.isSelected(object);
}
};
SelectAllHeader selectAll = new SelectAllHeader();
selectAll.setSelectAllHandler(new SelectHandler());
table.addColumn(checkColumn, selectAll);
}
Meine Wählen Sie Alle Header:
public static class SelectAllHeader extends Header<Boolean> {
private final String checkboxID = "selectAllCheckbox";
private ISelectAllHandler handler = null;
@Override
public void render(final Context context, final SafeHtmlBuilder sb) {
String html = "<div>Select All<div><input type=\"checkbox\" id=\"" + checkboxID + "\"/>";
sb.appendHtmlConstant(html);
}
private final Boolean allSelected;
public SelectAllHeader() {
super(new CheckboxCell());
allSelected = false;
}
@Override
public Boolean getValue() {
Element checkboxElem = DOM.getElementById(checkboxID);
return checkboxElem.getPropertyBoolean("checked");
}
@Override
public void onBrowserEvent(final Context context, final Element element, final NativeEvent event) {
Event evt = Event.as(event);
int eventType = evt.getTypeInt();
super.onBrowserEvent(context, element, event);
switch (eventType) {
case Event.ONCHANGE:
handler.onSelectAllClicked(getValue());
event.preventDefault();
break;
default:
break;
}
}
public void setSelectAllHandler(final ISelectAllHandler handler) {
this.handler = handler;
}
}
- Haben Sie eine Lösung gefunden, doch für diese? Wenn nicht, sehen, ob meine Antwort hilfreich ist.
- Leider bin ich nicht mehr in das Projekt involviert, die Lösung, die Sie verfasst unten sieht aus wie es funktionieren sollte.
- Sie sind immer noch erlaubt, um Sie zu markieren, wie die akzeptierte Antwort, auch wenn Sie nicht verwenden können es nicht mehr 🙂
- Sorry, ich wusste nicht, markieren Sie es so akzeptiert, weil ich es noch nicht versucht, und ich habe es nicht sehen Rori ' s Kommentar, dass es funktioniert. Ich markiert es als angenommen. Vielen Dank für die Zeit nehmen, zu Antworten.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es sieht aus wie du bist rendering-nicht-Feld mit Häkchen, wenn das Rendern von der Kopfzeile, die Vernichtung der Auswahl Zustand, wenn der celltable neu gerendert.
Versuchen, die Speicherung der Aktivierungszustand und die rendering-Option mit dem Staat. Es sieht aus wie du bist auf halbem Weg gibt mit
allSelected
, die Sie gerade nicht benutzen.BEARBEITEN Hier ist eine funktionierende Implementierung habe ich nur geschrieben für Zanata (siehe SearchResultsView.java). Die HasValue-Schnittstelle ist so implementiert, dass value-change-events verarbeitet werden können in einem standard-Weg. Ich habe nicht die render-Methode überschrieben, wenn Sie so wollen, stellen Sie sicher, dass Sie
getValue()
um festzustellen, ob Sie machen einen aktiviert oder deaktiviert Kontrollkästchen. Die Selektion/de-Selektion-Logik verarbeitet wird, in der zugeordneten presenter-Klasse (siehe SearchResultsPresenter.java).table.addColumn(checkboxSelectionColumn, new CheckboxHeader());
. Was ist falsch