时间：2006-06-22 作者：肖菁 浏览次数： 本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程

文章工具  推荐给朋友  打印文章

• 前提条件
• 基本NETUI标签
• 表单：文本框和按钮
• 表单：单选框
• 表单：多选框
• 表单：下拉框
• 使用标签遍历数据
• 数据分页显示标签组
• 基于模版的页面组装技术

　　下拉框是表单(Form)中显示可选择数据的一种形式，下拉框可以支持单选，也可以支持多选，NETUI中netui:select和netuiOption这两个标签支持下拉框的显示。

　　netui:select标签用于声明一个下拉框，它的dataSource属性用于设置显示时下拉框中那些选项已经被选中，我们可以给它的dataSource传递单个String参数表示下拉框组中有一个选项默认被选择，也可以传递一个String数组，表示下拉框中有多个选项默认被选中。netui:select的multiple设置为true时可以设置该下拉框支持多选，否则下拉框只能单选。

　　 netui: selectOption用于提供可选择项的信息。

　　 我们可以在JSP中增加下面的代码，在页面上简单的显示一个下拉框。

 
<netui:select dataSource=“color”>
 
    <netui: selectOption value=“1”>1</netui: selectOption ><br>
 
    <netui: selectOption value=“2”>2</netui: selectOption ><br>
 
    <netui: selectOption value=“3”>3</netui: selectOption ><br>
 
    <netui: selectOption value=“4”>4</netui: selectOption ><br>
 
</netui: select >

　　我们可以将netui:select标签的multiple属性设置为true，下面的代码可以在页面上显示一个支持多选的下拉框。

 
<netui:select multiple=”true”
 
         dataSource=“color”>
 
        <netui: selectOption value=“1”>1</netui: selectOption ><br>
 
        <netui: selectOption value=“2”>2</netui: selectOption ><br>
 
        <netui: selectOption value=“3”>3</netui: selectOption ><br>
 
        <netui: selectOption value=“4”>4</netui: selectOption ><br>
 
</netui: select >

　　下面的代码设置netui:select标签的dataSource属性为一个字符串，设置下拉框中一个选项默认被选中的情况。

 
<%
 
request.setAttribute("color", "#00FF00");
 
%>
 
<netui:select dataSource="color">
 
        <netui:selectOption value="#FF0000">红色</netui:selectOption>
 
        <netui:selectOption value="#00FF00">蓝色</netui:selectOption>
 
        <netui:selectOption value="#0000FF">绿色</netui:selectOption>
 
        <netui:selectOption value="#FFFFFF">白色</netui:selectOption>
 
</netui:select>

　　我们还可以用下面的代码来设置下拉框组中多个选项默认被选中，这种情况中传递给dataSource的值是String数组。注意这种情况下netui:select标签的multiple应该设置为true。

 
<%
 
        String[] checkedColors = new String[] {"#00FF00", "#0000FF"};
 
        request.setAttribute("colors2", checkedColors);
 
%>
 
<netui:select multiple="true"
 
          dataSource="colors2">
 
        <netui:selectOption value="#FF0000">红色</netui:selectOption>
 
        <netui:selectOption value="#00FF00">蓝色</netui:selectOption>
 
        <netui:selectOption value="#0000FF">绿色</netui:selectOption>
 
        <netui:selectOption value="#FFFFFF">白色</netui:selectOption>
 
</netui:select>

　　有些情况下，下拉框的选项并不是固定的，而是不断变化的，这种情况下如果使用上面的处理方法，我们就需要在JSP页面中使用循环来完成显示。值得庆幸的是，netui: select标签提供了另外一种简单的形成多选框组的简单方法----使用optionsDataSource属性，optionsDataSource属性可以支持绑定到数组、Hashtable或者是List类型的变量上， netui: select标签输出的时候将自动根据绑定的对象内容生成可选择项，使用这种方式可以减少netui:selectOption标签的应用，增加页面显示的灵活性。

　　optionsDataSource属性同时支持绑定到数组、Hashtable或者是List类型的变量上，不过不同的选择会让netui: select的行为有些差异。

1. 选择绑定到数组时，生成的选择项的value属性和要显示的内容是一致的，都是数组项的值。

