根据两个 p:growl 中的严重性显示消息

Question

我正在使用 PrimeFaces p:growl。

<p:growl id="msgsInfo"
         rendered="true"
         showDetail="true" />
<p:growl id="msgsError"
         globalOnly="true"
         showDetail="true"
         sticky="true" />

我需要在第一个咆哮中仅显示 Info 消息，而在第二个咆哮中我需要显示 Error 消息。 当我添加错误消息时使用 globalOnly 会显示 2 次。

有什么想法吗？

Answer 1

理论上，如果它支持 infoClass、errorClass 等属性（如 h:messages），这是可能的。然后，您可以指定一个执行 display: none 的 CSS 类。

但 p:growl 不支持这些属性。在严重性级别上，您所能做的就是通过 infoIcon、errorIcon 等更改图标。所以您在这里很迷失。

它可能值得功能请求。

请注意，globalOnly="true" 仅显示具有 null 客户端 ID 的消息，无论其严重性如何。

Answer 2

请参阅我的答案

PrimeFaces咆哮动态改变颜色（多条消息）

您还可以找到生成以下内容的项目的源代码页面如下：

Answer 3

我一直在寻找相同的功能（将咆哮从特定的消息严重性设置为粘性）。 PrimeFaces (6.1) 不提供此功能，但是很容易破解 咆哮 JavaScript。更具体地说，在 bindEvents 函数中，它们检查是否配置了 sticky 并基于此：

//hide the message after given time if not sticky
if(!sticky) {
    this.setRemovalTimeout(message);
}

因此，您可以对 bindEvents 函数进行原型设计（覆盖）并根据消息严重性设置粘性。

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start hack
    if (!sticky) {
      // Your rule
    }
    ...

您还可以构建 renderMessage 原型，并将严重性作为参数添加到 bindEvents。我选择使用快速技巧并从 className 中读取它。

我添加了这些实用函数：

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

现在您可以使用以下检查：

if (!sticky) {
  sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
}

我可能会在 GitHub 上创建一个拉取请求，您可以在其中使用 上的 stickSeverity 属性设置按摩棒的最低严重性p:growl 组件。

这是完整的 JavaScript hack（PrimeFaces 6.1）：

var SEVERITIES = [ "info", "warn", "error", "fatal" ];

function getSeverity(domNode) {
  // HACK Severity can be found in the className after the last - character.
  var severity = domNode.className;
  return severity.substring(severity.lastIndexOf("-") + 1);
}

function getSeverityIndex(severityString) {
  return SEVERITIES.indexOf(severityString);
}

PrimeFaces.widget.Growl.prototype.bindEvents = function(message) {
    var _self = this,
    sticky = this.cfg.sticky;

    // Start customization
    if (!sticky) {
      sticky = getSeverityIndex(getSeverity(message[0])) >= getSeverityIndex("error");
    }
    // End customization

    message.mouseover(function() {
        var msg = $(this);

        //visuals
        if(!msg.is(':animated')) {
            msg.find('div.ui-growl-icon-close:first').show();
        }
    })
    .mouseout(function() {
        //visuals
        $(this).find('div.ui-growl-icon-close:first').hide();
    });

    //remove message on click of close icon
    message.find('div.ui-growl-icon-close').click(function() {
        _self.removeMessage(message);

        //clear timeout if removed manually
        if(!sticky) {
            clearTimeout(message.data('timeout'));
        }
    });

    //hide the message after given time if not sticky
    if(!sticky) {
        this.setRemovalTimeout(message);
    }
}