Question

我想使用两个f：facets：第一行作为＆＃39;标题＆＃39;对于仅包含文本的表格，第二行包含全局过滤器＆＃39; （标签+输入框）。

我尝试了无数组合，但失败了。

如何使用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" />

这是我根据以下答案进行的第二次尝试：

            <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>

Answer 1

您无法用您想要的任何名称命名方面。它必须是数据表理解的东西。它理解“标题”，就像它理解“页脚”一样，但不是“header2”或“footer2”。

那就是说，你只能使用一个<f:facet name="header">并在里面，你可以做任何你想做的事情。您可以使用<p:panelGrid columns="1">或<p:separator>，甚至是简单的表格，它只是html / css格式，就像您在页面中的任何位置一样。

还有一种更复杂的方法，如果你想尝试一点点努力，在其中使用<p:columnGroup type="header">和许多<p:row>，例如：

<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>

See a full example here.

多个f：facets用于数据表

1 个答案: