Question

我使用Primefaces＆＃39; columnToggler与水印组件一起，根据此答案将自定义文本添加到列中 - ＆gt; how to add placeholder text in the filter box in datatable column headers

<p:column id="analysisStartTimeColumn"
          filterBy="#{analysis.startTime}"
          sortBy="#{analysis.startTime}"
          filterFunction="#{filterController.filterByDate}"
          filterMatchMode="contains"
          visible="#{analysisBean.analysesDatatableColumnStates.get(6)}">
  <f:facet name="header">
    <h:outputText value="#{msg['Analysis.startTime']}"/>
    <p:watermark value="#{msg['placeholder.chooseDate']}"
                 for="analysisStartTimeColumn"/>
  </f:facet>
  <f:facet name="filter">
     <p:calendar id="analysisStartTimeCalendar"
                 locale="de"
                 navigator="true"
                 pattern="dd.MM.yyyy"
                 mask="true">
        <p:ajax event="dateSelect"
                oncomplete="PF('analysesDatatableWdgtVar').filter()"/>
     </p:calendar>
  </f:facet>
  <h:outputText value="#{analysis.startTime}">
     <f:converter converterId="localDateTimeConverter"/>
     <f:attribute name="pattern" value="dd.MM.yyyy HH:mm:ss"/>
  </h:outputText>
</p:column>

问题是，primefaces组件被添加到头名称中，因此头名称在columnToggler中被uglified。

我知道我可以将水印放在列中，而不是标题面，但是我必须指定＆＃34; for＆＃34;水印组件的属性以父表单开头，如下所示：＆＃34;：formId：...：tableId：columnId＆＃34; ...我已阅读（Primefaces, dataexporter and watermark）我必须自定义dataExporter不导出水印。而且我不想这样做，因为它会增加许多额外的工作要做。

我已经找到一个线程（columnToggler commandButton list of column headers）有同样的问题，但答案不会解决我的问题..

我能做什么，所以在columnToggler组件中没有使用水印？

Answer 1

根据建议，我尝试覆盖columnToggler的默认行为。标头名称在.render（）方法中生成。我创建了一个名为columnToggler.js的新文件，并将其包含在我的template.xhtml标题中。

我首先尝试使用正则表达式，但最终从另一个html节点读取它，因为正则表达式不够灵活（列标题名称和水印脚本按照相同的顺序排列xhmtl组件放在哪里数据表的标题面（

）

columnToggler.js

PrimeFaces.widget.ColumnToggler.prototype.render = function () {

    this.columns = this.thead.find("> tr > th:not(.ui-static-column)");
    this.panel = $("<div></div>").attr("id", this.cfg.id).attr("role", "dialog").addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items" role="group"></ul>').appendTo(document.body);
    this.itemContainer = this.panel.children("ul");
    var a = this.tableId + "_columnTogglerState";
    this.togglerStateHolder = $('<input type="hidden" id="' + a + '" name="' + a + '" autocomplete="off" />');
    this.table.append(this.togglerStateHolder);
    this.togglerState = [];
    for (var f = 0; f < this.columns.length; f++) {
        var c = this.columns.eq(f), g = c.hasClass("ui-helper-hidden"),
            h = g ? "ui-chkbox-box ui-widget ui-corner-all ui-state-default" : "ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active",
            k = (g) ? "ui-chkbox-icon ui-icon ui-icon-blank" : "ui-chkbox-icon ui-icon ui-icon-check";
        var children = c.children(".ui-column-title");
        var nodeList = children[0].childNodes;
        var arr = Array.from(nodeList);
        var l = arr.filter(function (node) {
            return node.nodeType === Node.TEXT_NODE;
        })[0].data;

        this.hasPriorityColumns = c.is('[class*="ui-column-p-"]');
        var n = $('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input type="checkbox" role="checkbox"></div><div class="' + h + '"><span class="' + k + '"></span></div></div><label>' + l + "</label></li>").data("column", c.attr("id"));
        if (this.hasPriorityColumns) {
            var b = c.attr("class").split(" ");
            for (var e = 0; e < b.length; e++) {
                var d = b[e], m = d.indexOf("ui-column-p-");
                if (m !== -1) {
                    n.addClass(d.substring(m, m + 13))
                }
            }
        }
        if (!g) {
            n.find("> .ui-chkbox > .ui-helper-hidden-accessible > input").prop("checked", true).attr("aria-checked", true)
        }
        n.appendTo(this.itemContainer);
        this.togglerState.push(c.attr("id") + "_" + !g)
    }
    this.togglerStateHolder.val(this.togglerState.join(","));
    this.closer = $('<a href="#" class="ui-columntoggler-close"><span class="ui-icon ui-icon-close"></span></a>').attr("aria-label", PrimeFaces.getAriaLabel("columntoggler.CLOSE")).prependTo(this.panel);
    if (this.panel.outerHeight() > 200) {
        this.panel.height(200)
    }
    this.hide()
};

的template.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      lang="en">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title><ui:insert name="title">...</ui:insert></title>
        <ui:insert name="head"/>

        <h:outputScript type="text/javascript" name="/resources/.../js/custom.js"/>

    </h:head>

    <h:body>

        ...

    </h:body>

</html>

Primefaces水印组件添加到ColumnToggler中的列标题名称

1 个答案: