JSF 列表框多選

2018-02-20 13:20 更新

JSF教程 - JSF 列表框多選


以下代碼顯示了如何創(chuàng)建多個可選擇選擇框。

h:selectManyListbox標記渲染HTML輸入元素的類型“select"與大小和多個指定。

下面的JSF代碼

<h:selectManyListbox value="#{userData.data}">
   <f:selectItem itemValue="1" itemLabel="Item 1" />
   <f:selectItem itemValue="2" itemLabel="Item 2" />
</h:selectOneListbox>

被渲染成以下HTML代碼。

<select name="j_idt6:j_idt8" size="2" multiple="multiple">  
   <option value="1">Item 1</option>
   <option value="2">Item 2</option>
</select>

標簽屬性

屬性描述
id標簽的標識
binding引用在backing bean中使用的組件
rendered布爾值; false將抑制渲染
styleClass級聯(lián)樣式表(CSS)類名稱
value值綁定
valueChangeListener響應值更改的方法綁定
converter轉(zhuǎn)換器類名
validator附加到組件的驗證器的類名
required布爾值; 如果為true，則根據(jù)需要標記標簽
accesskey給予一個元素的焦點
accept表單的內(nèi)容類型的逗號分隔列表
accept-charset表單的字符編碼的逗號或空格分隔列表。
alt非文字元素(例如圖片)的替代文字
border元素的邊框?qū)挾鹊南袼刂?/td>
charset鏈接資源的字符編碼
coords形狀為矩形，圓形或多邊形的元素的坐標
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
disabled輸入元素或按鈕的禁用狀態(tài)
hreflang使用 href 屬性指定的資源的基本語言;
lang元素的屬性和文本的基本語言
maxlength文本字段的最大字符數(shù)
readonly輸入字段的只讀狀態(tài)
style內(nèi)聯(lián)樣式信息
tabindex指定制表符索引的數(shù)值
target打開文檔的框架的名稱
title用于輔助功能的標題。 瀏覽器通常為標題的值創(chuàng)建工具提示
type鏈接類型; 例如樣式表
width元素的寬度
onblur失去焦點的事件處理程序
onchange值更改的事件處理程序
onclick鼠標按鈕的事件處理程序點擊該元素
ondblclick雙擊鼠標按鈕的事件處理程序
onfocus元素接收焦點的事件處理程序
onkeydown按鍵的事件處理程序
onkeypress鍵按下并釋放的事件處理程序
onkeyupKey的事件處理程序發(fā)布
onmousedown鼠標按鈕的事件處理程序
onmousemove鼠標移動的事件處理程序
onmouseout鼠標左的事件處理程序
onmouseover鼠標移動到的事件處理程序
onmouseup釋放鼠標按鈕的事件處理程序
onreset表單重置的事件處理程序
onselect選擇文本的事件處理程序
immediate在生命周期的早期進行過程驗證

例子

以下代碼來自demo.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Hard-coded with "f:selectItem" : 
       <h:selectManyListbox value="#{user.item}">
         <f:selectItem itemValue="A" itemLabel="Item A" />
         <f:selectItem itemValue="B" itemLabel="Item B" />
         <f:selectItem itemValue="C" itemLabel="Item C" />
       </h:selectManyListbox>
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自result.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>

下面的代碼來自UserBean.java。

package cn.w3cschool.common;


import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
}

下載 SelectManyListBox_Hardcode_Value.zip

SelectManyListBox var

下面的代碼來自UserBean.java。

package cn.w3cschool.common;


import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
  //Generated by Object array
  public static class Item{
    public String label;
    public String value;
    
    public Item(String l, String v){
      this.label = l;
      this.value = v;
    }
    
    public String getLabel(){
      return label;
    }
    
    public String getValue(){
      return value;
    }
    
  }
  
  public Item[] itemList;
  
  public Item[] getItemValue() {
    itemList = new Item[3];
    itemList[0] = new Item("Item A", "A");
    itemList[1] = new Item("Item B", "B");
    itemList[2] = new Item("Item C", "C");
    
    return itemList;
  }

}

以下代碼來自demo.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Generated by Object array and iterate with var :
       <h:selectManyListbox value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" var="f"
         itemLabel="#{f.label}" itemValue="#{f.value}" />
       </h:selectManyListbox>
       
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自result.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>

下載 SelectManyListBox_var.zip

從映射選擇列表框

下面的代碼來自UserBean.java。

package cn.w3cschool.common;


import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
  private static Map<String,Object> itemValue;
  static{
    itemValue = new LinkedHashMap<String,Object>();
    itemValue.put("Item A", "A"); //label, value
    itemValue.put("Item B", "B");
    itemValue.put("Item C", "C");
  }
  
  public Map<String,Object> getItemValue() {
    return itemValue;
  }

}

以下代碼來自demo.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Generated by Map :
       <h:selectManyListbox value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" />
       </h:selectManyListbox>
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自result.xhtml。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>
下載SelectManyListBox_From_Map.zip

運行

將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾，并運行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動后，在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號