0

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

在此处输入图像描述

代码：

   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 事件？

4

3 回答 3

3

做到这一点的方法是使用 aCell作为您的标题，例如 a TextInputCell，并使用 aValueUpdater来处理更改。

于 2013-09-27T07:58:37.070 回答
1

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

如果SafeHtml在从 DOM 树中搜索之前将包含输入的内容附加到页面，则会找到该元素，并且可以从中侦听事件。下面的片段对我有用（您需要在加载 get-app 的页面上带有 id 容器的容器）。

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());
            }
        });
    }
}
于 2013-09-27T07:00:05.983 回答
1

了解发生了什么的最好方法是研究自定义数据网格的代码

特别是您需要查看的代码CustomHeaderBuilder

我觉得很遗憾Showcase没有包含标题搜索框的示例，每个人都必须从头开始。

于 2013-09-27T08:46:25.343 回答