如何禁用对 Primefaces 惰性数据表的排序？答案

【问题标题】：How to disable sorting on Primefaces lazy datatable?如何禁用对 Primefaces 惰性数据表的排序？
【发布时间】：2018-08-18 23:46:04
【问题描述】：

我有一个带有惰性数据模型和分页的数据表。我想在单击“搜索”按钮时禁用默认排序，并在单击“显示”按钮时再次启用它。所以没有将“sortBy”放在我的 xhtml 文件中，而是在我的支持 bean 中动态设置它。

在我单击标题以在降序和升序之间翻转排序顺序之前，一切正常。这意味着如果我不点击标题，“搜索”按钮会禁用排序，“显示”按钮会正确启用它。但是当我单击标题然后单击“搜索”按钮时，在 LazyDataModel 的 load 函数中，参数 sortField 的值是 "date" 并且数据表将按日期排序，尽管“日期”列是明显没有上色！！

这是我的数据表：

<h:form id="contents-form">
...
    <p:dataTable id="tbl" widgetVar="tbl" var="msg" value="#{homeController.messagesModel}" lazy="true"
                 currentPageReportTemplate="سطر {startRecord}-{endRecord} از {totalRecords}"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 paginator="true" rows="10" rowsPerPageTemplate="5,10,15"
                 emptyMessage="هیچ پیامکی وجود ندارد."
                 selection="#{homeController.selectedMessages}" rowSelectMode="checkbox"
                 rowKey="#{msg.id}" filteredValue="#{homeController.filteredMessage}"
                 editable="true" editMode="cell"
                 style="width:100%" dir="rtl">

        <f:facet name="header">
            <p:commandButton value="خروجی" action="#{homeController.prepareExport}" icon="fa fa-save"
                             update="export-dlg-box" oncomplete="PF('exportDlgBox').show()"/>
            <p:commandButton value="واژگان" action="#{homeController.showListTermsChart}"
                             icon="fa fa-bar-chart" update="contents-form chart-form msgs"
                             oncomplete="PF('chartDlgBox').show()"/>
        </f:facet>

        <p:ajax event="cellEdit" listener="#{homeController.onCellEdit}" oncomplete="updateDescFilter()"/>

        <p:column selectionMode="multiple" style="width:16px;text-align:center"/>

        <p:column headerText="فرستنده" style="width:100px" filterBy="#{msg.sender.number}"
                  sortBy="#{msg.sender.number}">
            <p:commandLink action="#{homeController.setPhoneNumToShow(msg.sender)}" update="phone-form"
                           oncomplete="PF('phoneDlgBox').show()" styleClass="simple-command-link">
                <h:outputText value="#{msg.sender.number}"/>
            </p:commandLink>
        </p:column>

        <p:column headerText="گیرنده" style="width:100px" filterBy="#{msg.receiver.number}"
                  sortBy="#{msg.receiver.number}">
            <p:commandLink action="#{homeController.setPhoneNumToShow(msg.receiver)}" update="phone-form"
                           oncomplete="PF('phoneDlgBox').show()" styleClass="simple-command-link">
                <h:outputText value="#{msg.receiver.number}"/>
            </p:commandLink>
        </p:column>

        <p:column headerText="متن" sortBy="#{msg.text}">
            <h:outputText value="#{msg.getTrimmedText()}"/>
        </p:column>

        <p:column headerText="زمان" style="width:100px" filterBy="#{msg.date}" sortBy="#{msg.date}">
            <f:facet name="filter">
                <p:calendar pattern="yyyy-MM-dd">
                    <p:ajax event="dateSelect" oncomplete="PF('tbl').filter()" update="tbl"/>
                </p:calendar>
            </f:facet>
            <h:outputText value="#{msg.getJalaliDate()}"/>
        </p:column>

        <p:column headerText="منبع" style="width:70px" filterBy="#{msg.source}" sortBy="#{msg.source}">
            <f:facet name="filter">
                <p:selectOneMenu onchange="PF('tbl').filter()" style="width:30px; direction:ltr">
                    <f:selectItem itemLabel="همه" itemValue="#{null}" noSelectionOption="true"/>
                    <f:selectItems value="#{homeController.sources}" var="source"
                                   itemValue="#{source}" itemLabel="#{source}"/>
                </p:selectOneMenu>
            </f:facet>
            <h:outputText value="#{msg.source}"/>
        </p:column>

        <p:column headerText="توضیح" style="width:70px" filterBy="#{msg.description}"
                  sortBy="#{msg.description}">
            <f:facet name="filter">
                <p:selectOneMenu id="desc-filter-select" onchange="PF('tbl').filter()"
                                 style="width:30px; direction:ltr">
                    <f:selectItem itemLabel="همه" itemValue="#{null}" noSelectionOption="true"/>
                    <f:selectItems value="#{homeController.descriptions}" var="desc"
                                   itemValue="#{desc}" itemLabel="#{desc}"/>
                </p:selectOneMenu>
            </f:facet>
            <p:cellEditor>
                <f:facet name="output"><h:outputText value="#{msg.description}"/></f:facet>
                <f:facet name="input"> <p:inputText id="desc-input" value="#{msg.description}"
                                                    style="width:85%"/></f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="جزئیات" style="width:40px">
            <p:commandLink action="#{homeController.setMessageToShow(msg)}" ajax="true"
                           update="img-dlg-box" oncomplete="PF('imgDlgBox').show()">
                <i class="fa fa-blue fa-desktop"/>
            </p:commandLink>
        </p:column>

        <p:column headerText="مشاهده گفتگو" style="width:40px">
            <p:commandLink action="#{homeController.showConversation(msg.sender, msg.receiver)}"
                           ajax="true" update="conv-dlg-box" oncomplete="PF('convDlgBox').show()">
                <i class="fa fa-blue fa-wechat"/>
            </p:commandLink>
        </p:column>
    </p:dataTable>
