Question

我有一个页面（page1.xhtml），其中一个标签中包含tabView和dataTable。 dataTable使用延迟加载，应提供multisort模式。因此，我使用List<SortMeta>作为sortBy的{{1}}属性（Initial sortorder for PrimeFaces datatable with multisort）。

dataTable在List<SortMeta>中创建，但getPreSortOrder()为clientId findComponent()始终返回"myForm:tabs:data:colName"！

在另一个星座（page2.xhtml）中，我null不在tabView dataTable中，总是返回正确的列组件！

所以问题似乎是与tabView的结合？！

欢迎任何提示 - 谢谢！

page.xhtml：

findComponent()

page2.xhtml：

<html>
<f:metadata>
  <f:viewAction action="#{model.loadData}"/>
</f:metadata>
<ui:composition template="/WEB-INF/template.xhtml">
  <ui:define name="content">
    <h:form id="myForm">
    <p:panelGrid>...</p:panelGrid>
      <p:tabView id="tabs">
        <p:tab id="tab1">...</p:tab>
        <p:tab id="tab2">...</p:tab>
        <p:tab id="tab3">
          <p:dataTable id="data" lazy="true" 
                       value="#{model.personTableModel}" var="item" 
                       sortMode="multiple" sortBy="#{model.tableMode.preSortOrder}">
            <p:column id="colName" sortBy="#{item.name}"> // <-- findComponent for "myForm:tabs:data:colName" always returns null !!!
              <h:outputText value="#{item.name}"/>
            </p:column>
            <p:column id="colAddress" sortBy="#{item.address}">
              <h:outputText value="#{item.address}"/>
            </p:column>
          </p:dataTable>
        </p:tab>
      </p:tabView>
    </h:form>
   </ui:define>
  </ui:composition>
</html>

Model.java：

<html>
<f:metadata>
  <f:viewAction action="#{model.loadData}"/>
</f:metadata>
<ui:composition template="/WEB-INF/template.xhtml">
  <ui:define name="content">
    <h:form id="myForm">
    <p:panelGrid>...</p:panelGrid>
    <p:outputPanel id="tables">
      <p:fieldset>
        <p:dataTable id="data" lazy="true" 
                     value="#{model.personTableModel}" var="item" 
                     sortMode="multiple" sortBy="#{model.tableMode.preSortOrder}">
            <p:column id="colName" sortBy="#{item.name}"> // <-- findComponent for "myForm:data:colName" always component
              <h:outputText value="#{item.name}"/>
            </p:column>
            <p:column id="colAddress" sortBy="#{item.address}">
              <h:outputText value="#{item.address}"/>
            </p:column>
          </p:dataTable>
        <p:fieldset>
      </p:outputPanel>
    </h:form>
   </ui:define>
  </ui:composition>
</html>

PersonTableDataModel.java：

@Named // javax.inject.Named
@ViewScoped // javax.faces.view.ViewScoped
public class Model implements Serializable {

  private static final String COL_NAME_CLIENT_ID = "myForm:tabs:data:colName";
  @Inject PersonTableDataModel personTableDataModel; // with getter & setter

  public void loadData() {
    List<SortMeta> preSortOrder = getPreSortOrder(COL_NAME_CLIENT_ID, "name", SortOrder.ASCENDING);
    personTableDataModel.setPreSortOrder(preSortOrder);
  }

  private List<SortMeta> getPreSortOrder(String columnId, String sortField, SortOrder sortOrder) {
    UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
    UIComponent column = viewRoot.findComponent(columnId); // <-- ALWAYS RETURNS NULL
    if (Objects.isNull(column)) {
      return Collections.emptyList();
    }

    List<SortMeta> preSortOrder = new ArrayList<>();

    SortMeta sm = new SortMeta();
    sm.setSortBy((UIColumn) column);
    sm.setSortField(sortField);
    sm.setSortOrder(sortOrder);
    preSortOrder.add(sm);

    return preSortOrder;
  }
}

TableModel.java：

public class PersonTableDataModel extends TableModel<Person> {
}

我在Wildfly 10.0.0.Final上使用Primefaces 6.1

修改

我添加了一个TabChange事件监听器public class TableModel<T> extends LazyDataModel<T> { private List<SortMeta> preSortOrder; // with getter & setter }并遍历changeTab()，最后将正确的clientId写入输出？！

Model.java：

UIComponents

Answer 1

我通过这种解决方法解决了这个问题：

将IndexedRecord事件监听器添加到tabChange并更新数据表tabView
将data添加到标识为binding
为colName听众

preSortOrder

tableModel

page.xhtml：

onTabChange

Model.java：

<p:tabView id="tabs">
  <p:ajax event="tabChange" listener="#{model.onTabChange}" update="data"/>
  <p:tab id="tab1">...</p:tab>
  <p:tab id="tab2">...</p:tab>
  <p:tab id="tab3">
    <p:dataTable id="data" lazy="true" 
                 value="#{model.personTableModel}" var="item" 
                 sortMode="multiple" 
                 sortBy="#{model.personTableModel.preSortOrder}">
      <p:column id="colName" sortBy="#{item.name}" binding="#{mode.colName}"> 
      </p:column>
    </p:dataTable>
  </p:tab>
</p:tabView>

Primefaces tabView中多端口dataTable的初始排序顺序

1 个答案: