问题
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.
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.
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.
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>
回答1:
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.
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.
This code does what you are looking for:
<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.
来源：https://stackoverflow.com/questions/35401140/scoped-variable-in-list-box