PrimeFaces，无法更新选项卡禁用属性

Question

当用户使用rowEditor编辑dataTable时，我需要更新选项卡的禁用属性
我在dataTable中有一个ajax标记在侦听event="rowEdit"，它调用一个backingbean方法，该方法将选项卡的disabled属性设置为true
如果我在update=”:tabView”中仅引用具有tabView id的选项卡组，则选项卡将更新，但只有dataTable的编辑行呈现为没有网格线。如果我引用update=”:tabView:tab” ID中的选项卡，dataTable会显示良好，但选项卡的disabled属性不会
正在更新的选项卡与正在编辑的dataTable不在同一选项卡中
数据表在rates选项卡中，我试图更新的选项卡是tbVSelRates

<p:tab id="rates" title="Select Rates" >
    <p:panelGrid id="pnlMultiDealUpdate"  header="Select Product Rates for Multipule Deal Update" style="margin-top:10px; border: 2px" >
        <p:row>
            <p:column>
                <h:form id="frmSRDealRates" method="post" action="">
                    <p:outputLabel id="lblRateAgreed" for="txtRateAgreed" value="#{msgs['srDeal.rates.agreed']}:"/>
                    <p:inputText id="txtRateAgreed" value="#{dealManagedBean.txtRateAgreedVal}" style="width:40px;" readonly="#{dealManagedBean.readOnly}"/> %
                    <p:outputLabel id="lblRateCat" for="pklRateCat" value="#{msgs['srDeal.rates.cat']}:"/>
                    <p:pickList id="pklRateCat" value="#{dealManagedBean.rateCats}" var="cat" itemLabel="#{cat}" itemValue="#{cat}" disabled="#{dealManagedBean.readOnly}"/>
                    <p:commandButton id="btnApply" value="#{msgs['srDeal.rates.btn.apply']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
                                        actionListener="#{dealManagedBean.applyChangesMultiUpdate}" process="frmSRDealRates" update="productsTable,:tbVUpdateDeals"
                                        /> &nbsp;
                    <p:commandButton id="btnUndo" value="#{msgs['srDeal.rates.btn.undo']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
                                        onstart="return confirm('Are you sure that you want to undo all recent changes?nDoing so will remove all rates.');"
                                        actionListener="#{dealManagedBean.undoMultiDealRateChanges}" process="frmSRDealRates" update="productsTable" />
                    <p:dataTable var="pr" value="#{dealManagedBean.products}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
                                    id="productsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
                                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                    rowsPerPageTemplate="10,50, 100, 1000">
                                                                                                <!-- process=":tbVUpdateDeals:frmSRDealRates" -->        
                        <p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}"  update=":tbVUpdateDeals:tbVSelRates" />
                        <f:facet name="header">
                            #{msgs['srDeal.rates.prod.header']}
                        </f:facet>
                        <p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}"  id="category"
                                    filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
                            <f:facet name="header" >
                                <h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
                            </f:facet> 
                            <h:outputText value="#{pr.category}" />
                        </p:column>
                        <p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}"  filterMatchMode="contains" id="molecule"
                                    width="180" filterStyle="width:160px">
                            <f:facet name="header" >
                                <h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
                            </f:facet>
                            <h:outputText value="#{pr.moleculeDescription}" />
                        </p:column>
                        <p:column headerText="#{msgs['srDeal.rates.prod.planrate']}" sortBy="#{pr.plannedRate}" id="plannedRateCellEdit" width="60">
                            <p:cellEditor id="massUpdateRate"  >
                                <f:facet name="output">
                                    <h:outputText value="#{pr.plannedRate}" id="otxtRate">
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> 
                                    </h:outputText>%
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{pr.plannedRate}" style="width:100%" label="plndRate" id="txtRate" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column width="35" exportable="false">  
                            <p:rowEditor/> 
                        </p:column>  
                    </p:dataTable>
                    <p:commandButton id="btnSelectRatesNext" value="Next" actionListener="#{dealManagedBean.goToConfirmRatesTab}" update=":tbVUpdateDeals" /> &nbsp;
                    <p:commandButton value="Cancel" onclick="window.location='salesRepHome.jsf'" style="width:75px;" />
                </h:form>
            </p:column>   
        </p:row>
    </p:panelGrid>
</p:tab>
<p:tab id="tbVSelRates" title="Confirm Rates" disabled="#{dealManagedBean.conRatesTabDisabled}">
    <h:form id="frmSelProdRates" >
        <p:panelGrid id="pnlConRates" columns="1">
            <p:dataTable var="pr" value="#{dealManagedBean.selectedUpdateProducts}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
                        id="dtSelProductsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="10,50, 100, 1000">
                <f:facet name="header">
                Confirm Selected Product Rates
                </f:facet>
                <p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}"  id="category"
                            filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
                    <f:facet name="header" >
                        <h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
                    </f:facet> 
                    <h:outputText value="#{pr.category}" />
                </p:column>
                <p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}"  filterMatchMode="contains" id="molecule"
                            width="180" filterStyle="width:160px">
                    <f:facet name="header" >
                        <h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
                    </f:facet>
                    <h:outputText value="#{pr.moleculeDescription}" />
                </p:column>
                <p:column headerText="Planned Rate"   sortBy="#{pr.plannedRate}" id="plannedRate" width="60">
                    <f:facet name="header" >
                        <h:outputText value="Planned Rate" />
                    </f:facet>
                    <h:outputText value="#{pr.plannedRate}" id="oTxtPlanedRate"> 
                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> 
                    </h:outputText>% 
                </p:column>
            </p:dataTable>
            <div style="float:left; margin-top:10px">
                <h:commandLink id="exAll" style="margin-left:10px;">  
                    <spacer width="5"/>   <h:outputText value="#{msgs['srDeal.bg.bgs.excelall']}" />  
                    <p:dataExporter type="xls" target="dtSelProductsTable" fileName="Product Rates for Mutil Deal Update"/>  
                </h:commandLink>  
            </div>
            <div style="margin-top:10px; float:right">
                <p:commandButton id="btnNextDeals" value="Next" actionListener="#{dealManagedBean.goToSelectDealsTab}" update=":tbVUpdateDeals"/>
            </div>
        </p:panelGrid>
    </h:form>
</p:tab>

PrimeFaces 3.4.2、JBoss 6.0.1 JSF 2.0希望这个帖子是对的，第一次在StackOverflow上发布问题感谢

  public void applyRowChangesMassUpdate(RowEditEvent event){
    DataTable dtRates = (DataTable) event.getSource();
    Product dtRow = (Product)dtRates.getRowData();
    logger.log(Level.FINE, "Molecule: {0}", dtRow.getMolecule());
    logger.log(Level.FINE, "Projected Sales: {0}", dtRow.getYtdProjectedSales());
    logger.log(Level.FINE, "Planned Rate: {0}", dtRow.getPlannedRate());
    if(dtRow.getPlannedRate()!= null && dtRow.getYtdProjectedSales() != null){
    dtRow.setPlannedPAProjected(new BigDecimal(0.01 *         dtRow.getYtdProjectedSales().doubleValue() * dtRow.getPlannedRate().doubleValue()));
    }
    logger.log(Level.FINE, "Planned PA Projected: {0}", dtRow.getPlannedPAProjected());
    conRatesTabDisabled = true;
    tabIndex = 1;
}

Answer 1

计划通过p:remoteCommand调用applyRowChangesMassUpdate并禁用选项卡使用PrimeFaces Javascript API。以下是如何做到的：

为p:dataTable指定一个widgetVar属性，例如dataTableWV。

<p:dataTable widgetVar="dataTableWV" value="..." var="...">

也给p:tabView一个widgetVar，例如tabViewWV。

<p:tabView widgetVar="tabViewWV">

将呼叫添加到applyRowChangesMassUpdate:

<p:remoteCommand name="applyRowChanges" actionListener="#{dealManagedBean .applyRowChangesMassUpdate}" />

然后使用这个脚本：

<script>
    $(document).ready(function() {
    //bind a function on table value changes
    dataTableWV.tbody.context.onchange = function() {
        //disable the tab you want by index, assuming the tab
        //is the second one, its index will be '1'
        tabViewWV.disable(1);
        //selects view back to the first tab.
        tabViewWV.select(0);
        //call the 'remoteCommand' function
        applyRowChanges();
    }
    });
</script>

这样，就不再需要rowEdit事件，所以只需删除

<p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}"  update=":tbVUpdateDeals:tbVSelRates" />

你也可以删除

conRatesTabDisabled = true;
tabIndex = 1;

从applyRowChangesMassUpdate方法，因为选项卡被禁用，视图被移动到另一个带有客户端代码的选项卡，当需要视图时，这比服务器端代码更好。