Java GWT：将筛选添加到CellTable

我的任务是对GWT中显示的数据进行排序和过滤。 谢天谢地，GWT已经支持排序了，但看起来我必须修改我自己的过滤支持

更确切地说，我试图支持的功能与Excel提供的过滤功能类似，您可以单击列标题中的下拉菜单，然后（例如）单击复选框，该复选框将允许您根据过滤列的值过滤行。一幅画胜过千言万语：

我的问题：关于如何在GWT2.2中实现这一点，有什么建议吗？有可能吗

我考虑的一个选项是将自定义对象传递给CellTable.addColumn（）。如果可能的话，我会在标题中添加一个ClickHandler，然后打开一个弹出窗口，显示一个用于过滤的小部件。不确定如何在不影响排序行为的情况下实现此功能

欢迎提出任何建议

编辑：

感谢下面的John，我得到了下面的

FilterableHeader

类，它允许我至少在标题中放置一个图标。目前还不确定如何在该图标上获得ClickHandler，因为图像是通过HTML插入的，而不是使用GWT小部件

public class FilterableHeader extends Header<String>
{
    /**
     * Image resources.
     */
    public static interface Resources extends ClientBundle
    {
        ImageResource downArrow();
        ImageResource upArrow();
    }

    private static final Resources RESOURCES = GWT.create(Resources.class);
    private static final int IMAGE_WIDTH = 16;
    private static final String DOWN_ARROW = makeImage(RESOURCES.downArrow());
    private static final String UP_ARROW = makeImage(RESOURCES.upArrow());

    private static String makeImage(ImageResource resource)
    {
        AbstractImagePrototype proto = AbstractImagePrototype.create(resource);
        return proto.getHTML().replace("style='", "style='position:absolute;right:0px;top:0px;");
    }

    private String text;

    public FilterableHeader(String text)
    {
        super(new ClickableTextCell());
        this.text = text;
    }

    @Override
    public String getValue()
    {
        return text;
    }

    @Override
    public void render(Cell.Context context, SafeHtmlBuilder safe)
    {
        int imageWidth = IMAGE_WIDTH;

        StringBuilder sb = new StringBuilder();
        sb.append("<div style='position:relative;cursor:hand;cursor:pointer;");
        sb.append("padding-right:");
        sb.append(imageWidth);
        sb.append("px;'>");
        sb.append(UP_ARROW);
        sb.append("<div>");
        sb.append(text);
        sb.append("</div></div>");

        safe.append(SafeHtmlUtils.fromSafeConstant(sb.toString()));
    }
}

public类FilterableHeader扩展头
{
/**
*图像资源。
*/
公共静态接口资源扩展ClientBundle
{
ImageResource向下箭头（）；
ImageResource向上箭头（）；
}
私有静态最终资源Resources=GWT.create（Resources.class）；
专用静态最终整型图像_宽度=16；
私有静态最终字符串DOWN_ARROW=makeImage（RESOURCES.downarow（））；
私有静态最终字符串UP_ARROW=makeImage（RESOURCES.upArrow（））；
私有静态字符串makeImage（ImageResource资源）
{
AbstractImagePrototype proto=AbstractImagePrototype.create（资源）；
return proto.getHTML（）.replace（“style=”，“style='position:absolute；right:0px；top:0px；”）；
}
私有字符串文本；
公共FilterableHeader（字符串文本）
{
超级（新的ClickableTextCell（））；
this.text=文本；
}
@凌驾
公共字符串getValue（）
{
返回文本；
}
@凌驾
公共void呈现（Cell.Context，SafeHtmlBuilder-safe）
{
int imageWidth=图像宽度；
StringBuilder sb=新的StringBuilder（）；
某人加上（“”）；
某人追加（向上箭头）；
某人加上（“”）；
附加（正文）；
某人加上（“”）；
safe.append（SafeHtmlUtils.fromSafeConstant（sb.toString（））；
}
}

自定义标题与GWT 2.1一起用于排序。示例中使用了自定义标题，我使用自定义标题进行排序，直到Mvp4g移到2.2为止。要启用过滤，只需添加一个具有自己的单击处理程序的图像，您应该会做得很好-当单击它时，它不会触发排序行为，只会触发标题的其余部分

table.addColumn(new MyColumn(new MyCell()), new MyFilterHeader());

