Question

如何在安全的html上创建事件。因为我想在celltable中对列进行过滤。所以我在表格的标题处添加了搜索框。我想访问文本框并在文本框上执行一些事件。

enter image description here

代码：

   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("<input type=\"text\" id=\"nameInput\" /><br/><br/><select><option>one</option></select><br/><center><b>Name</b></center>");
        cell.addColumn(namecolumn,builder.toSafeHtml());
        SafeHtmlBuilder builder1 = new SafeHtmlBuilder();
        builder1.appendHtmlConstant("<input type=\"text\"/><br/><br/><select><option>one</option></select><br/><center><b>Last name</b></center>");
        cell.addColumn(lastNameColumn,builder1.toSafeHtml());
        SafeHtmlBuilder builder2 = new SafeHtmlBuilder();
        builder2.appendHtmlConstant("<input type=\"text\"/><br/><br/><select><option>one</option></select><br/><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();
                }
            });
        }

我得到的第一个问题 nameInput 是 null 。为什么呢？

这只是样本。我想动态创建此列。那么可以为运行时生成的DOM元素动态添加DOM事件吗？

Answer 1

执行此操作的方法是使用Cell作为标题，例如TextInputCell，ValueUpdater来处理更改。

Answer 2

您的代码段没有显示您将verticalpanel添加到页面的位置，如果在搜索dom-tree之后发生这种情况，它显然不起作用。

如果在从DOM树搜索之前将包含输入的SafeHtml附加到页面，则会找到该元素，并且可以从中侦听事件。 Snippet bellow适用于我（你需要在页面上加载get-app的容器）。

public void onModuleLoad() {

    SafeHtmlBuilder builder = new SafeHtmlBuilder();
    builder.appendHtmlConstant("<input type=\"text\" id=\"nameInput\" /><br/><br/><select><option>one</option></select><br/><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());
            }
        });
    }
}

Answer 3

了解正在发生的事情的最佳方法是研究Custom Data Grid

的代码

特别需要查看CustomHeaderBuilder

的代码

我认为Showcase不包含标题搜索框的示例是不幸的，每个人都必须从头开始。

包含SearchBox和ListBox的自定义标头的CellTable

3 个答案: