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 is nullを取得している最初の問題。なぜ？

これは単なるサンプルです。この列を動的に作成したい。実行時に生成されたDOM要素に対してDOMイベントを動的に追加することは可能ですか?

4

3 に答える 3

1

あなたのコードスニペットは、垂直パネルをページに追加する場所を示していません。dom-tree を検索した後にそれが発生した場合、明らかに機能しません。

DOM ツリーから検索する前に入力を含むページに追加するとSafeHtml、要素が見つかり、そこからイベントをリッスンできます。スニペットベローは私にとってはうまくいきます（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 に答える