首页 文章

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

提问于
浏览
1

当用户使用rowEditor编辑dataTable时,我需要更新选项卡的disabled属性 .
我在dataTable中有一个ajax标记,它监听 event="rowEdit" ,它调用一个支持bean方法,将tab的disabled属性设置为true .
如果我仅使用tabView id引用选项卡组,如 update=”:tabView” ,则选项卡将更新,但只有dataTable的编辑行才会呈现,而不会显示网格线 . 如果我在 update=”:tabView:tab” ID中引用选项卡,则dataTable呈现正常,但选项卡的disabled属性不会 .
正在更新的选项卡与正在编辑的dataTable不在同一选项卡中 .
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;
}

1 回答

  • 0

    计划是通过 p:remoteCommand 调用 applyRowChangesMassUpdate 并使用PrimeFaces Javascript API禁用该选项卡 . 以下是它的完成方式:

    p:dataTable 提供 widgetVar 属性,例如 dataTableWV .

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

    widgetVar 也提供给 p:tabView ,例如 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 方法开始,当选项卡被禁用时,视图将被移动到另一个带有客户端代码的选项卡,当需要查看视图时,这更适合服务器端代码 .

相关问题