Question

我正在尝试使用自定义列标题实现CellTable，该标题在正常列文本下方显示SearchBox（简单文本框）。
SearchBox应允许用户过滤CellTable。看起来应该是这样的：

  |Header  1|Header 2 |
  |SEARCHBOX|SEARCHBOX|
  -------------------------------------------------------
  |    ROW 1 
  ------------------------------------------------------
  |    ROW 2

一旦用户在SearchBox中输入一个字符，就会触发 RangeChangeEvent ，这会导致服务器请求，并使用新的过滤列表更新CellTable。

基本上一切都很好。但是，只要刷新CellTable，SearchBox 就会失去焦点，用户必须再次用鼠标点击进入SearchBox才能输入新字符。

这可能与在CellTable刷新后调用自定义标头及其单元格的render方法有关。
有没有办法将焦点设置回SearchBox？我试图设置 tabindex = 0 ，但没有帮助。

自定义标题类

public static class SearchHeader extends Header<SearchTerm> {
    @Override
    public void render(Context context, SafeHtmlBuilder sb) {
        super.render(context, sb);
    }
    private SearchTerm searchTerm;
    public SearchHeader(SearchTerm searchTerm,ValueUpdater<SearchTerm> valueUpdater) {
        super(new SearchCell());
        setUpdater(valueUpdater);
        this.searchTerm = searchTerm;
    }
    @Override
    public SearchTerm getValue() {
        return searchTerm;
    }
 }

自定义搜索单元格（在自定义标题中使用）

当用户在SearchBox中键入内容时， isChanged 布尔标志设置为 true ，如果SearchBox丢失，则设置回 false 它的重点。我添加了这个标志，以便区分哪个SearchBox获得焦点（如果我使用多个SearchBox）

public static class SearchCell extends AbstractCell<SearchTerm> {

    interface Template extends SafeHtmlTemplates {
        @Template("<div style=\"\">{0}</div>")
        SafeHtml header(String columnName);

        @Template("<div style=\"\"><input type=\"text\" value=\"{0}\"/></div>")
        SafeHtml input(String value);
    }

    private static Template template;
    private boolean isChanged = false;

    public SearchCell() {
        super("keydown","keyup","change","blur");
        if (template == null) {
            template = GWT.create(Template.class);
        }
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
        SearchTerm value, SafeHtmlBuilder sb) {
        sb.append(template.header(value.getCriteria().toString()));
        sb.append(template.input(value.getValue()));
    }

    @Override
    public void onBrowserEvent(Context context,Element parent, SearchTerm value,NativeEvent event,ValueUpdater<SearchTerm> valueUpdater) {
        if (value == null)
            return;
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if ("keyup".equals(event.getType()))
        {
            isChanged = true;
            InputElement elem = getInputElement(parent);
            value.setValue(elem.getValue());
            if (valueUpdater != null)
                valueUpdater.update(value);
        }
        else if ("blur".equals(event.getType())) {
            isChanged =false;
        }
     }

     protected InputElement getInputElement(Element parent) {
         Element elem = parent.getElementsByTagName("input").getItem(0);
         assert(elem.getClass() == InputElement.class);
         return elem.cast();
     }
}

CellTable的初始代码

NameColumn 是具有相应类型的抽象列类的实现。它在内部使用 TextCell 。

ValueUpdater<SearchTerm> searchUpdater = new ValueUpdater<SearchTerm>() {
    @Override
    public void update(AccessionCellTableColumns.SearchTerm value) {
        // fires a server request to return the new filtered list
        RangeChangeEvent.fire(table, new Range(table.getPageStart(), table.getPageSize())); 
    }
};

table.addColumn(new NameColumn(searchTerm),new SearchHeader(searchTerm,searchUpdater));

Answer 1

在Blogger中，这些代码如下

<b:if  cond='data:blog.pageType == "static_page"'></b:if>

在Content that you want to show on static pages [1]

上了解更多

包含SearchBox和焦点问题的自定义标题的CellTable

自定义标题类

自定义搜索单元格（在自定义标题中使用）

CellTable的初始代码

1 个答案: