CellTable с пользовательским заголовком, содержащим SearchBox и ListBox

Как создать событие на безопасном html. Поскольку я хочу сделать фильтрацию для столбца в tabletable. Поэтому я добавил окно поиска в заголовке таблицы. Я хочу получить доступ к текстовому полю и сделать какое-то событие в текстовом поле.

Код:

final MultiSelectionModel<mastertable> selectionModel=new MultiSelectionModel<mastertable>();
 CellTable<mastertable> cell=new CellTable<mastertable>();
 cell.setSelectionModel(selectionModel, DefaultSelectionEventManager.<mastertable> createCheckboxManager());

 Column<mastertable, boolean=""> checkColumn = new Column<mastertable, boolean="">(new CheckboxCell(true, false)) {
 @Override
 public Boolean getValue(MasterTable object) {
 return selectionModel.isSelected(object);
 }
 };
 cell.addColumn(checkColumn);
 cell.setColumnWidth(checkColumn, 20, Unit.PX);
 personCollection.getList().add(new MasterTable("Art", "Shake", 21));
 personCollection.getList().add(new MasterTable("Joe", "Black", 47));
 personCollection.getList().add(new MasterTable("Sam", "PArish", 97));

 TextColumn<mastertable> namecolumn = new TextColumn<mastertable>() {
 @Override
 public String getValue(MasterTable s) {
 return s.getName();
 }
 };



 TextColumn<mastertable> lastNameColumn = new TextColumn<mastertable>() {
 @Override
 public String getValue(MasterTable s) {
 return s.getLastName();
 }
 };
 TextColumn<mastertable> ageColumn = new TextColumn<mastertable>() {
 @Override
 public String getValue(MasterTable s) {
 return Integer.toString(s.getAge());
 }
 };

// cell.addColumn(namecolumn,"Name");
 SafeHtmlBuilder builder = new SafeHtmlBuilder();
 builder.appendHtmlConstant("<select><option>one</option></select><center><b>Name</b></center>");
 cell.addColumn(namecolumn,builder.toSafeHtml());
 SafeHtmlBuilder builder1 = new SafeHtmlBuilder();
 builder1.appendHtmlConstant("<select><option>one</option></select><center><b>Last name</b></center>");
 cell.addColumn(lastNameColumn,builder1.toSafeHtml());
 SafeHtmlBuilder builder2 = new SafeHtmlBuilder();
 builder2.appendHtmlConstant("<select><option>one</option></select><center><b>Age</b></center>");
 cell.addColumn(ageColumn,builder2.toSafeHtml());
 personCollection.addDataDisplay(cell);
 verticalPanel.add(searchpanel);
 verticalPanel.add(cell);
 RootPanel.get("errorLabelContainer").add(verticalPanel);
 final Element nameInput = DOM.getElementById("nameInput");

 if(nameInput!=null)
 {
 Event.sinkEvents(nameInput, Event.ONCHANGE);
 Event.setEventListener(nameInput, new EventListener() {

 @Override
 public void onBrowserEvent(Event event) {
 personCollection.setFilter(nameInput.getInnerText());
 personCollection.refresh();
 }
 });
 }
</mastertable></mastertable></mastertable></mastertable></mastertable></mastertable></mastertable,></mastertable,></mastertable></mastertable></mastertable></mastertable></mastertable>

Первая проблема, я получаю nameInput - null. Зачем?

Это просто образец. Я хочу создать этот столбец динамически. так можно ли динамически добавлять DOM-событие для созданного DOM-элемента времени выполнения?

3 ответа

Способ сделать это - использовать Cell для вашего заголовка, например TextInputCell, с ValueUpdater для обработки этого изменения.


Лучший способ понять, что происходит, - изучить код Custom Data Grid

В частности, вам нужно увидеть код CustomHeaderBuilder

Я считаю, что неудачно, что в Витрине не содержится пример полей поиска заголовков, и каждый должен сделать это с нуля.


Ваш фрагмент кода не показывает, где вы добавляете вертикальную панель на страницу, если это происходит после поиска в dom-tree, это явно не работает.

Если SafeHtml содержащий ввод, добавляется на страницу перед его поиском из дерева DOM, элемент найден, и из него можно прослушать события. Snippet ниже работает для меня (вам нужен контейнер с контейнером id на странице, где загружается приложение get-app).

public void onModuleLoad() {

 SafeHtmlBuilder builder = new SafeHtmlBuilder();
 builder.appendHtmlConstant("<select><option>one</option></select><center><b>Name</b></center>");

 RootPanel.get("container").add(new HTML(builder.toSafeHtml()));

 final Element nameInput = DOM.getElementById("nameInput");
 if (nameInput != null) {
 Event.sinkEvents(nameInput, Event.ONCHANGE);
 Event.setEventListener(nameInput, new EventListener() {
 public void onBrowserEvent(Event event) {
 Window.alert(nameInput.getInnerHTML());
 }
 });
 }
}

licensed under cc by-sa 3.0 with attribution.