结合 table 排序和过滤

Question

我正在尝试使用 Richfaces 版本 3.3.3 创建 sortable table。我已经设法使用内置功能实现 table 排序和过滤。内置过滤不符合我的需求，所以我实现了外部过滤。

到目前为止，这是我在前端得到的：

<rich:dataTable value="#{publicServiceList.serviceList}"
                id="serviceTable" var="_service" rows="20" reRender="ds"
                sortMode="single"
                columnClasses="listItemLink, listItem, listeItem, listItemLink"
                headerClass="listHeader" rowClasses="odd, even"
                styleClass="listHeaderBackground">

<f:facet name="header">
    <rich:columnGroup>
        <rich:column>
            <h:outputText
                value="#{messages['public.page.service_A-Z.list.title.SERVICENAME']}" />
        </rich:column>
        <rich:column>
            <h:outputText
                value="#{messages['public.page.service_A-Z.list.title.DESCRIPTION']}" />
        </rich:column>
    </rich:columnGroup>
</f:facet>

<rich:column filterBy="#{_service.title}" filterEvent="onkeyup"
    filterValue="#{publicServiceList.currentTitleFilterValue}"
    sortBy="#{_service.title}">
    <s:link view="/public/PublicService.xhtml"
        value="#{_service.title}" propagation="none"
        id="publicServiceView">
        <f:param name="serviceId" value="#{_service.id}" />
    </s:link>
</rich:column>

<rich:column filterMethod="#{publicServiceList.filterDescription}">
    <f:facet name="header">
        <h:inputText
            value="#{publicServiceList.currentDescriptionFilterValue}"
            id="input">
            <a4j:support event="onkeyup" reRender="serviceTable , ds"
                ignoreDupResponses="true" requestDelay="700"
                oncomplete="setCaretToEnd(event);" />
        </h:inputText>
    </f:facet>
    <h:outputText value="#{_service.shortDescription}" />
</rich:column>

<f:facet name="footer">
    <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
</f:facet>

此代码生成以下内容：

过滤和排序工作得很好，但是在使用 columnGroup 元素时布局似乎不起作用，而且在混合和匹配 columnGroup 元素中的 filterValue/filterBy 属性时我无法让它工作或个别列。

当我只使用内置过滤和排序时，它是这样的：

<rich:dataTable value="#{publicServiceList.serviceList}"
            id="serviceTable" var="_service" rows="20" reRender="ds"
            sortMode="single"
            columnClasses="listItemLink, listItem, listeItem, listItemLink"
            headerClass="listHeader" rowClasses="odd, even"
            styleClass="listHeaderBackground">

<rich:column filterBy="#{_service.title}" filterEvent="onkeyup"
    filterValue="#{publicServiceList.currentTitleFilterValue}"
    sortBy="#{_service.title}">
    <f:facet name="header">
        <h:outputText
            value="#{messages['public.page.service_A-Z.list.title.SERVICENAME']}" />
    </f:facet>
    <s:link view="/public/PublicService.xhtml"
        value="#{_service.title}" propagation="none"
        id="publicServiceView">
        <f:param name="serviceId" value="#{_service.id}" />
    </s:link>
</rich:column>

<rich:column filterBy="#{_service.description}"
    filterEvent="onkeyup"
    filterValue="#{publicServiceList.currentDescriptionFilterValue}"
    sortBy="#{_service.shortDescription}">
    <f:facet name="header">
        <h:outputText
            value="#{messages['public.page.service_A-Z.list.title.DESCRIPTION']}" />
    </f:facet>
    <h:outputText value="#{_service.shortDescription}" />
</rich:column>

<rich:column filterBy="#{_service.keywordString}"
    filterEvent="onkeyup"
    filterValue="#{publicServiceList.currentKeywordFilterValue}"
    sortBy="#{_service.keywordString}">
    <f:facet name="header">
        <h:outputText
            value="#{messages['public.page.service_A-Z.list.title.KEYWORDS']}" />
    </f:facet>
    <h:outputText value="#{_service.keywordString}" />
</rich:column>

<rich:column filterBy="#{_service.organization}"
    filterEvent="onkeyup"
    filterValue="#{publicServiceList.currentOrganizationFilterValue}"
    sortBy="#{_service.organization}">
    <f:facet name="header">
        <h:outputText
            value="#{messages['public.page.service_A-Z.list.title.ORGANIZATION']}" />
    </f:facet>
    <s:link view="/public/PublicOrganization.xhtml"
        value="#{_service.organization.organizationName}"
        propagation="none" id="publicOrganizationView">
        <f:param name="organizationId"
            value="#{_service.organization.organizationId}" />
    </s:link>
</rich:column>

<f:facet name="footer">
    <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
</f:facet>

这是上面jsf的结果。我希望我的第一个解决方案像这样显示，但这似乎不可能，因为我无法在我的方面声明两个子元素。实现外部过滤需要我自己添加用于过滤的inputText元素和用于显示列名称的outputText。

这种方法的唯一缺陷是内置过滤器有限：

This is built-in feature. It uses "startsWith" function to make filtering.

Source

有什么过滤排序的方法吗？我没有管理外部+外部或外部/内置。有什么方法可以覆盖内置过滤器的功能，改用 "containsIgnoreCase" 函数吗？

如有任何帮助，我们将不胜感激。如果您需要更多信息，请提醒我。我使用这两个例子作为我的来源：

Answer 1

这是我的最终解决方案。它完成了工作，但它并不漂亮。为简洁起见，我删除了所有其他列。这样做的原因是：

Using built-in filtering is limited to startsWith()
混合外部筛选和 built-in 排序使 inputText 表现为 header 的一部分，这意味着单击它会使它失去焦点，而是对整个列进行排序。
External sorting requires you to set selfSort to false, and use an external sorting component. 这不是我想要实现的目标。

为了理解我所说的 built-in 和外部的意思，这两个示例在顶部包含带有两个示例的选项卡： - Table Sorting - Table Filtering

<h:form>
<rich:dataTable
    columnClasses="listItemLink, listItem, listItem, listItemLink"
    styleClass="listHeaderBackground" headerClass="listHeader">
    <rich:column>
        <f:facet name="header">
            <h:inputText
                value="#{publicServiceList.currentTitleFilterValue}">
                <a4j:support event="onkeyup" reRender="serviceTable , ds"
                    ignoreDupResponses="true" requestDelay="200"
                    oncomplete="setCaretToEnd(event);" />
            </h:inputText>
        </f:facet>
    </rich:column>
</rich:dataTable>

<rich:dataTable value="#{publicServiceList.serviceList}"
    id="serviceTable" var="_service" rows="20" reRender="ds"
    sortMode="single"
    columnClasses="listItemLink, listItem, listItem, listItemLink"
    headerClass="listHeader" rowClasses="odd, even"
    styleClass="listHeaderBackground">

    <rich:column
        filterExpression="#{fn:containsIgnoreCase(_service.title, publicServiceList.currentTitleFilterValue)}"
        sortBy="#{_service.title}">
        <f:facet name="header">
            <h:outputText
                value="#{messages['public.page.service_A-Z.list.title.SERVICENAME']}" />
        </f:facet>
        <s:link view="/public/PublicService.xhtml"
            value="#{_service.title}" propagation="none"
            id="publicServiceView">
            <f:param name="serviceId" value="#{_service.id}" />
        </s:link>
    </rich:column>
</rich:dataTable>
</h:form>

最终输出：

希望这对某人有所帮助。

结合 table 排序和过滤

Combining table sorting and filtering

sorting

jsf

filter

richfaces