Primefaces p:picklist获取目标列表

时间:2016-12-15 13:41:41

标签: jsf primefaces selection picklist

我想在p:picklist

的目标列表中获取所选元素

1:ajax event =“select”只获取最后一个选中的元素,但我需要获取所有选中的元素。

我的选择清单:

<p:pickList
                id="xAttributesPicklist_#{!templateController.model.template.transposed}"
                value="#{templateController.model.listAttributesX}"
                var="attributesX" itemValue="#{attributesX}"
                itemLabel="#{attributesX.getName(localeBean.selectedLocale)}"
                showTargetControls="true" showCheckbox="true"
                converter="attributePicklistConverter"
                styleClass="attributesPicklist"
                rendered="#{!templateController.model.template.transposed}">

                <f:facet name="sourceCaption">#{msg.pickListAvailableAttributesX}</f:facet>
                <f:facet name="targetCaption">#{msg.pickListAssignedAttributesX}</f:facet>

                <p:ajax event="select"
                    listener="#{templateController.onPickListXSelect}"
                    update="@([id$=radioAttributeXOrder_#{!templateController.model.template.transposed}])" />
                <p:ajax event="unselect"
                    listener="#{templateController.onPickListXUnSelect}" />

                <p:ajax event="reorder"
                    listener="#{templateController.onPickListXReorder}"
                    update="@([id$=radioAttributeXOrder_#{!templateController.model.template.transposed}])"
                    oncomplete="setFromDirty();" />

                <p:ajax event="transfer" oncomplete="setFromDirty();" update="@([id$=panelGridReportButtons])" />


                <p:column styleClass="picklistColumnBase">
                    <h:outputText
                        value="#{attributesX.getName(localeBean.selectedLocale)}" />
                </p:column>
                <p:column styleClass="picklistColumnDetail">
                    <h:outputText
                        styleClass="#{attributesX.ascending ? 'ui-icon ui-icon-circle-arrow-n' : 'ui-icon ui-icon-circle-arrow-s'}" />
                </p:column>
            </p:pickList>

处理select事件的bean方法:

    public void onPickListXSelect(SelectEvent event) {
    this.model.setSelectedAttributeX((TAttributeX) event.getObject());
    this.model.setAttributesXAscending(this.model.getSelectedAttributeX().isAscending());
}

我的表单中还有一个p:selectOneRadio,(在更改时)应修改选项列表中targetList的所有选定元素。

<p:selectOneRadio
                id="radioAttributeXOrder_#{!templateController.model.template.transposed}"
                value="#{templateController.model.attributesXAscending}"
                layout="grid" columns="1" styleClass="selectRadio"
                rendered="#{!templateController.model.template.transposed}"
                onchange="setFromDirty();">
                <f:selectItem itemLabel="#{msg.btnRadioAscending}" itemValue="true" />
                <f:selectItem itemLabel="#{msg.btnRadioDescending}"
                    itemValue="false" />

                <p:ajax event="valueChange"
                    listener="#{templateController.updateAttributesXOrder()}"
                    update="@([id$=xAttributesPicklist_#{!templateController.model.template.transposed}])" />
            </p:selectOneRadio>

我当前的bean方法来处理p:selectOneRadio中的changeevent:

    public void updateAttributesXOrder() {
    if (this.model.getSelectedAttributeX() != null) {
        this.model.getSelectedAttributeX().setAscending(this.model.isAttributesXAscending());
    }
}

但它应该看起来像这样:

    public void updateAttributesXOrder() {
    if (this.model.getSelectedAttributeXs() != null) {
        for (AttributeX attx : this.model.getSelectedAttributeXs()) {
            attx.setAscending(this.model.isAttributesXAscending());
        }
    }
}

我需要的是一种跟踪targetList中 ALL 所选元素的方法,而不仅仅是最后一个(就像我从select事件中得到的那样)。

填充所选元素列表(在select事件中添加当前所选元素)的问题是,当用户将多重选择更改为单个元素选择时,我从未得到取消选择事件。

根据Kukeltje的回复更新:

在我的selectOneRadio中添加了<p:ajax onstart>

<p:selectOneRadio
                id="radioAttributeXOrder_#{!templateController.model.template.transposed}"
                value="#{templateController.model.attributesXAscending}"
                layout="grid" columns="1" styleClass="selectRadio"
                rendered="#{!templateController.model.template.transposed}"
                onchange="setFromDirty();">
                <f:selectItem itemLabel="#{msg.btnRadioAscending}" itemValue="true" />
                <f:selectItem itemLabel="#{msg.btnRadioDescending}"
                    itemValue="false" />

                <p:ajax
                    onstart="getSelectedElementsInPicklist('tempalteForm:tabViewProperties:xAttributesPicklist_#{!templateController.model.template.transposed}')"
                    event="valueChange"
                    listener="#{templateController.updateAttributesXOrder()}"
                    update="@([id$=xAttributesPicklist_#{!templateController.model.template.transposed}])" />
            </p:selectOneRadio>

使用相应的JS来“找到”所选的ID:

        function getSelectedElementsInPicklist(table) {
        var parent = document.getElementById(table)
        var targetListWrapper = parent.childNodes[2];
        var targetListElements = targetListWrapper.childNodes[1]; // ul

        var items = targetListElements.getElementsByTagName("li");

        var ret_obj = new Array();

        for (var i = 0; (i &lt; items.length); ++i) 
        {
            var pickListItem = items[i];
            if (pickListItem.className.indexOf('ui-state-highlight') != -1) 
            {
                ret_obj.push(pickListItem.getAttribute('data-item-value'));
            }
        }

        var resultString = "";

        for (var j = 0; (j &lt; ret_obj.length); ++j)
        {
            resultString = resultString + ret_obj[j] + ", ";
        }

        resultString = resultString.substring(0, resultString.length - 2);

        passToJSFManagedBean ([{name : 'selected_picklist_items', value : resultString}]);

    }

我正在努力研究如何以正确的方式处理这个结果。目前我将resultString(表示所选ID)传递给我的请求图。并调用remotecommand

            <p:remoteCommand name="passToJSFManagedBean"
            id="passToJSFManagedBeanCmd"
            action="#{templateController.getParamsFromJS()}" process="@this"></p:remoteCommand>

在我的控制器中,我读了这个并获取ID:

    public void getParamsFromJS() {
    String selectedPicklistItems = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap()
            .get("selected_picklist_items");

    String[] picklistIds = selectedPicklistItems.split(", ");

    List<Long> selectedPicklistIds = new ArrayList<Long>();

    for (String s : picklistIds) {
        selectedPicklistIds.add(Long.valueOf(s));
    }

    this.setSelectedItemIdsInPicklist(selectedPicklistIds);
}

我现在的问题是我的selectOneRadio的ajax事件“valueChange”的listener方法在调用getParamsFromJS()Methode之前被称为 。显然我做错了什么: - )

帮助或任何建议都会很棒

谢谢。

0 个答案:

没有答案