p:selectOneMenu 和未转义的 SelectItem 标签

Question

当使用 Primefaces (6.1.1) 中的 SelectOneMenu 并添加一些具有 HTML 格式标签的 SelectItems 时，组件的选定项目显示转义的 HTML，即使 [=21] =] 属性设置为 false（此外，'itemLabelEscaped'-Attribute 也为 false）。包含可选项目的下拉列表已正确呈现。

支持 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>

这是一个错误还是我做错了什么？感谢您的帮助。

Answer 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 或添加 f:selectItems 的 itemLabelEscaped="false" 属性，所选标签仍将被转义。

要转义Selected Label，请参考以下代码：

脚本

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

这将更改 window 加载和 selectOneMenu 的 onfocus 和 onblur 事件中的选定标签。

为什么我使用 onfocus 和 onblur 而不是 onchange？

如果您没有 changed/selected 一个项目，则在展开 selectOneMenu 时，使用 onchange 将 return 选定标签为其转义值。

根据您的要求随意使用它。

此致，

p:selectOneMenu 和未转义的 SelectItem 标签

p:selectOneMenu and unescaped SelectItem label

primefaces

jsf-2