Компонент водяного знака Primefaces добавляется к имени заголовка столбца в ColumnToggler

Question

Я использую columnToggler Primefaces вместе с компонентом водяного знака, чтобы добавить пользовательский текст в столбец, следуя этому ответу -> , как добавить заполнитель текста в поле фильтра в заголовках столбцов, которые можно датировать .

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

Я знаю, что мог бы разместить водяной знак внутри столбца, а не фасет заголовка, но тогда мне нужно было бы указать атрибут "for" компонента водяного знака, начиная с родительской формы, например: ": formId: ...: tableId: columnId "... и я уже прочитал ( Primefaces, dataexporter и watermark ), что мне придется настроить dataExporter, чтобы не экспортировать водяной знак.И я не хочу этого делать, так как это добавит много дополнительной работы.

Я уже нашел поток ( columnToggler commandButton список заголовков столбцов ) с той же проблемой, ноответ не решит мою проблему ..

Могу ли я что-нибудь сделать, чтобы водяной знак не использовался в компоненте 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>