10

我在页面上有一个按钮,可以通过 AJAX 请求刷新我的数据表。像这样的东西:

<h:form id="datatable">
<p:dataTable/>
</h:form>
<p:commandButton update=":datatable">

这一切都很好,除了当表被刷新时它恢复为不排序任何东西,同时仍然显示它是根据前一个值排序的。换句话说,标题仍然突出显示,箭头仍然指向排序方向,但实际上没有执行排序。显然这并不理想。

理想情况下,我希望组件将其排序顺序保持在视图状态,然后在 AJAX 请求期间提交正确的参数(以便正确定义排序)。我错过了一个参数还是什么?还有其他人有这个问题吗?

据我所知,表格何时需要排序,它会发布以下选项:

<componentID>_sortDir
<componentID>_sortKey
<componentID>_sorting
<componentID>_updateBody

当我刷新表单时,这不会发生。如果我只是刷新表格也不会发生(我想我可以通过直接更新组件来解决问题)。有没有办法让表格正确刷新?

4

8 回答 8

10

我为@truemmer 的解决方案写了一个扩展。他将排序顺序恢复为默认值,而我的排序顺序将恢复为用户选择的先前排序。

function postAjaxSortTable(datatable)
{
    var selectedColumn = datatable.jq.find('.ui-state-active');
    if(selectedColumn.length <= 0)
    {
        return;
    }
    var sortorder = "ASCENDING";
    if(selectedColumn.find('.ui-icon-triangle-1-s').length > 0)
    {
        sortorder = "DESCENDING";
    }
    datatable.sort(selectedColumn, sortorder);
}

像这样更新与 truemmer 作品相同的表:

<p:commandButton value="refresh" action="#{tableController.refreshPrices}" update="myTable" oncomplete="postAjaxSortTable(myTableWidget)" />

编辑:Primefaces 4.0 MultiSort 支持

function postAjaxSortTable(datatable) {
    var selectedColumn = undefined;

    // multisort support
    if(datatable && datatable.cfg.multiSort) {
        if(datatable.sortMeta.length > 0) {
            var lastSort = datatable.sortMeta[datatable.sortMeta.length-1];
            selectedColumn = $(document.getElementById(lastSort.col));
        }
    } else {
        selectedColumn = datatable.jq.find('.ui-state-active');
    }

    // no sorting selected -> quit
    if(!selectedColumn || selectedColumn.length <= 0) {
        return;
    }

    var sortorder = selectedColumn.data('sortorder')||"DESCENDING";
    datatable.sort(selectedColumn, sortorder, datatable.cfg.multiSort);
}
于 2013-03-21T18:08:26.820 回答
5

首先,PrimeFaces 问题跟踪器上有一张未解决的票,它针对这个问题,但最近被标记为“不会修复”。

不过,我找到了一个很好的解决方法。PrimeFaces 表的排序可以通过在数据表的小部件上调用未记录的 JavaScript 方法来触发。以下可能不适用于 PrimeFaces 的未来版本,但适用于 3.4.2:

只需将以下内容添加到您的组件中,即可触发更新:

oncomplete="myTableWidget.sort($(PrimeFaces.escapeClientId('#{p:component('sortColumnId')}')), 'ASCENDING')"

该表可能如下所示:

<p:dataTable id="myTable"
             widgetVar="myTableWidget"
             value="#{myArticles}"
             var="article"
             sortBy="#{article.price}"
             sortOrder="ASCENDING">
    ...

    <p:column id="price" sortBy="#{article.price}">
        <f:facet name="header">
            <h:outputText value="Price" />
        </f:facet>
        <h:outputText value="#{article.price}" />
    </p:column>

</p:dataTable>

所以更新表格可以像这样工作。

<p:commandButton value="refresh" action="#{tableController.refreshPrices}" update="myTable" oncomplete="myTableWidget.sort($(PrimeFaces.escapeClientId('#{p:component('price')}')), 'ASCENDING')" />
于 2013-01-17T09:41:59.720 回答
3

编辑:

下面发布的解决方案 (LazyTable) 适用于支持 LazyDataModel 的 p:dataTable。在所需表的每次更新/刷新后调用重写的加载方法,并正确处理排序。简单 p:dataTable 的问题在于它仅在第一次加载时或单击排序列后执行预定义的排序。这是简单表的正常行为。

那么简单表的可能性是什么:

  • 更新后不要对表进行排序,而是删除排序列,这样最终用户就不会被误传。将此添加到更新按钮的操作侦听器或操作方法中:

    UIComponent table  = FacesContext.getCurrentInstance().getViewRoot().findComponent(":dataTablesForm:dataTableId");
    table.setValueExpression("sortBy", null);
    
  • 通过脚本手动更新表格的排序。这不是最好的解决方案,但 primefaces 不提供任何客户端功能来“重新排序”表。基本上您知道一次只能对一列进行排序,并且该列有一个 .ui-state-active。您可以在脚本中使用它并在该列上触发 2 次单击(1. 单击 - 其他排序顺序,2. 单击 - 返回当前排序顺序)。

     <h:form id="mainForm">  
    <div id="tableDiv">
       <p:dataTable id="dataTable" var="item" value="#{testBean.dummyItems}">
          .
          .
          .
       </p:dataTable> 
       <p:commandButton value="Refresh" oncomplete="refreshSort();" update=":mainForm:dataTable"/>
     </div>
    

    和脚本功能:

    function refreshSort(){
    jQuery('#tableDiv').find('.ui-state-active').trigger('click');
    jQuery('#tableDiv').find('.ui-state-active').trigger('click');
    }
    

我知道这不是最好的解决方法,但它确实有效。你可以用它作为灵感,让事情变得更好。

懒表

恕我直言,最合适的方法是直接更新您想要的组件。例如:

<h:form id="dataTableForm">
  <p:dataTable id="dataTableToUpdate">
    .
    .
    .
  </p:dataTable>
  <p:commandButton value="Refresh" update=":dataTableForm:dataTableToUpdate" />
</h:form>

在这种情况下它应该可以正常工作(我想这是您的目的):使用 p:dataTable 打开 .xhtml,对某些列进行排序(保持 facelet 打开),例如从另一个 .xhtml 更新 dataTables 数据,单击刷新按钮. dataTable 应该以正确的(先前选择的)排序顺序显示您的附加值 - 排序是在更新后执行的。

希望它有所帮助!

于 2012-04-08T15:21:07.020 回答
1

将此 PhaseListener 添加到您的应用程序中,并且在更新 DataTable 后将保留排序和过滤。

public class DataTableUpdatePhaseListener implements PhaseListener {

    private static final long serialVersionUID = 1L;

    @Override
    public void afterPhase(PhaseEvent event) {
        // Nothing to do here
    }

    @Override
    public void beforePhase(PhaseEvent event) {
        FacesContext facesContext = event.getFacesContext();
        if (!facesContext.isPostback()) {
            return;
        }

        PartialViewContext partialViewContext = facesContext.getPartialViewContext();
        if (partialViewContext != null) {
            Collection<String> renderIds = partialViewContext.getRenderIds();

            for (String renderId : renderIds) {
                UIComponent component = facesContext.getViewRoot().findComponent(renderId);
                if (component instanceof DataTable) {
                    DataTable table = (DataTable) component;
                    if (!table.isLazy()) {
                        updateDataTable(table);
                    }
                }
            }
        }
    }

    @Override
    public PhaseId getPhaseId() {
        return PhaseId.RENDER_RESPONSE;
    }

    private void updateDataTable(DataTable table) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        if (facesContext == null || table == null) {
            return;
        }

        // Reapply filtering
        if (!table.getFilters().isEmpty()) {
            FilterFeature filterFeature = new FilterFeature();
            filterFeature.decode(facesContext, table);
        } else {
            table.setFilteredValue(null);
        }

        // Reapply sorting
        ValueExpression tableSortByVE = table.getValueExpression("sortBy");
        if (tableSortByVE != null) {
            String tableSortByExpression = tableSortByVE.getExpressionString();

            // Loop on children, that are the columns, to find the one whose order must be applied.
            for (UIComponent child : table.getChildren()) {
                Column column = (Column) child;
                ValueExpression columnSortByVe = column.getValueExpression("sortBy");
                if (columnSortByVe != null) {
                    String columnSortByExpression = columnSortByVe.getExpressionString();

                    if (tableSortByExpression != null && tableSortByExpression.equals(columnSortByExpression)) {
                        // Now sort table content
                        SortFeature sortFeature = new SortFeature();
                        sortFeature.sort(facesContext, table, tableSortByVE,
                                SortOrder.valueOf(table.getSortOrder().toUpperCase(Locale.ENGLISH)),
                                table.getSortFunction());

                        break;
                    }
                }
            }
        }
    }
}

这适用于非惰性数据表。使用惰性模型的数据表不需要这样做,因为惰性模型将负责排序和过滤。对于非惰性数据表,这应该适用于单列和多列排序,但 Primefaces 中存在一个错误,导致 DataTable 在更新表时在回发之间失去其 MultiSortMeta。这意味着在回发之前选择用于排序的列完全从 FacesContext 和组件状态中丢失,并且在回发时无法再检索。如果我设法找到解决方法,或者 Primefaces 很快会修复它,我稍后会对此进行更多研究并提供更新。

于 2013-09-23T07:27:45.417 回答
0

我和你有同样的问题。我能够使用LazyDataModel解决问题。由于行索引的 PrimeFaces 问题,我需要添加额外的 UtilitiesLazyDataModel(请参阅行索引注释):

