列表框中的范围变量

时间:2016-02-15 03:40:50

标签: xpages

有一个列表框(例如列表框A)包含值,如果我点击一个按钮(例如按钮X),它会将所选值添加到另一个列表框(例如列表框B)。执行此操作后,列表框B将显示选择值。

在列表框B中(假设它具有列表框A中的值),如果我单击另一个按钮(例如按钮Y),列表框B中的选定值将返回到列表框A

我按照此post的回答尝试将代码应用于列表框。

当我运行它时,我可以从列表框A中添加值(仅一个值)但是我无法将值从列表框B移动到列表框A.我认为原因可能是关于不同的范围变量:列表框使用视图范围变量和列表框B使用会话范围变量。

我在stackoverflow中搜索关于列表框中的交换范围变量的各种帖子,但我仍然没有这个想法。

我发布代码因为它很有用。谢谢你的帮助。

<xp:table style="width:500.0px"><xp:tr><xp:td>B&#160;list box&#160;</xp:td>
        <xp:td></xp:td>
        <xp:td>A list box </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>

        <xp:listBox id="listBox5" value="#{sessionScope.BLstBoxItem}"  style="width:100.0px">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:if   (!viewScope.selectItems) 
{
    viewScope.selectItems = ["a","c","g"];
 }
return viewScope.selectItems;}]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox></xp:td>
        <xp:td>
            <xp:button id="button4" style="width:250.0px">
                <xp:this.value><![CDATA[<------ Values move to B list box]]>    </xp:this.value>
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
        viewScope.selectItems.add(viewScope.ALstBoxItem); 
        viewScope.ALstBoxItem = "";
       /*
        for(var i in ALstBoxItem){
            i--
        }
        return ALstBoxItem;

        */}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:br></xp:br>
            <xp:br></xp:br>
            <xp:button id="button2" style="width:250.0px">
                <xp:this.value><![CDATA[Values move to A list box ------>]]></xp:this.value>
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
        sessionScope.selectItems.add(sessionScope.BLstBoxItem); 
        sessionScope.BLstBoxItem = "";
        /*
        for(var i in LLstBoxItem){
            i--
        }
        return BLstBoxItem;

        */}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
        </xp:td>
        <xp:td>
            <xp:listBox id="listBox4"
                value="#{viewScope.ALstBoxItem}" style="width:100.0px">
                <xp:selectItem itemLabel="a"></xp:selectItem>
                <xp:selectItem itemLabel="b"></xp:selectItem>
                <xp:selectItem itemLabel="c"></xp:selectItem>
                <xp:selectItem itemLabel="d"></xp:selectItem>
                <xp:selectItem itemLabel="e"></xp:selectItem>
                <xp:selectItem itemLabel="f"></xp:selectItem>
                <xp:selectItem itemLabel="g"></xp:selectItem>
                <xp:selectItem itemLabel="h"></xp:selectItem>
                <xp:selectItem itemLabel="i"></xp:selectItem>
                <xp:selectItem itemLabel="j"></xp:selectItem>
            </xp:listBox>
        </xp:td>
    </xp:tr>
</xp:table>

1 个答案:

答案 0 :(得分:2)

仅使用查看范围变量,因为您只想操作当前XPage中的值,并且不希望在不同的浏览器选项卡或XPage中设置值。

单击按钮,您希望将第一个列表中的选定值添加到selectItem列表到第二个列表,并将其从第一个列表中删除。添加值后,最好对列表进行排序。

此代码可以满足您的需求:

<xp:table
    style="width:500.0px">
    <xp:tr>
        <xp:td>B list box</xp:td>
        <xp:td></xp:td>
        <xp:td>A list box</xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>
            <xp:listBox
                id="listBox5"
                value="#{viewScope.BLstBoxItem}"
                style="width:100.0px"
                multiple="true">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:
                        if (!viewScope.BselectItems) {
                            viewScope.BselectItems = ["a","b","c"];
                        }
                        return viewScope.BselectItems;
                    }]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox>
        </xp:td>
        <xp:td>
            <xp:button
                id="button4"
                style="width:250.0px">
                <xp:this.value><![CDATA[<------ Values move to B list box]]>
                </xp:this.value>
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
                        if (viewScope.ALstBoxItem) {
                            var sel = [].concat(viewScope.ALstBoxItem);
                            for (var i = 0; i < sel.length; i++) {
                                viewScope.BselectItems.add(sel[i]); 
                                viewScope.AselectItems.remove(sel[i]);
                            }
                            viewScope.BselectItems.sort(); 
                            viewScope.ALstBoxItem = "";
                        }
                    }]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:br></xp:br>
            <xp:br></xp:br>
            <xp:button
                id="button2"
                style="width:250.0px">
                <xp:this.value><![CDATA[Values move to A list box ------>]]>
                </xp:this.value>
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
                        if (viewScope.BLstBoxItem) {
                            var sel = [].concat(viewScope.BLstBoxItem);
                            for (var i = 0; i < sel.length; i++) {
                                viewScope.AselectItems.add(sel[i]); 
                                viewScope.BselectItems.remove(sel[i]);
                            }
                            viewScope.AselectItems.sort(); 
                            viewScope.BLstBoxItem = "";
                        }
                    }]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
        </xp:td>
        <xp:td>
            <xp:listBox
                id="listBox4"
                value="#{viewScope.ALstBoxItem}"
                style="width:100.0px"
                multiple="true">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:
                        if (!viewScope.AselectItems) {
                            viewScope.AselectItems = ["d","e","f","g","h","i"];
                        }
                        return viewScope.AselectItems;
                    }]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox>
        </xp:td>
    </xp:tr>
</xp:table>

更新:代码现在也适用于多个选择。