p：selectOneMenu和未轉義的SelectItem標籤

當使用Primefaces（6.1.1）中的SelectOneMenu並添加具有HTML格式標籤的某些SelectItem時，組件的選定項目會顯示轉義的HTML，即使'SelectItem.escape'屬性設置爲false（此外，'itemLabelEscaped'屬性也是錯誤的）。保持可選項目的下拉菜單已正確顯示。p：selectOneMenu和未轉義的SelectItem標籤

支持bean樣本：

public List<SelectItem> formattedSelectItems() { 
    List<SelectItem> items = new ArrayList<>(); 
    for (int i = 100; i < 103; i++) { 
     items.add(new SelectItem(i, "<u>" + i + "</u>", "", false, false)); 
    } 
    return items; 
}

JSF：

<p:selectOneMenu> 
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/> 
</p:selectOneMenu>

這是一個錯誤還是我做錯了什麼？感謝幫助。

來源

2017-05-23 perfetzki

在現代JSF的版本，它不需要再創造「的SelectItem」的對象...... – Kukeltje

-1

這不是一個錯誤。

你可能混淆了SelectItem的標籤與選擇的標籤（見下圖）

渲染HTML看起來是這樣的：

<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" 
    id="form:oneMenu" style="min-width: 47px;"> 
    <div class="ui-helper-hidden-accessible"> 
     <input name="form:oneMenu_focus" class="mb-user-select-none" 
      id="form:oneMenu_focus" role="combobox" aria-disabled="false" 
      aria-expanded="false" aria-haspopup="true" 
      aria-describedby="form:oneMenu_2" 
      aria-activedescendant="form:oneMenu_2" 
      aria-owns="form:oneMenu_items" aria-autocomplete="list" 
      onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()" type="text" 
      autocomplete="off"> 
    </div> 
    <div class="ui-helper-hidden-accessible"> 
     <select name="form:oneMenu_input" tabindex="-1" 
      id="form:oneMenu_input" data-p-hl="onemenu"> 
         <option value="100">100</option> 
      <option value="101">101</option> 
      <option value="102">102</option></select> 
    </div> 
    <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" id="form:oneMenu_label"><u>102</u></label> 
    <div 
     class="ui-selectonemenu-trigger ui-state-default ui-corner-right"> 
     <span class="ui-icon ui-icon-triangle-1-s ui-c"></span> 
    </div> 
</div>

一個label呈現爲所選的標籤。（見SelectOneMenuRenderer＃encodeLabel）
所以，即使你設置SelectItem.escape屬性false或添加itemLabelEscaped="false"屬性f:selectItems，選擇的標籤仍然會逃脫。

爲了逃避選擇的標籤，請參閱下面的代碼波紋管：

腳本

<script type="text/javascript"> 
    function changeSelectedLabel() { 
     console.log('change!!'); 
     var label = $("label[id='form:oneMenu_label']"); 
     var text = label.text(); 
     label.text(""); 
     label.append(text); 
    } 

    $(window).bind("load", function() { 
     changeSelectedLabel(); 
    }); 
</script>

selectOneMenu用於

<p:selectOneMenu id="oneMenu" onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()"> 
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/> 
</p:selectOneMenu>

這將改變在窗口中選定的標籤加載並選擇一個菜單的onfocus和onblur事件。

爲什麼我用onfocus和onblur而不是onchange？

使用onchange會在selectOneMenu展開時將選定標籤返回給其轉義值，如果您沒有更改/選擇某個項目。

隨意玩這個到什麼適合您的要求。

問候，

來源

2017-06-02 07:20:15 Tonkichi

謝謝您的回答。我認爲，從技術上看，你是絕對正確的，但從用戶的角度來看，有一個組件，而且不會期望的是，選定的值（'選定的標籤'）必須由客戶端腳本操縱，以使其看起來與可選擇的值。但這至少是一個很好的解決辦法，因此「接受」檢查。再次感謝。 – perfetzki

我提到這不是一個錯誤，但忘了補充說這可能是一個改進。我正要提出一個關於此問題的問題，然後在5天前提交的這個[問題]（https://github.com/primefaces/primefaces/issues/2402）中遇到與您的問題完全相同的問題。它被標記爲缺陷，並被設定爲Primefaces 6.2的里程碑。 – Tonkichi

哦，很高興知道，謝謝你的信息。 – perfetzki

p：selectOneMenu和未轉義的SelectItem標籤

回答

相關問題