2

我有一个包含几列的主要面孔数据表，并且所有列都有 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>
4

5 回答 5

9

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

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

<h:form id="myForm">
    <p:dataTable id="myTable">

        <p:column id="column1" filterBy="column1" styleClass="watermark1">
            <f:facet name="header">
                <p:watermark for="@(.watermark1)" value="Watermark 1" />
                <h:outputText value="Column1" />
            </f:facet>
        </p:column>

        <p:column id="column2" filterBy="column2">
            <f:facet name="header">
                <p:watermark for="@(#myForm\\:myTable\\:column2\\:filter)"
                    value="Watermark 2" />
                <h:outputText value="Column2" />
            </f:facet>
        </p:column>

    </p:dataTable>
</h:form>
于 2014-05-02T20:18:16.870 回答
5

首先为您的列提供和 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>

不要忘记将tableFormid替换为p:dataTable.

于 2012-10-23T05:24:40.963 回答
1

根据PrimeFaces 论坛上的这个帖子，应该可以使用这样的东西：

<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>
于 2012-10-23T05:00:52.123 回答
0

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

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

于 2015-10-23T22:31:09.737 回答
0

您可以通过转到jquery.dataTables.js第 2701 行并替换来更改此设置而不覆盖占位符属性

.attr( 'placeholder', language.sSearchPlaceholder )

和

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

您还可以找到可能位于语言文件中的 sSearchPlaceholder 变量并将其替换。

于 2016-06-25T18:24:33.660 回答