1

我想使用两个 f:facets：第一行作为仅包含文本的表的“标题”，第二行包含“全局过滤器”（标签 + 输入框）。

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

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

1 回答 1

3

您不能使用任何您想要的名称来命名构面。它必须是数据表可以理解的东西。它理解“header”，就像它理解“footer”一样，但不理解“header2”或“footer2”。

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

还有一种更复杂的方式，如果你想再努力一点，在里面使用<p:columnGroup type="header">and many <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>

在此处查看完整示例。

于 2012-09-13T12:01:19.717 回答