如何在 p:rowExpansion 中更新 p:dataTable

Question

在我的项目中，我交织了 2 个数据表。我想在第一个数据表的行展开时更新第二个数据表。

<h:form id="form2">
     <p:dataTable var="modules" value="#{EVMView.allModules}" id="mydatatable"> 
        <f:facet name="header">
            Modules
        </f:facet>
        <p:column style="width:2rem">
            <p:rowToggler/>
        </p:column>
        <p:column headerText="Module">
            <h:outputText value="#{modules}"/>
        </p:column>
        
         <p:rowExpansion>
            <div class="product">
                 <p:dataTable var="questions" value="#{EVMView.allQuestions}" id="mydatatable2"> 
                    <p:column style="width:2rem">
                        <p:rowToggler/>
                    </p:column>
                    <p:column headerText="Question">
                        <h:outputText value="#{questions}"/>
                    </p:column>
                    
                    <p:rowExpansion>
                    
                    </p:rowExpansion>
                 </p:dataTable>
            </div>
         </p:rowExpansion>
     </p:dataTable>
</h:form>

当我展开 mydatatable 的行时，我没有看到 mydatatable2 中的值。

所以我知道我也必须更新 mydatatable2，但我找不到如何做。

EDİT

根据@Jasper 的回答，我在我的 bean 中添加了 ViewScoped，并在我的第一个数据表中添加了这个 ajax。

<p:ajax event="rowToggle" listener="#{EVMView.updateTable2()}"/>

我的bean是这样的

package com.utc.pw.ui;

import java.util.List;

import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.PrimeFaces;

import com.utc.pw.domain.EVMOptions;
import com.utc.pw.domain.EVMQuestions;
import com.utc.pw.domain.SalesOrder;
import com.utc.pw.service.EVMService;
import com.utc.pw.service.PublicService;

@ManagedBean(name="EVMView")
@ViewScoped
public class EVMView {
    @EJB
    private PublicService publicService;
    @EJB
    private EVMService evmService;
    
    private EVMQuestions evmQuestions=new EVMQuestions();
    
    private String strSO;
    private List<SalesOrder> salesOrders;
    private List<String> allModules;
    private List<EVMQuestions> allQuestions;
    private String selectedOption;
    private List<EVMOptions> optionList;
    private String answer;
    
    public String getAnswer() {
        return answer;
    }
    public void setAnswer(String answer) {
        this.answer = answer;
    }
    public List<EVMOptions> getOptionList() {
        return optionList;
    }
    public void setOptionList(List<EVMOptions> optionList) {
        this.optionList = optionList;
    }
    public String getSelectedOption() {
        return selectedOption;
    }
    public void setSelectedOption(String selectedOption) {
        this.selectedOption = selectedOption;
    }
    public List<EVMQuestions> getAllQuestions() {
        return allQuestions;
    }
    public void setAllQuestions(List<EVMQuestions> allQuestions) {
        this.allQuestions = allQuestions;
    }
    public PublicService getPublicService() {
        return publicService;
    }
    public void setPublicService(PublicService publicService) {
        this.publicService = publicService;
    }
    public EVMService getEvmService() {
        return evmService;
    }
    public void setEvmService(EVMService evmService) {
        this.evmService = evmService;
    }
    public EVMQuestions getEvmQuestions() {
        return evmQuestions;
    }
    public void setEvmQuestions(EVMQuestions evmQuestions) {
        this.evmQuestions = evmQuestions;
    }
    public String getStrSO() {
        return strSO;
    }
    public void setStrSO(String strSO) {
        this.strSO = strSO;
    }
    public List<SalesOrder> getSalesOrders() {
        return salesOrders;
    }
    public void setSalesOrders(List<SalesOrder> salesOrders) {
        this.salesOrders = salesOrders;
    }
    public List<String> getAllModules() {
        return allModules;
    }
    public void setAllModules(List<String> allModules) {
        this.allModules = allModules;
    }
    @PostConstruct
    public void init()  {
        this.salesOrders = publicService.getAllSalesOrders();
        
    }
    public void loadModules()
    {
        this.allModules=evmService.getAllModules(strSO);
        this.allQuestions=evmService.getAllQuestions(strSO);
        PrimeFaces.current().ajax().update("form2:mydatatable");
        //PrimeFaces.current().ajax().update("form3:mydatatable2");
    }
    public void updateTable2()
    {
        PrimeFaces.current().ajax().update(":mydatatable2");
    }
    public List<EVMOptions> options(String module,int questionID)
    {
        this.optionList=evmService.getOptions(strSO, module, questionID);
        
        return optionList;
    }
}

Answer 1

展开时不需要更新 p:rowExpansion 中的 table，因为它默认是延迟加载的。您需要做的是确保 child p:dataTable value="#{...}" 设置正确。为此，请在外部 p:dataTable 上添加一个侦听器，并根据展开的行设置模型。您将需要使用 rowToggle event, which takes a ToggleEvent 作为参数。

因为你的 table 有多行模块，你的 bean 中应该有模型，它可以包含多个模块，比如 Map 以模块 ID 为键，问题为价值。在您的 rowToggle 处理程序中添加模块条目。

还要确保您的 bean 至少 ViewScoped。

另请参阅：

https://primefaces.github.io/primefaces/10_0_0/#/components/ajaxbehavior
How to choose the right bean scope?

如何在 p:rowExpansion 中更新 p:dataTable

How to update p:dataTable in p:rowExpansion

jsf

primefaces

primefaces-datatable