4

该页面有 ah:panelGrid，其中包含两个 h:panelGroup 预计将显示在同一行中。

并且额外的要求是left panelGroup应该是总宽度的30%，另外70%。

我尝试了几种方法来实现这一点，但都失败了......

<h:form id="form">
            <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="columnClazz" rowClasses="rowClazz">
                <h:panelGroup>
                    <p:dataTable scrollHeight="250"  id="priceData" var="item" value="#{accumByCustomerViewModel.quoteInfo}" 
                    scrollable="true" rowIndexVar="rowInfo" rowKey="#{item.brand_code}" selection="#{accumByCustomerViewModel.selectedBrand}" selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{accumByCustomerViewModel.onRowSelect}"
                                update=":form:custGrid"/>   
                        <p:columnGroup id="columnGroup" type="header">
                            <p:row>
                                <p:column id="goldHeader" rendered="true" headerText="积存金" colspan="4"/>
                            </p:row>
                             <p:row>
                                <p:column id="brandHeader" rendered="true" headerText="品牌"/>
                                <p:column id="quoteDateHeader" rendered="true" headerText="报价日期"/>
                                <p:column id="salePriceHeader" rendered="true" headerText="卖出价"/>
                                <p:column id="redeemPriceHeader" rendered="true" headerText="赎回价"/>
                            </p:row>
                        </p:columnGroup>
                        <p:column id="brand_code" rendered="true">
                            #{item.brand_name}
                        </p:column>
                        <p:column id="quote_date" rendered="true">
                            #{item.quote_date} 
                        </p:column>
                        <p:column id="salePrice" rendered="true">
                           #{item.entity_sale_price}
                        </p:column>.
                        <p:column id="redeemPrice" rendered="true">
                            #{item.entity_redeem_price}
                        </p:column>
                    </p:dataTable>
                </h:panelGroup>
                <h:panelGroup id="custGrid">
                    <p:fieldset legend="客户信息" id="custFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="银行账号:"/>
                            <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件类型: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件号码: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                    <p:fieldset legend="品牌" id="brandFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="品牌名称:"/>
                            <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="金额: "/>
                            <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
4

2 回答 2

4

<h:panelGroup>将您的输入声明<h:panelGrid>为

<h:panelGroup style="width: 30%;" layout="block">
<h:panelGroup style="width: 70%;" layout="block">

所以他们被渲染为<div>s，没有它他们被渲染，<span>因此他们不保持他们的宽度。它对我有用。

在你的情况下：

我使用了以下代码：

    <style>
        .one{width: 70%; border: 1px solid red;}
        .two{width: 30%; border: 1px solid red;}
    </style>

    <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="one, two">      
            <h:panelGroup layout="block">
               <table style="width:100%;">
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>            
               </table>                  
            </h:panelGroup>             
            <h:panelGroup id="custGrid" layout="block">             
                <p:fieldset legend="客户信息" id="custFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="银行账号:"/>
                        <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件类型: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件号码: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>
                <p:fieldset legend="品牌" id="brandFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="品牌名称:"/>
                        <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="金额: "/>
                        <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>                    
            </h:panelGroup>
        </h:panelGrid>

得到这样的输出：

在此处输入图像描述

仔细看看这部分代码：columnClasses="one, two"

于 2013-11-13T09:01:32.443 回答
1

仅使用具有以下属性的 panelGroups，可以正常工作。

<h:panelGroup style="width: 100%; float: left;">
    <h:panelGroup style="display: inline-table; width: 30%; float: left;">Leftside Content</h:panelGroup>
    <h:panelGroup style="display: inline-table; width: 70%; float: left;">Rightside Content</h:panelGroup>
</h:panelGroup>
于 2013-11-13T09:07:48.793 回答