Jsp实现页面forEach循环遍历多条数据的显示和后台对应数据的获取(strurs1)实现

最新推荐文章于 2024-07-25 09:29:51 发布
最新推荐文章于 2024-07-25 09:29:51 发布
阅读量9.5k 收藏 5
点赞数
分类专栏： java

使用jstl标签和form动态的页面数据显示操作获取！

html代码：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <body>  
  2.     <center>  
  3.         <div id="header"></div>  
  4.         <div id="divuser">  
  5. <input id="contextPath" type="hidden" value="${pageContext.request.contextPath}"/>        <form id="userform">  
  6.             <table id="usertb" width="655" border="0" cellpadding="2" cellspacing="0">  
  7.             <caption>用户信息表</caption>  
  8.                 <c:if test="${empty userList}">  
  9.                     <tr>  
  10.                         <td><span>user data is null!</span></td>  
  11.                     </tr>  
  12.                 </c:if>  
  13.                 <c:forEach items="${userList}" var="user" varStatus="userStatus">  
  14.                     <tr>  
  15.                       <td width="40" align="center" class="tb_td_border">  
  16.                       <input id="uid${userStatus.index}" name="uid" type="radio" value="${userStatus.index}" />  
  17.                   </td>  
  18.                       <td width="100" align="center" class="tb_td_border">  
  19.                     <label for="uid${userStatus.index}"><span class="font12_blue">${user.userName }</span></label>  
  20.                   </td>  
  21.                       <td width="100" align="center" class="tb_td_border">  
  22.                     <label for="uid${userStatus.index}"><span class="font12_blue">${user.userGender}</span></label>  
  23.                   </td>  
  24.                       <td width="100" align="left" class="tb_td_border">  
  25.                     <label for="uid${userStatus.index}"><span class="font12_blue">${user.userEmail }</span></label>  
  26.                   </td>  
  27.                       <td width="100" align="center" class="tb_td_border">  
  28.                     <label for="uid${userStatus.index}"><span class="font12_blue">${user.userBirthDay }</span></label>  
  29.                   </td>  
  30.                       <td width="100" align="center" class="tb_td_border">  
  31.                     <label for="uid${userStatus.index}"><span class="font12_blue">${user.userAddress }</span></label>  
  32.                   </td>  
  33.                       <td width="110" align="center" class="tb_td_border">  
  34.                         <div id="divnickname${userStatus.index}">  
  35. <input id="nickname${userStatus.index }" name="nickname" type="text" class="font12_blue" maxlength="7" style="width: 100;" value="" onfocus="radiocheckbytextfocus(this);" />  
  36.                         </div></td>  
  37.                     </tr>  
  38.                         <input name="userId" type="hidden" value="${user.userId }" />  
  39.                             <input name="userName" type="hidden" value="${user.userName }" />  
  40.                         <input name="userGender" type="hidden" value="${user.userGender}" />  
  41.                         <input name="userEmail" type="hidden" value="${user.userEmail }" />  
  42.                         <input name="userBirthDay" type="hidden" value="${user.userBirthDay }" />  
  43.                         <input name="userAddress" type="hidden" value="${user.userAddress }" />  
  44.                 </c:forEach>  
  45.                     <tr>  
  46.                         <td colspan="7" align="right">  
  47.                             <input type="button" id="btsubmit" name="btsubmit" value="go>>..." />  
  48.                         </td>  
  49.                     </tr>  
  50.             </table>  
  51.         </form>  
  52.         </div>  
  53.         <div id="divbodyer"></div>  
  54.         <hr size="2" noshade="noshade" width="665px" color="#4DFFFF"; />  
  55.         <div id="div2user">  
  56.             <table id="tbusernn" width="665" cellpadding="0" cellspacing="0" border="0">  
  57.                 <c:if test="${empty userLink}">  
  58.                     <tr>  
  59.                         <td>user data is null!</td>  
  60.                     </tr>  
  61.                 </c:if>  
  62.                 <c:forEach items="${userLink}" var="usernn" varStatus="usernnStatus">  
  63.                     <tr>  
  64.                     <td width="100" align="center">${usernn.key }</td>  
  65.                     <td align="center">${usernn.value.id } - ${usernn.value.name } - ${usernn.value.phone }</td>  
  66.                     </tr>  
  67.                 </c:forEach>            
  68.             </table>  
  69.         </div>  
  70.     </center>  
  71.   </body>  

注解：<label for="uid${userStatus.index}"> for标签：for 属性规定 label 与哪个表单元素绑定（显示的联系），点击文本就会自动选中，当前for指向id的radio按钮。
 jstl的c:forEach标签的属性：用于通用数据循环，它的属性：

    items(属 性)：进行循环的项目 (描述)，否(是否必须)，无(缺省值)

    var：代表当前项目的变量名，否，无

    varStatus：显示循环状态的变量，否，无

    begin：开始条件，否，0

    end：结束条件，否，集合中的最后一个项目

    step：步长，否，1

jstl中的varStatus和 var 属性一样， varStatus 用于创建限定了作用域的变量。不过，由 varStatus 属性命名的变量并不存储当前索引值或当前元素，而是赋予 javax.servlet.jsp.jstl.core.LoopTagStatus 类的实例。该类定义了一组特性，它们描述了迭代的当前状态，下面列出了这些特性:

<c:forEach var=”user" items=”${users}" varStatus=”status”>
<c:out value=”${status.current}”/> 当前对象
<c:out value=”${status.index}”/> 此次迭代的索引
<c:out value=”${status.count}”/> 已经迭代的数量
<c:out value=”${status.first}”/> 是否是第一个迭代对象
<c:out value=”${status.last}”/> 是否是最后一个迭代对象
</c:forEach>

<c:forEach>标签的items属性支持Java平台所提供的所有标准集合类型。此外，您可以使用该操作来迭代数组（包括基本类型数组）中的元素。它所支持的集合类型以及迭代的元素如下所示：
java.util.Collection：调用iterator()来获得的元素。
java.util.Map：通过java.util.Map.Entry所获得的实例。
java.util.Iterator：迭代器元素。
java.util.Enumeration：枚举元素。
Object实例数组：数组元素。
基本类型值数组：经过包装的数组元素。 
用逗号定界的String：分割后的子字符串。
javax.servlet.jsp.jstl.sql.Result：SQL查询所获得的行。
并且使用“index”可以动态的使用js操作页面元素，和后台获取请求数据。

js代码：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $(document).ready(function(){  
  2.     //submit html data  
  3.     $("#btsubmit").click(function(){  
  4.         var raduid = $("input[name=uid]:checked").val();  
  5.         if(raduid == null || raduid == ""){  
  6.             alert("请选择用户");  
  7.             return;  
  8.         }  
  9.         var userForm = $("#userform").get(0);  
  10. var path = $("#contextPath").val();     userForm.action =path+"/usergetinfo.do?param=getHtmlUserInfo";  
  11.         userForm.method = "post";  
  12.         userForm.submit();  
  13.         $("#btsubmit").prop("disabled",true);  
  14.     });  
  15. });  
  16. //鼠标进入文本框，自动选中radio  
  17. function radiocheckbytextfocus(obj){  
  18.     var nicknameId = $(obj).attr("id");  
  19.     var radioId = nicknameId.substring(8);  
  20.     var uidId = "#uid"+radioId;  
  21.     $(uidId).prop("checked",true);  
  22. }  

注解：$( elem ).attr( "checked" )
1.6版本前返回值为boolean,1.6+返回值为string，为属性的实际值，而不是boolean.
新的浏览器返回的是“checked”，老的浏览器返回的是true，所以不能使用attr ；.prop()方法被用来处理boolean attributes。

页面隐藏多条数据，值显示几条可以：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. function bkchange(obj)         
  2. {           
  3. var img_path=obj.src;    
  4.      
  5.  if (img_path.lastIndexOf("images/jiantouup.jpg")>=0)  
  6.  {  
  7.      obj.src="images/jiantoudown.jpg";  
  8.      $("tr[class='bkhide']").show();  
  9.  }        
  10.  else{  
  11.      obj.src="images/jiantouup.jpg";   
  12.      if($("input[name=uid]:checked").val()+1>3){  
  13.      $("input[name=sid]").attr("checked",false);  
  14.      }  
  15.      $("tr[class='bkhide']").hide();  
  16.  }    
  17. }  

js操作表格迭代操作数据(迭代行下列获取单元格数据)：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $("#tbuser tr").each(function(){  
  2. /get user name  
  3.     var userName = $(this).children("td").eq(1).text().trim();  
  4. });  

js使用“$(obj).attr("id");”获取当前的id。或者$(this).attr("id");

js提交异步提交表单表单,数据为“$("#userForm").serialize()”，可以使用：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $.ajax({  
  2.         url:"getNickName.do?uid="+index,  
  3.         type:"post",  
  4.         timeout:20000,  
  5.         data:$("#userForm").serialize(),  
  6.         success:function(data){  
  7.             if(data==null){  
  8.                 data = "";  
  9.             }  
  10.             $(divuserhint).html("");  
  11.             $(userId).attr("value",data);  
  12.             clockradio("query");//callback "query"=method flag  
  13.         },  
  14.         error:function(){  
  15.             $(userId).attr("value","");  
  16.             $(divuserhint).html(user_info[3]);//js i18n  
  17.         }  
  18.     });  

 struts的配置文件(struts-config.xml)：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <form-beans>  
  2.     <form-bean name="UserDataForm" type="com.ts.form.UserDataForm"></form-bean>  
  3. </form-beans>  
  4. <action path="/usergetinfo" name="UserDataForm" parameter="param"  scope="request"   
  5.   type="com.ts.actions.UserDataAccessAction">  
  6. lt;forward name="success" path="/tsjsp/userinfo.jsp"></forward>  
  7. </action>  


Action处理：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. package com.ts.actions;  
  2. import java.io.UnsupportedEncodingException;  
  3. import java.util.LinkedHashMap;  
  4. import java.util.Vector;  
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7. import javax.servlet.http.HttpSession;  
  8. import org.apache.log4j.Logger;  
  9. import org.apache.struts.action.ActionForm;  
  10. import org.apache.struts.action.ActionForward;  
  11. import org.apache.struts.action.ActionMapping;  
  12. import org.apache.struts.actions.DispatchAction;  
  13. import com.ts.services.vo.LinkUser;  
  14. import com.ts.services.vo.UserSVo;  
  15. import com.ts.testdatas.LinkedMapTestData;  
  16. import com.ts.testdatas.UserTestData;  
  17.   
  18.  /**  
  19.  * ClassName: LinkedMapDataAccessAction <br/>  
  20.  * Date: 2015-1-14 上午10:20:49 <br/>  
  21.  * <br/>  
  22.  *   
  23.  * @author tskk@ts.com  
  24.  *   
  25.  * first made   
  26.  * @version 0.0.1<br/>  
  27.  *   
  28.  */  
  29.   
  30. public class UserDataAccessAction extends DispatchAction {  
  31.     //log  
  32.     private static final Logger LOG = Logger.getLogger(UserDataAccessAction.class);  
  33.     /**  
  34.      *   
  35.      * getUserInfo:users information <br/>  
  36.      * @param mapping mapping  
  37.      * @param form form  
  38.      * @param request request  
  39.      * @param response response  
  40.      * @return forword mapping <br/>  
  41.      */  
  42.     public ActionForward getDBUserInfo(ActionMapping mapping, ActionForm form, HttpServletRequest request,HttpServletResponse response){  
  43.         //get request session  
  44.         HttpSession session = request.getSession();  
  45.         Vector<UserSVo> userList = UserTestData.getUserTestData();  
  46.         LOG.info("userList - :"+userList.size());  
  47.         session.setAttribute("userList", userList);  
  48.         return mapping.findForward("success");  
  49.     }  
  50.     /**  
  51.      *   
  52.      * getUserInfo:users information <br/>  
  53.      * @param mapping mapping  
  54.      * @param form form  
  55.      * @param request request  
  56.      * @param response response  
  57.      * @return forword mapping <br/>  
  58.      * @throws UnsupportedEncodingException if has error  
  59.      */  
  60.     public ActionForward getHtmlUserInfo(ActionMapping mapping, ActionForm form, HttpServletRequest request,HttpServletResponse response){  
  61.         //get request session  
  62.         HttpSession session = request.getSession();  
  63.         //set request encoding  
  64.         try {  
  65.             request.setCharacterEncoding("GBK");  
  66.         } catch (UnsupportedEncodingException e) {  
  67.             LOG.info("set request encoding failure!");  
  68.         }  
  69.         StringBuffer sf = new StringBuffer();  
  70.         //get html request data  
  71.         int uid = Integer.parseInt(request.getParameter("uid"));  
  72.         sf.append("uid:"+uid);  
  73.         String userId = request.getParameterValues("userId")[uid];  
  74.         sf.append(" name:"+userId);  
  75.         String name = request.getParameterValues("userName")[uid];  
  76.         sf.append(" name:"+name);  
  77.         String gender = request.getParameterValues("userGender")[uid];  
  78.         sf.append(" gender:"+gender);  
  79.         String email = request.getParameterValues("userEmail")[uid];  
  80.         sf.append(" email:"+email);  
  81.         String birthDay = request.getParameterValues("userBirthDay")[uid];  
  82.         sf.append(" birthDay:"+birthDay);  
  83.         String address = request.getParameterValues("userAddress")[uid];  
  84.         sf.append(" address:"+address);  
  85.         String nickName = request.getParameterValues("nickname")[uid];  
  86.         sf.append(" nickname:"+nickName);  
  87.         LOG.info(sf.toString());  
  88.         LinkedMapTestData linkdata = new LinkedMapTestData();  
  89.         LinkedHashMap<String, LinkUser> userLink = linkdata.getLinkedHashMapData(userId, nickName);  
  90.         LOG.info("userLink- :"+userLink.size());  
  91.         session.setAttribute("userLink", userLink);  
  92.         return mapping.findForward("success");  
  93.     }  
  94. }  

可以通过"String name = request.getParameterValues("userName")[uid];"获取页面上的数据(radio=checked)。

此处数据用Vector和linkedHashMap存储：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. public class UserTestData {  
  2.     public static Vector<UserSVo> getUserTestData(){  
  3.         Vector<UserSVo> userList = new Vector<UserSVo>();  
  4.         UserSVo usertttian = new UserSVo("us1", "甜甜", "22", "女", "18707005525", "ttian@ts.com", "1992-02-08", "北京朝阳", "研究生","xiaoA");  
  5.         UserSVo userkke = new UserSVo("us2", "可可", "20", "女", "18707005526", "kke@ts.com", "1994-02-07", "北京昌平", "本科","xiaoB");  
  6.         UserSVo userkka = new UserSVo("us3", "卡卡", "19", "女", "18707005527", "kka@ts.com", "1995-02-06", "天津西青", "高中","xiaoC");  
  7.         UserSVo userddan = new UserSVo("us4", "淡淡", "18", "女", "18707005528", "ddan@ts.com", "1996-02-05", "兰州城关", "高中","xiaoD");  
  8.         UserSVo usernna  = new UserSVo("us5", "娜娜", "17", "女", "18707005529", "nna@ts.com", "1997-02-04", "甘肃临夏", "初中","xiaoE");  
  9.         userList.add(usertttian);  
  10.         userList.add(userkke);  
  11.         userList.add(userkka);  
  12.         userList.add(userddan);  
  13.         userList.add(usernna);  
  14.         return userList;  
  15.     }   
  16. }  

 

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. public class LinkedMapTestData {  
  2.     LinkedHashMap<String, LinkUser> linkedHashMap = new LinkedHashMap<String, LinkUser>();  
  3.       
  4.     public LinkedHashMap<String, LinkUser> getLinkedHashMapData(String userId,String nickName) {  
  5.         Vector<UserSVo> vector = UserTestData.getUserTestData();  
  6.         UserSVo user = null;  
  7.         for(int i=0,j=vector.size();i<j;i++){  
  8.             user = vector.get(i);  
  9.             LinkUser userlink = user.getUser();  
  10.             userlink.setId(user.getUserId());  
  11.             userlink.setName(user.getUserName());  
  12.             userlink.setPhone(user.getUserPhone());  
  13.             if(user.getUserId().equals(userId)){  
  14.                 user.setUserNickName(nickName);  
  15.             }  
  16.             linkedHashMap.put(user.getUserNickName(),userlink);  
  17.         }  
  18.         return linkedHashMap;  
  19.     }  
  20. }  


