Question

我想在JSF顶部使用PrimeFaces组件选中一些复选框中的所有复选框。

我的代码是这样的：

class Employee {
    boolean useName;
    int eId = 0;
    String eName;

    Employee(int id) {
        this.eId = id;
        this.useName = false;
    }

    Employee(String name) {
        this.eName = name;
        this.useName = true;
    }

    @Override
    public int hashCode() {
        return useName ? eName.length() * 1337 : eId * 7331;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Employee other = (Employee) obj;
        if (useName != other.useName)
            return false;
        if (useName) {
            if (eName.length() != other.eName.length())
                return false;
        } else {
            if (eId != other.eId)
                return false;
        }
        return true;
    }
}

我尝试使用已发布的代码here，但只有在页面上只有一组复选框时，它才有效。

Answer 1

将其包裹在如下所示的可重复使用的复合组件中：

/resources/composites/selectManyCheckboxAll.xhtml

<ui:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:p="http://primefaces.org/ui"
>
    <cc:interface>
        <cc:attribute name="value" />
        <cc:editableValueHolder name="input" targets="checkboxes" />
    </cc:interface>
    <cc:implementation>
        <h:outputStylesheet library="composites" name="selectManyCheckboxAll.css" target="head" />
        <h:outputScript library="composites" name="selectManyCheckboxAll.js" target="head" />
        <div id="#{cc.clientId}" class="checkboxes-all" 
            data-widget-checkboxes="#{p:widgetVarFromContext('checkboxes', cc).split('\'')[1]}" 
            data-widget-all="#{p:widgetVarFromContext('all', cc).split('\'')[1]}">
            <p:selectManyCheckbox id="checkboxes" value="#{cc.attrs.value}">
                <cc:insertChildren />
            </p:selectManyCheckbox>
            <div class="all">
                <p:selectBooleanCheckbox id="all" />
                <p:outputLabel for="all" value="Check all" />
            </div>
        </div>
    </cc:implementation>          
</ui:component>

/resources/composites/selectManyCheckboxAll.css

.checkboxes-all {
    white-space:  nowrap;
}

.checkboxes-all .ui-selectmanycheckbox,
.checkboxes-all .all {
    display: inline-block;
    vertical-align: middle;
}

.checkboxes-all .all .ui-chkbox {
    margin: 1px 4px 0 0;
    vertical-align: top;
}

.checkboxes-all .all label {
    display: inline-block;
    margin-top: 4px;
}

/resources/composites/selectManyCheckboxAll.js

$(document).on("click", ".checkboxes-all .all .ui-chkbox-box, .checkboxes-all .all input", function() {
    var $composite = $(this).closest(".checkboxes-all");
    var widgetAll = PrimeFaces.widgets[$composite.data("widget-all")];
    var widgetCheckboxes = PrimeFaces.widgets[$composite.data("widget-checkboxes")];

    widgetCheckboxes.inputs.prop("checked", !widgetAll.isChecked()).click();
});

$(document).on("click", ".checkboxes-all .ui-selectmanycheckbox input", function() {
    var $composite = $(this).closest(".checkboxes-all");
    var widgetAll = PrimeFaces.widgets[$composite.data("widget-all")];

    if (!$(this).is(":checked") && widgetAll.isChecked()) {
        widgetAll.uncheck();
    }
});

用法：

<html xmlns:my="http://xmlns.jcp.org/jsf/composite/composites">
...
<my:selectManyCheckboxAll value="#{bean.selectedItems}">
    <f:selectItem itemLabel="Consulta" itemValue="C" />
    <f:selectItem itemLabel="Edição" itemValue="E" />
    <f:selectItem itemLabel="Deleção" itemValue="D" />
    <f:selectItem itemLabel="Inclusão" itemValue="I" />
    <f:selectItem itemLabel="Relatório" itemValue="R" />
</my:selectManyCheckboxAll>

使用动态ID选择Multiple SelectManyCheckBox中的所有项目

1 个答案: