结合表格排序和过滤答案

【问题标题】：Combining table sorting and filtering结合表格排序和过滤
【发布时间】：2016-02-22 14:18:12
【问题描述】：

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

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

<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。

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

这是内置功能。它使用“startsWith”函数进行过滤。

Source

有什么方法可以过滤和排序吗？我没有使用外部+外部或外部/内置进行管理。有什么方法可以覆盖内置过滤器的功能以使用“containsIgnoreCase”函数吗？

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

【问题讨论】：

我不明白问题是什么，布局？还是排序/过滤不能一起工作？
@Makhiel 问题是我无法与内置排序一起实现外部过滤。如第一张图片所示，这显示不正确。当使用内置的排序和过滤（第二张图片）时，只需要在列标签中声明一些属性就完成了。但是，实现外部过滤需要我在 columnGroup 中声明我的列以设置标题名称（Tjänst/Description）。然后我必须在同一列中声明一个 inputText，并声明一个 sortBy 属性，它会以某种方式破坏布局。
“但是，实现外部过滤需要我在 columnGroup 中声明我的列以设置标题名称” - 没有这样的要求。
为什么不能把文本和输入放在一起呢？内置的就是这样。通过 columnGroup，我假设您的意思是表头，如果您想要其中的控件，则不能使用内置插件，因为它们与各个列相关联。
您可以使用onclick="Event.stop(event);" 来阻止触发排序，就像在other example 中所做的那样。

标签： sorting jsf filter richfaces

【解决方案1】：

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

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

为了理解我所说的内置和外部的含义，这两个示例在顶部包含选项卡以及两者的示例： - 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>

最终输出：

希望这对某人有所帮助。

【讨论】：