溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
開(kāi)發(fā)過(guò)程時(shí)常會(huì)出現(xiàn)多選處理的情況:
后臺(tái)數(shù)據(jù)庫(kù)方面：往往應(yīng)用1個(gè)容量較大的字符串類型字段存儲(chǔ)，其內(nèi)容則是將多個(gè)目標(biāo)值應(yīng)用指定分隔符（如“，”）連接在一起的字符串值。
前臺(tái)界面方面：使用多選組件（如：多選列表、復(fù)選框等）實(shí)現(xiàn)候選數(shù)據(jù)展現(xiàn)和選取。
應(yīng)用ManagedBean作為轉(zhuǎn)換器，一方面實(shí)現(xiàn)收集用戶多選結(jié)果值，通過(guò)連接符連接為一個(gè)目標(biāo)存儲(chǔ)值。
本文是基于“ADF Faces 表格應(yīng)用基礎(chǔ)案例一：應(yīng)用List<Class>填充文本表格”編寫的，會(huì)省去許多細(xì)節(jié)部分的介紹。
關(guān)于樣例工程
本文提供的樣例工程將實(shí)現(xiàn)的關(guān)注點(diǎn)設(shè)定為“實(shí)現(xiàn)UI組件和對(duì)目標(biāo)值之間的互動(dòng)”。
實(shí)現(xiàn)思路：
基于ManagedBean提供候選Map值作為數(shù)據(jù)源。
應(yīng)用多種組件實(shí)現(xiàn)多值選中（如：多選下拉列表，復(fù)選框等）
應(yīng)用ManagedBean進(jìn)行所選中的值的收集和設(shè)定。
實(shí)現(xiàn)的基本思路：
將樣例工程的創(chuàng)建過(guò)程分為幾個(gè)小的階段，每個(gè)階段實(shí)現(xiàn)了不同的目標(biāo)。
第一階段
應(yīng)用復(fù)選框作為展現(xiàn)組件
應(yīng)用ManagedBean的Map屬性填充多選框
實(shí)現(xiàn)設(shè)定和獲取其中的值
第二階段
調(diào)整layout屬性影響UI布局
增加至3個(gè)多選組件，實(shí)現(xiàn)相互間的操作聯(lián)動(dòng)
第一階段：
應(yīng)用復(fù)選框作為展現(xiàn)組件
應(yīng)用ManagedBean的Map屬性填充多選框
實(shí)現(xiàn)設(shè)定和獲取其中的值。
創(chuàng)建工程：DemoMultipleValue1
創(chuàng)建JSP：
拖出1個(gè)復(fù)選框組件值頁(yè)面區(qū)域內(nèi)，在彈出框點(diǎn)擊“bind”按鈕：
創(chuàng)建ADF Managed Bean:bean1
創(chuàng)建Bean的屬性：data1，類型是java.util.Map
修改Managed Bean的代碼如下：
package demo.multiplevalue.app1.view;
import java.util.Hashtable;
import java.util.Map;
public class MyBean {
private Map data1;//構(gòu)成多選值的數(shù)據(jù)源
private String[] selectedvalue;//當(dāng)前選定項(xiàng)的清單
private String targetvalue;//最終值如value1,value3……
public MyBean() {
data1 = new Hashtable();
data1.put("key1", "value1");
data1.put("key2", "value2");
data1.put("key3", "value3");
data1.put("key4", "value4");
data1.put("key5", "value5");
data1.put("key6", "value6");
//設(shè)定初始選中值為value1,value3
targetvalue = "value1,value3,";
selectedvalue = targetvalue.split(",");
}
public void setData1(Map data1) {
this.data1 = data1;
}
public Map getData1() {
return data1;
}
public void setSelectedvalue(String[] selectedvalue) {
//用戶更新列表有進(jìn)行命令行輸出。
targetvalue = "";
this.selectedvalue = selectedvalue;
//未選擇任何內(nèi)容則直接返回
if(selectedvalue==null)
return;
for (String v : selectedvalue)
targetvalue += v + ",";
System.out.println("targetvalue:"+targetvalue);
}
public String[] getSelectedvalue() {
return selectedvalue;
}
}Bean中有3個(gè)屬性：
data1：用于提供填充復(fù)選框組件的數(shù)據(jù)源對(duì)象。
selectedvalue：用于記錄用戶選擇復(fù)選框后產(chǎn)生的值數(shù)組。
targetvalue：用于存放將復(fù)選值連接后的目標(biāo)值對(duì)象，此處設(shè)定默認(rèn)值為“value1,value3”。
在構(gòu)造函數(shù)中初始化Map對(duì)象的值內(nèi)容：
data1.put("key1", "value1");
data1.put("key2", "value2");
data1.put("key3", "value3");
data1.put("key4", "value4");
data1.put("key5", "value5");
data1.put("key6", "value6");在回寫selectedvalue值的方法中收集選中值的數(shù)組，并重建目標(biāo)值（targetvalue）對(duì)象。
注意：用戶操作取消選中全部候選項(xiàng)的時(shí)候，該方法也會(huì)被調(diào)用，參數(shù)值會(huì)傳入null對(duì)象。
public void setSelectedvalue(String[] selectedvalue) {
//用戶更新列表有進(jìn)行命令行輸出。
targetvalue = "";
this.selectedvalue = selectedvalue;
//未選擇任何內(nèi)容則直接返回
if(selectedvalue==null)
return;
for (String v : selectedvalue)
targetvalue += v + ",";
System.out.println("targetvalue:"+targetvalue);
}設(shè)定復(fù)選框組件的autoSubmit屬性值為true，為了方便測(cè)試。
修改后的JSP頁(yè)面代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<af:document title="DemoMultiple1.jspx.jsp" id="d1">
<af:form id="f1">
<af:selectManyCheckbox label="Label 1" id="smc1"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true">
<f:selectItems id="si1" value="#{viewScope.bean1.data1}" />
</af:selectManyCheckbox>
</af:form>
</af:document>
</f:view>運(yùn)行測(cè)試頁(yè)面即可看到下圖結(jié)果了，用戶看到的信息是Map對(duì)象的key部分，且默認(rèn)將key1和key3選中了。當(dāng)我們調(diào)整選項(xiàng)為key3和key5被選中的時(shí)候，會(huì)同時(shí)看到服務(wù)端后臺(tái)命令行中輸出了修正后的targetvalue的值。
此時(shí)我們發(fā)現(xiàn)上圖的各項(xiàng)的順序是亂的：key4,key3,key6,key5,key2,key1。其原因是在Managed Bean中構(gòu)建的數(shù)據(jù)源Map對(duì)象的實(shí)際類型是HashMap，將其調(diào)整為Hashtable之后可見(jiàn)列出的序列值即為有序結(jié)果了。
至此我們實(shí)現(xiàn)了第一階段的目標(biāo)
第二階段：
調(diào)整layout屬性影響UI布局
增加至3個(gè)多選組件，實(shí)現(xiàn)相互間的操作聯(lián)動(dòng)。
設(shè)定復(fù)選框組件的layout值為“horizontal”，將布局修改為橫向。
增加2個(gè)多選組件：
設(shè)定partialTriggers為另2個(gè)組件id值實(shí)現(xiàn)相互監(jiān)聽(tīng)。
設(shè)定autoSubmit屬性為true，實(shí)現(xiàn)自動(dòng)提交
修改后JSP頁(yè)面的代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<af:document title="DemoMultiple1.jspx.jsp" id="d1">
<af:form id="f1">
<af:selectManyCheckbox label="Label 1" id="smc1" partialTriggers="smc2 sml1"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" layout="horizontal">
<f:selectItems id="si1" value="#{viewScope.bean1.data1}" />
</af:selectManyCheckbox>
<af:selectManyChoice label="Label 1" id="smc2" partialTriggers="smc1 sml1"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" >
<f:selectItems value="#{viewScope.bean1.data1}" id="si2"/>
</af:selectManyChoice>
<af:selectManyListbox label="Label 1" id="sml1" partialTriggers="smc1 smc2"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" >
<f:selectItems value="#{viewScope.bean1.data1}" id="si3"/>
</af:selectManyListbox>
</af:form>
</af:document>
</f:view>運(yùn)行JSP頁(yè)面即可看到3個(gè)多選組件，每當(dāng)其中任意組件的選中清單被改變的時(shí)候，另外2個(gè)組件都會(huì)同步變化，并且在后臺(tái)看到修正后的新目標(biāo)值。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