此处的LinkedHashMap中key和value中放了对象，在页面可以通过“${usernn.value.id }”或“${usernn.key

Sky786905664
关注
专栏目录
jsp数据 foreach 循环遍历 （含效果图）- 代码篇
草巾冒小子的博客
05-25 2761
jsp数据 foreach 循环遍历 （含效果图）- 代码篇 效果图： 重要代码 · 示下： <c:forEach items="${governorlist}" var="governor" varStatus="index"> <div id="content${index.index+1}" class="mui-control-content"> <ul class="mui-table-view"> <c:forEach items="
html循环c for,jsp – 计算c：forEach循环中所有数字的总和
weixin_39785422的博客
06-19 519
注意：我尝试组合答案做一个全面的列表.我在适当的时候提到名称,以便在到期时给予信用.有很多方法来解决这个问题,与每个相关的利弊：纯JSP解决方案正如上面提到的ScArcher2一样,一个非常容易和简单的解决方案就是直接在JSP中实现：${person.name}${person.age}${ageTotal}这个解决方案的问题是,JSP会让您感到困惑,因为您可能会引入scriplet.如果您期待每...
【JavaScript】`forEach` 方法的详解与实战
最新发布
lph159的博客
07-25 9703
方法是数组对象的重要组成部分。它提供了一种简洁、优雅的方式来遍历数组中的每个元素，并对其执行指定操作。方法的基本概念、用法、常见的应用场景、与其他遍历方法的对比，并提供实战示例，帮助您全面掌握这一强大的工具。方法的回调函数还可以接收当前元素的索引和原数组作为参数。数组中的每个元素执行回调函数，并将当前元素作为参数传递给回调函数。方法用于遍历数组，并对每个元素执行一次给定的回调函数。回调函数的纯粹性，避免对外部状态的修改，从而提高代码的可维护性。回调中直接修改原数组的结构，避免意外的副作用。
Jsp页面循环显示自定义的list数据
weixin_34008784的博客
02-26 846
2019独角兽企业重金招聘Python工程师标准>>> ...
{jsp 循环显示list内容}
zlxdream815的专栏
05-13 8540
卡种类型 卡种等级 无记录 oddbgcevenbgc"> oddbgcevenbgc">
html+js的数据展示页面
weixin_45555153的博客
07-17 568
【代码】html+js的数据展示页面。
jsp java自定义标签 分页 当前位置 循环遍历数据
04-12
本文将深入探讨如何使用Java自定义标签来实现分页功能，当前位置的显示以及数据的循环遍历。 首先，让我们了解一下Java自定义标签的基本概念。自定义标签是JSP的一种扩展机制，它允许开发者创建自己的标签库，这些...
layui循环遍历数据_Layui之动态循环遍历出的富文本编辑器显示
weixin_39553705的博客
12-28 2349
这篇记得是工作中的例子描述：平常的富文本显示都是根据静态的html获取id来显示，比如：富文本内容layui.use([ "form", "layer","layedit"], function() {var form =layui.form;var layer =layui.layer;var layedit = layui.layedit;//引入layedit//富文本layedit.s...
layui循环遍历数据_Layui数据表格之获取表格中所有的数据方法
weixin_39612720的博客
12-18 2293
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"Quick BI 是一款专为云上用户和企业量身打造的新一代自助式智能BI服务平台，其简单易用的可视化操作和灵活高效的多维分析能力，让精细化数据洞察为商业决策保驾...
在HTML,JSP当中使用XML与XSL展示部分数据
面向对象
07-29 204
在HTML,JSP当中使用XML与XSL展示部分数据 需求分析： 通常项目当中有一些固化或不经常变化的内容，且这些内容通常是使用XML保存。 但在前台页面上需要使用到这些数据，而且有可能会将其中的内容做为网页的一部分用来展示给用户。通常的做法是使用JavaScript读取这个XML进行解释，然后再创建相应的HTML标签，并将内容插入相应的位置上。这种做法不但需要编写大量的JS，而且会影响...
jsp如何循环遍历html元素
看不过的黑工坊
11-09 2562
jsp代码块如下： for(int i=0;i       %>              " name="q_jpk_id" value=" "  />" name="q_cname" value=" " />        " name="q_relation" value=" "/>        " name="q_workunit"  value=" "/>  
php foreach 循环外获取循环内的循环数据_PHP和JS中的foreach
weixin_35717251的博客
01-24 821
俗话说的好：从哪里跌倒就从哪里爬起来。想当初，在JavaScript中学了foreach之后，我对它的了解仅局限于“循环遍历”这四个字。在php中再次见到它，我竟然觉得恍若隔世。所以这篇文章我想来写写PHP和JS中的foreach。一、JavaScript中的foreachJavaScript 提供了很多个内置对象：Math/Array/Number/String/Boolean等，这些内置对象是...
【JSTL】foreach标签对list集合的操作在jsp页面应用实例
Junnix的博客
12-27 1299
JSTL:foreach标签对list集合的操作在jsp页面应用实例 jstl中foreach item：el表达式的集合名 var:临时变量名 varstateus:循环状态对象 <% List<User> list = new ArrayList<>(); list.add(new User(1, "张三", "123")); list.add(new User(2, "李四", "456")); list.add(new User(3,
JSP显示不完全问题
aeh36384的博客
10-15 240
这个问题出现之后其实有点让我手足无措，因为根本不知道原因出在哪儿。 因为出现这个问题之后修改过一次代码，所以我以为是因为这次修改出现的问题。 但细想之下，这次的修改根本没有涉及到任何有关这方面的东西。 于是还是在错误的页面上找问题。 增加删除修改部分代码 我哭了 越改 显示的越少 瞬间崩溃 算了 关机睡觉 第二天，思考过后，打算从头开始一步一步走代码， 还是...
jsp中foreach循环中拿循环次数变量
m0_37737148的博客
09-10 1262
在forEach标签添加 varStatus = "s"属性， 在遍历时，取${s.count} 即可取得其递增的序号。
JSP做循环时表单提交问题
chongfei9524的博客
09-10 616
当我们学习javaEE的时候会做到这样的简单练习 通过连接数据库，把一些数据显示到网页，这里要用到jsp里的JSTL技术来遍历数据，起初我是这样写的（用form标签把整个table标签包住） 之后出现了这样一个奇怪的问题：当我点第一个提交按钮时程序完美运行，当点第二行的提交时就出现问题了，...
Jsp显示数据库所有数据
孔的博客
12-16 1261
这里使用QueryRunner查询 @Override public List<User> allUser() throws SQLException { String sql ="select * from `user`"; List<User> query = Qr.qr().query(sql, new BeanListHandler<User>(User.class)); System.out.print
vue怎么根据forEach遍历数组多条数据中的一个值控制显示隐藏
05-25
可以使用v-if指令结合forEach遍历数组来控制显示隐藏。具体实现步骤如下： 1. 在Vue实例中定义一个变量，用来记录需要显示的数据的某个属性值，比如叫做showValue。 2. 使用v-for指令遍历数组，每次遍历到一个元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值