列表框中的范围变量 [英] Scoped Variable in List Box
问题描述
有一个列表框(例如列表框 A)包含值，如果我单击一个按钮(例如按钮 X)，它会将选定的值添加到另一个列表框(例如列表框 B).执行此操作后，列表框 B 将具有要显示的选择值.
There is a list box(e.g. list box A) contains values and if I click a button(e.g. button X), it will add the selected value to the other list box(e.g. list box B). After this action the list box B will have the select value to display.
在列表框 B 中(假设它有来自列表框 A 的值)，如果我单击另一个按钮(例如按钮 Y)，则从列表框 B 中选择的值返回到列表框 A
In list box B (suppose it has values from list box A), if I click another button(e.g. button Y), the selected value from list box B returns to list box A
我按照这个帖子中的回答并尝试应用代码到列表框.
I follow the answer from this post and try to apply the code to the list box.
当我运行它时，我可以从列表框 A 中添加值(仅单个值).但我无法将值从列表框 B 移动到列表框 A.我认为原因可能与不同范围的变量有关:列表框A 使用视图范围变量，列表框 B 使用会话范围变量.
When I run it, I can add value(a single value only) from list box A. But I cannot move the value from list box B to list box A. I think the reason maybe about different scoped variable: list box A use view scope variable and list box B use session scope variable.
我在 stackoverflow 中搜索了关于列表框中交换作用域变量的各种帖子，但我仍然没有这个想法.
I search various posts in stackoverflow about exchange scope variable in list box but I still don't have the idea.
我发布代码是因为它很有用.感谢您的帮助.
I post the code in cause it is useful. Thanks for your help.
<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>
<小时>
推荐答案
使用 view scope 变量仅当您只想操作当前 XPage 中的值并且不想跨区域设置值时不同的浏览器标签页或 XPage.
Use view scope variables only as you want to manipulate the values in current XPage only and don't want to set the values across different browser tabs or XPages.
单击您的按钮，您希望将第一个列表中的选定值添加到 selectItem 列表到第二个列表，并将其从第一个列表中删除.添加值后最好对列表进行排序.
With a click on your button, you want to add the selected value from first list to selectItem list to second list and remove it from first list. After adding a value it's good to sort the list.
此代码满足您的要求:
<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>
更新:代码现在也适用于多选.
Update: the code works with multiple selection now too.
这篇关于列表框中的范围变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
