如何在Datatable列标题的筛选框中添加占位符文本。

Question

我有一个带有几列的prime faces数据表，并且每一列都有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>

- santa029

Answer 1

我知道这个问题在2012年就被问过了，但我希望我的回答可以帮助那些想要在数据表格的筛选字段上添加水印的人。我尝试使用其他答案中建议的 forElement 解决方案，但无法显示水印。相反，我找到了两种解决方案，它们都使用了 for 属性，第一种方法利用了 p:column 元素上的 styleClass 属性，第二种方法则利用了 for 属性内部的 jQuery 选择器。我还发现 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>

- Paul H

---

+1，这应该被标记为正确答案。在PrimeFaces 5.1中，我四处搜索，最终在这篇帖子上发现了它，并使其正常工作。我必须说，我的表单上设置了“prependId = false”，所以对我来说，@(#myTable\:column2\:filter)就足够了。你的情况可能有所不同。 - gjoris

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 周围。

- Akos K

---

水印组件的正确属性是“for”，而不是“forElement”。如果在旧版本中是这种情况，请更新您的答案并给出两个选项。 - Diego Urenia

@DiegoRodrigues 这是对一个4年前的问题的回答，当时已经被接受了。如果您可以验证在2012年水印组件的正确属性是“for”而不是“forElement”，我将很乐意接受您的编辑。谢谢！ - Akos K

Answer 3

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

- siebz0r

---

你测试过这个吗？当粘贴到示例中时，你的解决方案无法正常工作。 - Akos K

@akoskm 这只是一个示例（伪代码），当粘贴时它不会起作用，因为缺少一些必需的属性。为了可读性，我省略了大部分内容。 - siebz0r

没错，我的表述不够清晰，watermark 组件的 forElement 属性需要一个 jQuery 选择器而不是组件 ID（如果需要组件 ID，则 dataTable:column 或 column 就足够了）。 - Akos K

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>

- Darkness

Answer 5

您可以在不覆盖占位符属性的情况下更改此内容，方法是前往jquery.dataTables.js第2701行并替换

.attr( 'placeholder', language.sSearchPlaceholder )

为

.attr( 'placeholder', '搜索表格...' )

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

- David Shields