深入Beehive标签库系列教程(6) - 使用标签遍历数据

中国IT动力,最新最全的IT技术教程

最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档

当前位置：> Bea专区 > BEA Workshop

深入Beehive标签库系列教程(6) - 使用标签遍历数据

作者:肖菁时间:2006-08-04 13:09 出处:bea.com.cn 责编:月夜寒箫

摘要：深入Beehive标签库系列教程(6) - 使用标签遍历数据

　Web应用中，要遍历对象显示数据的情况非常多，比如我们需要列表显示数据库单个表中的所有用户信息，通常会在Action中获取所有用户信息，然后传递给JSP页面，在JSP页面中遍历后显示，由于MVC架构中要求JSP页面中不能使用Java代码，因此NETUI中提供了对应的标签来完成这部分数据的显示。

　　NETUI标签库中用于遍历显示数据的标签有五个，分别是netui-data:repeater、netui-data:repeaterItem、netui-data: repeaterHeader、netui-data: repeaterFooter、netui-data: cellRepeater。

　　netui-data: cellRepeater 标签可以单独完成遍历显示数据功能，默认使用表格显示数据，它可以通过设置columns属性决定每行显示多条数据，或者设置rows属性表示所有数据使用表格的几行来显示，不过这种方法中我们无法对数据的显示行为进行干预，表格的表头需要使用在标签外部独立生成，而且对于表格的外观只能使用使用css进行定义，无法独立控制。

　　netui-data:repeater、netui-data:repeaterItem、netui-data: repeaterHeader、netui-data: repeaterFooter四个标签可以整合起来完成遍历显示数据的功能，这种方式提供了更好的灵活性。netui-data:repeater标签用于设置要显示的内容；netui-data: repeaterHeader可以设置数据显示前需要显示的内容，比如显示一段文字，或者显示表格的表头；netui-data: repeaterFooter则用于设置数据显示完后需要输出的信息，比如输出表格的结束标签</table>，或者给出一些提示信息；netui-data:repeaterItem标签用于遍历集合中的每一条记录。

　　netui-data: repeaterHeader和netui-data: repeaterFooter标签提供的内容只显示一次，因此主要提供一些辅助内容，比如显示表头内容等，不能用于遍历显示数据。

　　下面我们来看看使用这两种不同的标签显示ArrayList数据的例子，我们使用自定义的JavaBean----UserBean类。为了演示的简单，我们在Action中使用以下的语句创建了10个User对象的集合传递给页面用于显示。


    ArrayList list = new ArrayList();
    
    for( int i = 0;i<10;i++){
    
           UserBean user = new UserBean();
    
           user.setName(“” + i);
    
           user.setPassword(“name” + i);
    
           list.add(user);
    
    }
    
    f.addActionOutput (“users”,list);

netui-data:cellRepeater
　　首先我们来看看使用如何使用netui-data: cellRepeater完成遍历显示数据，首先在JSP页面中使用如下代码完成数据的绑定。

　　<netui-data:declarePageInput name=“users”

　　type=“java.util.ArrayList” required=“true” />

　　然后使用如下代码来显示所有用户的用户编号和名称，设置netui-data:cellRepeater 标签的columns属性为”1”，确定每行显示一个用户的用信息。
```
    
        <table border=“1”>
        
                   <tr>
        
                         <td>用户信息</td>
        
                   </tr>
        
        </table>
        
        <netui-data:cellRepeater dataSource=“pageInput.users” columns=“2” tableClass=“border” >
        
              <netui:span value=“${container.item.name}”/>
        
        </netui-data:cellRepeater>
        
    
    
```
　　另外一种方式是我们设置netui-data:cellRepeater的rows属性为”5”，表示所有内容必须在5行内显示完毕，NETUI会自动地将这些数据按照要求分组后显示。
```
    
        <table border=“1”>
        
                   <tr>
        
                         <td>用户信息</td>
        
                  <td>用户信息</td>
        
                   </tr>
        
        </table>
        
        <netui-data:cellRepeater dataSource=“pageInput.users” rows=“5” tableClass=“border” >
        
              <netui:span value=“${container.item.name}”/>
        
        </netui-data:cellRepeater>
        
    
    
```
　　使用rows属性定义netui-data:cellRepeater标签的用法不多见，因为开发者无法预知可能出现的表格列数，因而也无法提供对应的表头信息。

　　当netui-data:cellRepeater标签中需要显示两列或者多列时，我们可以使用verticalRepeat属性来设置标签如何选择列中的数据。verticalRepeat属性支持”true”、”false”两种选择。

　　当verticalRepeat属性设置为”true”时，标签按照从上往下、从左往右的顺序填充表格；如果将verticalRepeat属性设置为”false”是，netui-data:cellRepeater按照从左到右、从上到下的顺序填充表格。默认情况是”false”。

　　比如上面例子中的10个对象，我们如果每行显示两个对象，当netui-data:cellRepeater标签的verticalRepeat属性为”true”时，显示效果如图1所示。netui-data:cellRepeater标签的verticalRepeat属性为”false”时，显示效果如图2所示

图1 按照从上往下、从左往右的顺序填充表格的效果

图2 按照从左往右、从上往下的顺序填充表格的效果

netui-data:repeater、netui-data:repeaterHeader、netui-data: repeaterFooter、netui-data:repeaterItem

　　和netui-data:cellRepeater标签的例子一样，我们使用<netui-data:declarePageInput name=“users” type=“java.util.ArrayList” required=“true” />完成数据在JSP中的绑定，然后我们增加netui-data:repeater标签，设置它的dataSource属性pageInput.userbeans，增加netui-data:repeaterHeader输出表头信息，还可以增加额外的提示信息，增加netui-data:repeaterItem遍历数据，用一行输出一条记录，最后增加netui-data: repeaterFooter标签完成数据显示，包括关闭<table>标签和显示其他的内容。实现这部分功能的完整代码如下。

    
        <netui-data:repeater dataSource=“pageInput.userbeans”>
        
               <netui-data:repeaterHeader>
        
                   所有User对象信息
        
                   <table border=“1”>
        
                   <tr>
        
                         <td>用户名</td>
        
                         <td>密码</td>
        
                   </tr>
        
               </netui-data:repeaterHeader>
        
               <netui-data:repeaterItem >
        
                   <tr>
        
                         <td><netui:span value=“${container.item.name}” /></td>
        
                         <td><netui:span value=“${container.item.password}” /></td>
        
                   </tr>
        
               </netui-data:repeaterItem>
        
               <netui-data:repeaterFooter>
        
                   </table>
        
               </netui-data:repeaterFooter>
        
        </netui-data:repeater>

　　将%NETUI_HOME%目录下的Web应用编译、发布到Tomcat后(上下文路径netui)，可以使用http://localhost:8080/netui/cellRepeaterExamples.do访问这个netui:cellRepeater标签的例子，使用http://localhost:8080/netui/repeaterExamples.do可以访问netui:repeater标签的例子。

　　和遍历显示数据相关的JSP文件和Java源代码的完整内容请参考下面的代码清单。

　　清单2-14 web\Controller.java

    
        import javax.servlet.http.HttpSession;
        
        import org.apache.beehive.netui.pageflow.Forward;
        
        import org.apache.beehive.netui.pageflow.PageFlowController;
        
        import org.apache.beehive.netui.pageflow.annotations.Jpf;
        
        import org.vivianj.beehive.examples.beans.UserBean;
        
        import java.util.List;
        
        import java.util.ArrayList;
        
        @Jpf.Controller(
        
            simpleActions={
        
              @Jpf.SimpleAction(name="begin", path="index.jsp")
        
            },
        
            sharedFlowRefs={
        
              @Jpf.SharedFlowRef(name="shared", type=shared.SharedFlow.class)
        
            }
        
        )
        
        public class Controller
        
            extends PageFlowController
        
        {
        
               @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "pageInputExample.jsp") })
        
            public Forward pageInputExamples() {
        
                   Forward f = new Forward("success");
        
                   /* 向JSP页面传递数据 */
        
              f.addActionOutput("hellostring", "Hello World!");
        
                   String[] strings = new String[]{"Hello World!","Hello Beehive!"};
        
                   /* 向JSP页面传递数组 */
        
              f.addActionOutput("strings", strings);
        
                   /* 向JSP页面传递自定义对象 */
        
                   UserBean userBean = new UserBean();
        
                   userBean.setId(100);
        
                   userBean.setName("UserBean100");
        
              f.addActionOutput("userbean", userBean);
        
                   /* 向JSP页面传递List对象 */
        
                   List list = new ArrayList();
        
                   list.add(userBean);
        
                   UserBean userBean1 = new UserBean();
        
                   userBean.setId(101);
        
                   userBean.setName("UserBean101");
        
                   list.add(userBean1);
        
        
        
              f.addActionOutput("userbeans", list);
        
              return f;
        
            }
        
               @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "cellRepeaterExample.jsp") })
        
            public Forward cellRepeaterExamples() {
        
                   Forward f = new Forward("success");
        
                   ArrayList list = new ArrayList();
        
                   for( int i = 0;i<10;i++){
        
                         UserBean user = new UserBean();
        
                         user.setId(i);
        
                         user.setName("name" + i);
        
        
        
                         list.add(user);
        
                   }
        
        
        
              f.addActionOutput("userbeans", list);
        
              return f;
        
            }
        
               @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "repeaterExample.jsp") })
        
            public Forward repeaterExamples() {
        
                   Forward f = new Forward("success");
        
                   ArrayList list = new ArrayList();
        
                   for( int i = 0;i<10;i++){
        
                         UserBean user = new UserBean();
        
                         user.setId(i);
        
                         user.setName("name" + i);
        
        
        
                         list.add(user);
        
                   }
        
        
        
              f.addActionOutput("userbeans", list);
        
              return f;
        
            }
        
            protected void onCreate()
        
            {
        
            }
        
            protected void onDestroy(HttpSession session)
        
            {
        
            }
        
        }

