1

2 つの f:facets を使用したい: 最初の行はテキストのみを含むテーブルの「ヘッダー」として、2 行目は「グローバル フィルター」(ラベル + 入力ボックス) を含む。

無数の組み合わせを試しましたが失敗しました。

JSF/Primefacesでこれを達成するにはどうすればよいですか?

これが私が試したことの一例です：

<p:dataTable var="customer" widgetVar="customerTable" id="dataTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true"> 
<f:facet name="header">                       
<h:outputText value="#{text['table.customer.header']}" />                            
</f:facet>
<f:facet name="header2">                       
<h:outputText value="#{text['table.customer.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />

これは、以下の回答に基づく2回目の試みです。

            <f:facet name="header">                    
            <p:columnGroup type="header">
                <p:row>
                    <p:column colspan="4">
                        <h:outputText value="#{text['table.customer.header']}" />    
                    </p:column>
                </p:row>
                <p:separator/>
                <p:row>
                    <p:column colspan="4">
                        <h:outputText value="#{text['table.customer.filter.global']}" />
                        <p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />                         
                    </p:column>
                </p:row>
            </p:columnGroup>                  
            </f:facet>

データテーブル全体:

               <p:dataTable id="customersTable" var="customer" widgetVar="customerTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true" draggableColumns="true" rowKey="#{customer.id}" selection="#{customerbean.selectedCustomer}" selectionMode="single"> 

                <f:facet name="header">                    
                    <p:columnGroup type="header">
                        <p:row>
                            <p:column colspan="4">
                                <h:outputText value="#{text['table.customer.header']}" />    
                            </p:column>
                        </p:row>
                        <p:separator/>
                        <p:row>
                            <p:column colspan="4">
                                <h:outputText value="#{text['table.customer.filter.global']}" />
                                <p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />                         
                            </p:column>
                        </p:row>
                    </p:columnGroup>                  
                </f:facet>

                <p:ajax event="rowEdit" listener="#{customerbean.onEdit}" update="@this"/>  

                <p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{customer.name}" /> 
                        </f:facet> 
                        <f:facet name="input">  
                            <p:inputText value="#{customer.name}" style="width:100%"/>  
                        </f:facet> 
                    </p:cellEditor>
                </p:column>  

                <p:column headerText="CPR" sortBy="#{customer.cpr}" filterBy="#{customer.cpr}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.cpr}" />  
                </p:column>  

                <p:column headerText="Passport No." sortBy="#{customer.passportno}" filterBy="#{customer.passportno}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.passportno}" />  
                </p:column>  

                <p:column headerText="DOB" sortBy="#{customer.dob}" filterBy="#{customer.dob}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.dob}" />  
                </p:column>   

                <p:column headerText="Options" style="width:50px">  
                    <p:rowEditor />  
                </p:column>                  

                <f:facet name="footer">  
                    There are #{fn:length(customerbean.customerList)} customers in total.  
                </f:facet>  
            </p:dataTable>
4

1 に答える 1

3

ファセットに任意の名前を付けることはできません。データテーブルが理解できるものでなければなりません。「フッター」を理解するのと同じように「ヘッダー」を理解しますが、「ヘッダー 2」や「フッター 2」は理解できません。

とはいえ、使用できるのは 1 つだけで<f:facet name="header">、その中では何でもできます。<p:panelGrid columns="1">、または 、さらには単純なテーブルを使用することもでき<p:separator>ます。これは、ページのどこでも行うのと同じように、html/css フォーマットです。

より複雑な方法もあります。もう少し難しく試してみたい場合は、その中に<p:columnGroup type="header">多く<p:row>の s を使用します。たとえば、次のようになります。

<p:columnGroup type="header">
   <p:row>
      <p:column>
         <f:facet name="header">
             <h:outputText value="Your header" />
         </f:facet>
      </p:column>
   </p:row>
   <p:row>
      <p:column>
         <f:facet name="header">
             <h:outputText value="Filter: "/>
             <p:inputText value="#{filter}">
         </f:facet>
      </p:column>
   </p:row>
</p:columnGroup>

ここで完全な例を参照してください。

于 2012-09-13T12:01:19.717 に答える