</h:form>

我的“搜索”按钮：

<p:commandButton value="جست‌وجو" action="#{homeController.search}" update=":contents-form:tbl msgs"
                                     icon="fa fa-search"/>

我的“显示”按钮：

<p:commandButton value="نمایش" icon="fa fa-desktop" action="#{homeController.loadArchive}"
                 update="contents-form msgs"/>

支持 bean 中的search 方法：

public void search() {
    if (this.selectedArchive == null) {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, "خطا!", "لطفا یک مجموعه را انتخاب کنید"));
        return;
    }

    if ((this.textQuery != null && !this.textQuery.equals(""))
            || (this.selectedNodes != null && this.selectedNodes.length > 0)) {
        logger.info(String.format("searching '%s' in archive %d ...", this.textQuery, this.selectedArchive.getId()));
        List<String> selectedWords = this.getSelectedWords(this.selectedNodes);
        searchText(this.textQuery, selectedWords);
    } else {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, "خطا!", "برای جست‌وجو هیچ متنی وارد نشده و هیچ واژه‌ای انتخاب نشده است."));
        return;
    }

    extractChoices();

    // Disable default sorting:
    DataTable table = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent(":contents-form:tbl");
    table.setValueExpression("sortBy", null);
    table.setValueExpression("sortOrder", null);
}

以及支持 bean 中的 loadArchive 方法：

public void loadArchive() {
    if (this.selectedArchive == null) {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, "خطا!", "لطفا یک مجموعه را انتخاب کنید"));
        return;
    }
    this.messagesModel = new LazyMessageModel(this.selectedArchive, true, this.messageService);

    extractChoices();

    // Enable default sorting:
    FacesContext context = FacesContext.getCurrentInstance();
    ExpressionFactory ef = context.getApplication().getExpressionFactory();
    DataTable table = (DataTable) context.getViewRoot().findComponent(":contents-form:tbl");
    ValueExpression sortVe = ef.createValueExpression(context.getELContext(), "#{msg.date}", Message.class);
    table.setValueExpression("sortBy", sortVe);
    table.setSortOrder("descending");

    logger.info(String.format("archive %d loaded", (this.selectedArchive.getId())));
}

规格：

Primefaces 6.2
JSF 2.2.14
Java 1.8

【问题讨论】：

在服务器中禁用排序方式真的很重要吗？否则你可以只使用 CSS
@Kukeltje 我不想永久禁用排序。我只想禁用默认排序。我怎样才能仅通过 CSS 做到这一点？我认为使用 CSS 我可以禁用排序按钮。但我不能告诉数据表按我的顺序而不是任何列对行进行排序。
那我完全不明白你的问题。您似乎正在尝试解决会产生问题的问题，而您又试图解决问题。这听起来像xyproblem.info
@Kukeltje 感谢您介绍 xyproblem！很有意思！好的！我的第一个问题 (x) 是：“我想告诉数据表在单击搜索按钮时不要按任何列对行进行排序。单击显示按钮时按日期排序。”当然我的意思是默认排序。显示表格后，用户可以通过单击标题按任何列进行排序。任何能解决我的问题的前端或后端解决方案，我都会很高兴！
只需告诉messagesModel 按下了哪个按钮，然后根据它进行排序。

标签： primefaces primefaces-datatable

【解决方案1】：

我终于找到了一个干净的解决方案！只是我必须在点击“搜索”按钮后除了设置sortBy null 之外重新设置表格：

public void search() {
    // Do something ...
    DataTable table = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent(":contents-form:tbl");
    table.reset();
    table.setValueExpression("sortBy", null);
}

【讨论】：