　　比如我们选择将netui: select标签的optionsDataSource属性绑定到String[] colors = new String[] {"#FF0000", "#00FF00", "#0000FF","#FFFFFF"};这样一个数组时，生成的对应的主要HTML内容如下。

　　<input type="hidden" value="true">

　　<option value="#FF0000">#FF0000</option>

　　<option value="#00FF00">#00FF00</option>

　　<option value="#0000FF">#0000FF</option>

　　<option value="#FFFFFF">#FFFFFF</option>

　　</select>

• 选择绑定到List类型变量时，通常生成的选择项的value属性和要显示的内容是一致的，都是List中对象的toString方法返回的内容。

　　比如我们选择将netui: select标签的optionsDataSource属性绑定到一个List对象，并且使用下面的代码初始化这个对象。

　　ArrayList list = new ArrayList();

　　list.add("#FF0000");

　　list.add("#00FF00");

　　list.add("#0000FF");

　　list.add("#FFFFFF");

　　netui: select标签对应生成的主要HTML内容如下。

　　<select>

　　<option value="#FF0000">#FF0000</option>

　　<option value="#00FF00">#00FF00</option>

　　<option value="#0000FF">#0000FF</option>

　　<option value="#FFFFFF">#FFFFFF</option>

　　</select>

• 选择绑定到Hashtable类型变量时，生成的选择框的value属性内容对应Hashtable中对象的key，而选择项(option)的要显示的内容对应Hashtable中对象的value。

　　比如我们选择将netui: select标签的optionsDataSource属性绑定到一个Hashtable对象，并且使用下面的代码初始化这个对象。

　　Hashtable h = new Hashtable();

　　h.put("#FF0000","红色");

　　h.put("#00FF00","蓝色");

　　h.put("#0000FF","绿色");

　　h.put("#FFFFFF","白色");

　　netui: checkBoxGroup标签对应生成的主要HTML内容如下。

　　<select>

　　<option value="#FFFFFF">白色</option>

　　<option value="#0000FF">绿色</option>

　　<option value="#00FF00" >蓝色</option>

　　<option value="#FF0000">红色</option>

　　</select>

　　下面我们以数组为例，学习如何使用数组来完成netui: select标签的初始化。首先我们定义一个数组，这个数组中包含了单选框的所有选择项”#FF0000”、”#00FF00”、”#0000FF”、”#FFFFFF”，调用request的setAttribute方法将这个数组加入到request中，然后将netui: select标签的optionsDataSource属性设置为这个数组。下面的代码显示了如何使用数组来初始化netui:select标签。

 
<%
 
        request.setAttribute("color", "#00FF00");
 
        String[] colors = new String[] {"#FF0000", "#00FF00",
 
"#0000FF","#FFFFFF"};
 
        request.setAttribute("colors2", colors);
 
%>
 
        <netui:select dataSource="color"
 
          optionsDataSource="${colors2}" />

　　netui:select标签使用时，optionsDataSource和dataSource属性的写法是有差异的，上面的例子中（第8行）optionsDataSource的属性被设置为${colors2}，表示这是一个JSP的隐含变量，而dataSource的属性直接设置为color（第7行），不需要使用${}来包含。

如何使用Hashtable和List类型变量初始化netui: select标签的用法请参见清单1。

　　清单1 web\inputSelectExamples.jsp

 
<%@ page language="java" contentType="text/html;charset=gb2312"%>
 
<%@ page import="java.util.Hashtable" %>
 
<%@ page import="java.util.ArrayList" %>

 
<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
 
    prefix="netui-data"%>
 
<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
 
    prefix="netui"%>
 
<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
 
    prefix="netui-template"%>
 