对于实际的过滤，如果您使用的是数据库模型（ListDataProvider的包装类），那么我认为您应该保留两个列表——分配给ListDataProvider的过滤列表和它所基于的未过滤列表

希望有帮助

---

---

在您的新示例代码中，您可能希望尝试一个包含ClickableTextCell的函数，以及一个用于过滤部分的函数-如果您可以将图像粘贴到ClickableTextCell中，您应该能够在ActionCell中添加图像，并且它将具有您想要的鼠标点击行为。

自定义标题是GWT 2.1用来进行排序的。示例中使用了自定义标题，我使用自定义标题进行排序，直到Mvp4g移到2.2为止。要启用过滤，只需添加一个具有自己的单击处理程序的图像，您应该会做得很好-当单击它时，它不会触发排序行为，只会触发标题的其余部分

table.addColumn(new MyColumn(new MyCell()), new MyFilterHeader());

对于实际的过滤，如果您使用的是数据库模型（ListDataProvider的包装类），那么我认为您应该保留两个列表——分配给ListDataProvider的过滤列表和它所基于的未过滤列表

希望有帮助

---

---

在新的示例代码中，您可能希望尝试一个包含ClickableTextCell的函数，以及一个用于过滤部分的函数-如果您可以将图像粘贴到ClickableTextCell中，您应该能够在ActionCell中，另外，它还具有您想要的鼠标点击行为。

我使用鼠标点击位置向列标题添加自定义点击事件。换句话说，您可以对其进行设置，以便如果用户单击图像应该位于的“常规区域”，您可以显示一个过滤屏幕

下面是一个示例，我让它忽略我添加的文本字段的单击事件：

        if(col.isFilterable()){
            if (event.getClientY() > (getInputElement(parent).getAbsoluteTop() - 2) && event.getClientY() < (getInputElement(parent).getAbsoluteBottom() + 2)) {
                //ignore on click in area of the text field
                event.preventDefault();
            } else {

---

我使用鼠标单击位置向列标题添加自定义单击事件。换句话说，您可以对其进行设置，以便如果用户单击图像应该位于的“常规区域”，您可以显示一个过滤屏幕

下面是一个示例，我让它忽略我添加的文本字段的单击事件：

        if(col.isFilterable()){
            if (event.getClientY() > (getInputElement(parent).getAbsoluteTop() - 2) && event.getClientY() < (getInputElement(parent).getAbsoluteBottom() + 2)) {
                //ignore on click in area of the text field
                event.preventDefault();
            } else {

---

我开发的业务应用程序中，典型的数据库查询可能返回数百行或数千行。用户发现类似excel的过滤器和列排序非常有用

因此，我实现了一个扩展ListDataProvider的类，用于支持客户端excel之类的列过滤和排序的CellTable。在所有其他方面，它的行为非常类似于ListDataProvider

这取决于实现以下ColumnAccessor接口，为CellTable中的每一列提供符号名称，为排序和筛选提供对列级数据的访问，为排序列提供比较器，并为标题显示标签。下面是ColumnAccessor类。它假定您有某种类型的数据传输对象来对行进行建模

/**
 * Interface to provide access to a specific
 * column within a data row.
 * @param <T> Object that contains the column
 *  values in a cell table row. Typically a Data Transfer Object.
 */
public interface ColumnAccessor<T> {
    /**
     * Filter display value for blank/null column values
     */
    public final String FILTER_SELECTOR_BLANK = "{Blank}";
    /**

     * Returns A row-unique symbolic name for the column. This name is
     * used as a Map key to access the ColumnAccessor instance by
     * name for filtering and sorting.
     * @return
     */
    public String getColumnName();

    /**
     * Returns text label to appear as column header in CellTable.
     * @return
     */
    public String getLabel();

    /**
     * Returns value of the column as a String
     * @param t Object that models the column values in a
     *          cell table row (Typically a Data Transfer Object)
     * @return
     */
    public String getValue(T t);

    /**
     * Returns Comparator for sorting data rows and for sorting
     * discrete values that appear in a filter's select/option list.
     * While the getValue() method always returns a String,
     * these comparators should sort the column's values in
     * consideration for the data type (for example, dates sorted
     * as dates, numbers sorted as numbers, strings sorted as strings).
     * @return
     */
    public Comparator comparator();

}

/**
*接口，以提供对