public abstract class UtilitiesLazyDataModel <T> extends LazyDataModel<T>{

    public UtilitiesLazyDataModel() {
    }    

    @Override
    public void setRowIndex(int rowIndex) {
        /*
         * The following is in ancestor (LazyDataModel):
         * this.rowIndex = rowIndex == -1 ? rowIndex : (rowIndex % pageSize);
         */
        if (rowIndex == -1 || getPageSize() == 0) {
            super.setRowIndex(-1);
        } else {
            super.setRowIndex(rowIndex % getPageSize());
        }      
    }
}

然后使用你的LazyDataModel类:

public class MyDataModel extends UtilitiesLazyDataModel<MyObjectClass>{

//override getRowData and getRowKey

}
于 2013-03-21T21:42:06.203 回答
0

@Rares Oltean 的方法也可以使用 preRenderView 事件监听器来实现。在您的 jsf 页面上注册侦听器:

<f:event listener="#{managedBean.preRenderViewListener}" type="preRenderView" />

并在 ManagedBean 中实现它:

public void preRenderViewListener() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    if (!facesContext.isPostback()) {
        return;
    }

    PartialViewContext partialViewContext = facesContext.getPartialViewContext();
    if (partialViewContext != null) {
        Collection<String> renderIds = partialViewContext.getRenderIds();

        for (String renderId : renderIds) {
            UIComponent component = facesContext.getViewRoot().findComponent(renderId);
            if (component instanceof DataTable) {
                DataTable table = (DataTable) component;
                if (!table.isLazy()) {
                    updateDataTable(table);
                }
            }
        }
    }
}

private void updateDataTable(DataTable table) {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    if (facesContext == null || table == null) {
        return;
    }
    if (!table.getFilters().isEmpty()) {
        FilterFeature filterFeature = new FilterFeature();
        filterFeature.decode(facesContext, table);
    } else {
        table.setFilteredValue(null);
    }
    ValueExpression tableSortByVE = table.getValueExpression("sortBy");
    if (tableSortByVE != null) {
        String tableSortByExpression = tableSortByVE.getExpressionString();
        for (UIComponent child : table.getChildren()) {
            Column column = (Column) child;
            ValueExpression columnSortByVe = column.getValueExpression("sortBy");
            if (columnSortByVe != null) {
                String columnSortByExpression = columnSortByVe.getExpressionString();
                if (tableSortByExpression != null && tableSortByExpression.equals(columnSortByExpression)) {
                    SortFeature sortFeature = new SortFeature();
                    sortFeature.sort(facesContext, table, tableSortByVE, table.getVar(),
                            SortOrder.valueOf(table.getSortOrder().toUpperCase(Locale.ENGLISH)),
                            table.getSortFunction());
                    break;
                }
            }
        }
    }
}
于 2015-04-03T13:26:14.000 回答
0

解决方案是拥有一个会话 bean。在这种情况下,p:dataTable 会刷新表及其条目,而不影响排序顺序。如果您在每一行上都有 ap:commandButton ,则表格刷新也可以正常工作。

会话 bean:

@Named
@Stateful
@ConversationScoped
public class ItemBean {

    @Inject
    private Conversation conversation;

    private List<Item> items;

    public List<Item> getItems() {
        return this.items;
    }

    public void retrieve() {
        // if it's an Ajax call then avoid retrieving items
        if (FacesContext.getCurrentInstance().isPostback()) {
            return;
        }
        // start a conversation
        if (this.conversation.isTransient()) {
            this.conversation.begin();
        }
        this.items = retrieveItems();
    }
}

相关页面:

<f:metadata>
    <f:event type="preRenderView" listener="#{itemBean.retrieve}" />
</f:metadata>

<h:form id="form">
    <p:dataTable id="table" var="_item" value="#{testBean.items}">
    ... <!-- you can have the p:commandButton in a column too, to refresh the respective column only
        <p:commandButton value="Refresh" action="#{itemBean.update(_item)}" 
        -->
    </p:dataTable> 
    <p:commandButton value="Refresh" action="#{itemBean.update}" update=":form:table"/>
</h:form>
于 2012-05-13T21:38:56.657 回答
0

我用我的 toString() 方法实现了一个比较器

municipios = municipioFacade.findAll();
Collections.sort(municipios, new DefaultComparator());
UIComponent table = FacesContext.getCurrentInstance().getViewRoot().findComponent(":municipios:municipios-tabla");
    table.setValueExpression("sortBy", null);

比较器

public class DefaultComparator implements Comparator {

    @Override
    public int compare(Object o1, Object o2) {
        return o1.toString().compareToIgnoreCase(o2.toString());
    }
}
于 2012-05-02T18:40:24.853 回答