Question

我有一个主面数据表，列数很少，并且所有列都有filteryBy属性。如何添加占位符或水印以提供用户提示。任何建议，将不胜感激！

<p:dataTable var="dt" widgetVar="widgetUserRecords"
                             value="#{userBean.result}"
                             id="userRecordTable" paginator="true"
                             paginatorAlwaysVisible="false" rows="10"
                             height="300" >
<p:column sortBy="#{dt.course.name}" filterStyle="width:50px;"
                              filterBy="#{dt.course.name}" headerText="Course Name" style="text-align:bottom">
    <h:outputText value="#{dt.course.name}"/>
</p:column>
.
. 
.
  (other columns)
</p:dataTable>

Answer 1

我意识到这个问题是在2012年被问到的，但是我希望这个答案可以帮助那些想要在数据表中按字段添加水印的人。我尝试使用forElement在其他答案中建议的解决方案，但无法显示水印。相反，我找到了两个使用for属性的解决方案，第一个使用styleClass元素上的p:column属性，第二个使用{{1}中的jQuery选择器属性。我还发现for元素需要位于用于标题的p:watermark元素中。

我在这两个解决方案中使用的代码如下：

f:facet

Answer 2

首先为您的列提供ID并添加p:watermark组件：

<h:form id="tableForm">
...    
    <p:dataTable var="dt" widgetVar="widgetUserRecords"
                     value="#{userBean.result}"
                     id="userRecordTable" paginator="true"
                     paginatorAlwaysVisible="false" rows="10"
                     height="300" >

        <p:column id="column1" sortBy="#{dt.course.name}" filterStyle="width:50px;"
                      filterBy="#{dt.course.name}" headerText="Course Name" style="text-align:bottom">
            <h:outputText value="#{dt.course.name}"/>
            <p:watermark forElement="tableForm:userRecordTable:column1" value="hint..."/>
        </p:column>

    </p:dataTable>
...
</h:form>

不要忘记将tableForm ID替换为p:dataTable周围的实际表单。

Answer 3

根据this thread on the PrimeFaces forum，应该可以使用这样的东西：

<h:form id="form">
    <p:dataTable id="dataTable">
        <p:row>
            <p:column id="column" filterBy="....">
                <p:watermark forElement=":form:dataTable:column" value="Filter..."/>
            ...
            </p:column>
        </p:row>
    </p:dataTable>
</h:form>

Answer 4

如果有人需要在带有动态列的数据表中使用占位符，也许这可以帮助您...

<p:dataTable id="generalReportTable" value="#{generalReportController.reports}" var="report"
         filteredValue="#{generalReportController.filteredReports}"
         rowKey="#{report.rowKey}" >
<p:columns id="dynamicColumns" value="#{generalReportController.columns}" var="column" columnIndexVar="colIndex" 
           sortBy="#{report[column.property]}" filterBy="#{report[column.property]}" filterMatchMode="contains"
           styleClass="dynamic-cols-width-#{colIndex}">
    <f:facet name="header">
        <p:watermark for="@(.dynamic-cols-width-#{colIndex})" value="#{column.header}" />
        <h:outputText value="#{column.header}" />
    </f:facet>
    <h:outputText value="#{report[column.property]}" />
</p:columns>

Answer 5

您可以通过转到 jquery.dataTables.js 第2701行并替换

来更改此内容而不覆盖占位符属性

。attr( 'placeholder', language.sSearchPlaceholder )

与

.attr( 'placeholder', 'Search table...' )

您还可以找到sSearchPlaceholder变量，该变量可能位于语言文件中并替换它。

如何在数据表列标题的过滤器框中添加占位符文本

5 个答案: