Manipulação onClick para uma caixa de seleção em um cabeçalho CellTable
Pergunta
Eu estou tentando criar um CellTable que tem uma coluna com algum texto e uma caixa de seleção, que será usado como selecionar todos caixa (veja o desenho abaixo, "cb" é caixa). Atualmente estou usando uma classe derivada de Cabeçalho e substituindo-lo é tornar método para a saída do texto e uma caixa de seleção. Estou substituindo onBrowserEvent (), no entanto ele só está me dando onChange eventos, que iria funcionar bem, exceto que a caixa de seleção não funciona corretamente. Alguém tem alguma idéia sobre isso?
+-------+------------+
| col 1 | Select All |
| | cb |
+-------+------------+
| row 1 | cb |
+-------+------------+
Os problemas que estou tendo com a caixa de seleção é que quando não está marcada, você tem que clicar duas vezes para a marca de verificação para aparecer (pelo menos no Chrome), mesmo que seja "verificado" a propriedade é verdade pela primeira vez. Um clique Desmarca-lo corretamente.
Aqui está um código:
Configuração das colunas CellTable:
/** 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);
}
Meu Select All Cabeçalho:
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;
}
}
Solução
Parece que você está prestando uma caixa de seleção não verificada sempre que você tornar o cabeçalho, o que poderia ser acabando com o estado de seleção sempre que o celltable re-presta.
Tente armazenar o estado verificado e tornando a caixa de seleção com o Estado. Ele não parece que você está no meio do caminho com allSelected
, você simplesmente não estiver usando-o.
Editar Aqui é uma implementação de trabalho que eu acabei de escrever para Zanata (veja SearchResultsView.java ). A interface HasValue é implementado para que os eventos de alteração de valor pode ser tratado de uma forma padrão. Eu não tenho substituído o método render, se você quiser fazê-lo certifique-se de usar getValue()
para determinar se você processar um ou uma caixa de seleção desmarcada marcada. A lógica / de-selecção selecção é tratado na classe apresentador associada (ver SearchResultsPresenter.java ).
private class CheckboxHeader extends Header<Boolean> implements HasValue<Boolean> {
private boolean checked;
private HandlerManager handlerManager;
public CheckboxHeader()
{
//TODO consider custom cell with text
super(new CheckboxCell());
checked = false;
}
// This method is invoked to pass the value to the CheckboxCell's render method
@Override
public Boolean getValue()
{
return checked;
}
@Override
public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent)
{
int eventType = Event.as(nativeEvent).getTypeInt();
if (eventType == Event.ONCHANGE)
{
nativeEvent.preventDefault();
//use value setter to easily fire change event to handlers
setValue(!checked, true);
}
}
@Override
public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Boolean> handler)
{
return ensureHandlerManager().addHandler(ValueChangeEvent.getType(), handler);
}
@Override
public void fireEvent(GwtEvent<?> event)
{
ensureHandlerManager().fireEvent(event);
}
@Override
public void setValue(Boolean value)
{
checked = value;
}
@Override
public void setValue(Boolean value, boolean fireEvents)
{
checked = value;
if (fireEvents)
{
ValueChangeEvent.fire(this, value);
}
}
private HandlerManager ensureHandlerManager()
{
if (handlerManager == null)
{
handlerManager = new HandlerManager(this);
}
return handlerManager;
}
}