有一个列表框(例如列表框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 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="#{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>
答案 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>
更新:代码现在也适用于多个选择。