Hiển thị thông báo dựa trên Mức độ nghiêm trọng trong hai p: growl

Question

Tôi đang sử dụng PrimeFaces p: growl.

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

tôi cần phải hiển thị trong tiếng gầm đầu tiên chỉ Info tin nhắn trong khi trong lần thứ hai tôi cần phải hiển thị Error tin nhắn. Sử dụng globalOnly khi tôi thêm thông báo lỗi, thông báo này hiển thị 2 lần.

Bất kỳ ý tưởng nào?

Answer 1

Về mặt lý thuyết, có thể thực hiện được nếu nó hỗ trợ các thuộc tính infoClass, errorClass, v.v ... như h:messages. Sau đó bạn có thể chỉ định một lớp CSS thực hiện display: none.

Nhưng p:growl không hỗ trợ các thuộc tính đó. Trên mức độ nghiêm trọng tất cả các bạn có thể làm là thay đổi biểu tượng của infoIcon, errorIcon, vv Vì vậy, bạn đang bị mất ở đây.

Có thể có giá trị feature request.

Lưu ý rằng globalOnly="true" chỉ hiển thị các thông báo có mã số khách hàng null, bất kể mức độ nghiêm trọng của chúng.

Answer 2

hãy xem câu trả lời của tôi

PrimeFaces growl change color dynamically (Multiple messages)

Bạn cũng có thể tìm ra mã nguồn của dự án trong đó sản xuất trang bên dưới:

Answer 3

tôi đang tìm kiếm các chức năng tương tự (để đặt tiếng gầm thành dính từ mức độ nghiêm trọng của thông báo cụ thể). PrimeFaces (6.1) không cung cấp chức năng này, nhưng khá dễ hack growl JavaScript. Cụ thể hơn, trong bindEvents chức năng họ kiểm tra xem sticky đã được cấu hình và trên cơ sở đó:

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

Vì vậy, bạn có thể chế tạo thử nghiệm (ghi đè) các bindEvents chức năng và thiết lập sticky dựa trên mức độ nghiêm trọng thông báo.

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

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

Bạn cũng có thể tạo mẫu renderMessage và thêm mức độ nghiêm trọng làm tham số bindEvents. Tôi đã chọn sử dụng một bản hack nhanh và đọc nó từ className.

Tôi đã thêm những chức năng tiện ích:

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); 
} 

Bây giờ bạn có thể sử dụng việc kiểm tra sau:

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

tôi có thể tạo một yêu cầu kéo tại GitHub nơi bạn có thể thiết lập mức độ nghiêm trọng tối thiểu để massage thanh bằng cách sử dụng thuộc tính stickSeverity trên thành phần p:growl.

Đây là bản hack JavaScript đầy đủ (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); 
    } 
}