　　清单2-15 web\cellRepeaterExamples.jsp

    
        <%@ page language="java" contentType="text/html;charset=gb2312"%>
        
        <%@ page import="org.vivianj.beehive.examples.beans.UserBean" %>
        
        <%@ 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>Repeater Examples</title>
        
            <netui:base/>
        
               <style type="text/css">
        
            <!--
        
            .p1 {
        
                 width: 200;
        
                 border: 1px solid;
        
            }
        
            -->
        
           </style>
        
          </head>
        
          <netui:body>
        
               <center>使用标签遍历显示数据的例子</center><BR>
        
               <netui-data:declarePageInput name="userbeans"
        
                   type="java.util.ArrayList" required="true" />
        
               <TABLE border="1" width="800" align="Center">
        
               <TR>
        
                   <TD>使用netui-data:cellRepeater标签遍历显示数据</TD>
        
                   <TD>在netui-data:cellRepeater标签上应用css样式</TD>
        
               </TR>
        
               <TR>
        
                   <TD valign="top">
        
                   <center>
        
                   <table>
        
                         <tr>
        
                             <td>编号 : 名称</td>
        
                         </tr>
        
                   </table>
        
                   </center>
        
                   <center>
        
                         <netui-data:cellRepeater dataSource="pageInput.userbeans"
        
                     columns="1">
        
                                   <netui:span value="${container.item.id}"/> :
        
                                 <netui:span value="${container.item.name}"/>
        
                         </netui-data:cellRepeater>
        
                   </center>
        
                   </TD>
        
                   <TD valign="top">
        
                   <center>
        
                   <table class="p1">
        
                         <tr>
        
                             <td>编号 : 名称</td>
        
                         </tr>
        
                   </table>
        
                   </center>
        
                   <center>
        
                         <netui-data:cellRepeater dataSource="pageInput.userbeans"
        
                    columns="2" tableClass="p1" cellClass="p1"
        
                    verticalRepeat="false">
        
                                   <netui:span value="${container.item.id}"/> :
        
                                   <netui:span value="${container.item.name}"/>
        
                         </netui-data:cellRepeater>
        
                   </center>
        
                   </TD>
        
               </TR>
        
               </TABLE>
        
          </netui:body>
        
        </netui:html>

　　清单2-16 web\repeaterExamples.jsp

    
        <%@ page language="java" contentType="text/html;charset=gb2312"%>
        
        <%@ page import="org.vivianj.beehive.examples.beans.UserBean" %>
        
        <%@ 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>Repeater Examples</title>
        
            <netui:base/>
        
          </head>
        
          <netui:body>
        
               <center>使用标签遍历显示数据的例子</center><BR>
        
               使用netui-data:repeater标签遍历显示数据
        
               <netui-data:declarePageInput name="userbeans"
        
                   type="java.util.ArrayList" required="true" />
        
               <netui-data:repeater dataSource="pageInput.userbeans">
        
               <netui-data:repeaterHeader>
        
                   所有User对象信息
        
                   <table border="1">
        
                   <tr>
        
                         <td>用户名</td>
        
                         <td>密码</td>
        
                   </tr>
        
               </netui-data:repeaterHeader>
        
               <netui-data:repeaterItem >
        
                   <tr>
        
                         <td><netui:span value="${container.item.id}" /></td>
        
                         <td><netui:span value="${container.item.name}" /></td>
        
                   </tr>
        
               </netui-data:repeaterItem>
        
               <netui-data:repeaterFooter>
        
                   </table>
        
               </netui-data:repeaterFooter>
        
        </netui-data:repeater>
        
          </netui:body>
        
        </netui:html>

关闭本页