<netui:html>
 
  <head>
 
    <title>Select Examples</title>
 
    <netui:base/>
 
  </head>
 
  <netui:body>
 
        <center>使用标签显示下拉框的例子</center><BR>
 
        <netui:form action="begin">
 
        简单的下拉框的例子:<BR>
 
        <netui:select dataSource="colors2">
 
           <netui:selectOption value="#FF0000">
 
          红色
 
        </netui:selectOption>
 
           <netui:selectOption value="#00FF00">
 
          蓝色
 
        </netui:selectOption>
 
           <netui:selectOption value="#0000FF">
 
          绿色
 
        </netui:selectOption>
 
           <netui:selectOption value="#FFFFFF">
 
          白色
 
        </netui:selectOption>
 
        </netui:select><BR><BR>
 
        简单的下拉框的例子--支持多选:<BR>
 
        <netui:select multiple="true" dataSource="colors2">
 
           <netui:selectOption value="#FF0000">
 
          红色
 
        </netui:selectOption>
 
           <netui:selectOption value="#00FF00">
 
          蓝色
 
        </netui:selectOption>
 
           <netui:selectOption value="#0000FF">
 
          绿色
 
        </netui:selectOption>
 
           <netui:selectOption value="#FFFFFF">
 
          白色
 
        </netui:selectOption>
 
        </netui:select><BR><BR>
 
        简单的下拉框--设置单个选择项被选中的例子:<BR>
 
        <%
 
           request.setAttribute("color", "#00FF00");
 
        %>
 
        <netui:select
 
             dataSource="color">
 
           <netui:selectOption value="#FF0000">
 
          红色
 
        </netui:selectOption>
 
           <netui:selectOption value="#00FF00">
 
          蓝色
 
        </netui:selectOption>
 
           <netui:selectOption value="#0000FF">
 
          绿色
 
        </netui:selectOption>
 
           <netui:selectOption value="#FFFFFF">
 
          白色
 
        </netui:selectOption>
 
        </netui:select><BR><BR>

 
        简单的下拉框--使用数组设置多个选择项被选中的例子:<BR>
 
        <%
 
           String[] checkedColors = new String[] {"#00FF00", "#0000FF"};
 
           request.setAttribute("colors2", checkedColors);
 
        %>
 
        <netui:select multiple="true"
 
                 dataSource="colors2">
 
           <netui:selectOption value="#FF0000">
 
          红色
 
        </netui:selectOption>
 
           <netui:selectOption value="#00FF00">
 
          蓝色
 
        </netui:selectOption>
 
           <netui:selectOption value="#0000FF">
 
          绿色
 
        </netui:selectOption>
 
           <netui:selectOption value="#FFFFFF">
 
          白色
 
        </netui:selectOption>
 
        </netui:select><BR><BR>

 
        下拉框--使用数组初始化netui:select标签的例子:<BR>
 
        <%
 
        request.setAttribute("color", "#00FF00");
 
        String[] colors = new String[] {"#FF0000", "#00FF00",
 
        "#0000FF","#FFFFFF"};
 
        request.setAttribute("colors2", colors);
 
        %>
 
        <netui:select dataSource="color"
 
           optionsDataSource="${colors2}" /><BR><BR>

 
        下拉框--使用Hashtable初始化netui:select标签的例子:<BR>
 
        <%
 
        request.setAttribute("color", "#00FF00");
 
        Hashtable h = new Hashtable();
 
        h.put("#FF0000","红色");
 
        h.put("#00FF00","蓝色");
 
        h.put("#0000FF","绿色");
 
        h.put("#FFFFFF","白色");
 
        request.setAttribute("colors2", h);
 
        %>
 
        <netui:select dataSource="color"
 
           optionsDataSource="${colors2}" /><BR><BR>


 
        简单的下拉框--使用List初始化netui:select标签的例子:<BR>
 
        <%
 
        ArrayList list = new ArrayList();
 
        list.add("#FF0000");
 
        list.add("#00FF00");
 
        list.add("#0000FF");
 
        list.add("#FFFFFF");
 
        request.setAttribute("colors3", list);
 
        %>
 
        <netui:select dataSource="color3"
 
           optionsDataSource="${colors3}" /><BR><BR>

 
        <netui:anchor formSubmit="true">提交</netui:anchor>
 
        </netui:form>

 
  </netui:body>
 
</netui:html>



作者简介
肖菁	肖菁 是唯J族(www.vivianj.org)创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。





  作者其它文章
• 将支持Websphere的企业应用转化为支持Weblogic
• WebLogic8中的扩展JSP标签实例解析
• 用Pollinate可视化开发页面流（JPF）
• Beehive中的页面流
• Beehive中的Web服务开发
您对本文的评价
您对这篇文章的看法如何?
太棒了！5分 不错啊 4分 一般般 3分 有待提高 2分 不好 1分