Jsp实现页面forEach循环遍历多条数据的显示和后台对应数据的获取(strurs1)实现
使用jstl标签和form动态的页面数据显示操作获取！
html代码：
- <body>
- <center>
- <div id="header">div>
- <div id="divuser">
- <input id="contextPath" type="hidden" value="${pageContext.request.contextPath}"/> <form id="userform">
- <table id="usertb" width="655" border="0" cellpadding="2" cellspacing="0">
- <caption>用户信息表caption>
- <c:if test="${empty userList}">
- <tr>
- <td><span>user data is null!span>td>
- tr>
- c:if>
- <c:forEach items="${userList}" var="user" varStatus="userStatus">
- <tr>
- <td width="40" align="center" class="tb_td_border">
- <input id="uid${userStatus.index}" name="uid" type="radio" value="${userStatus.index}" />
- td>
- <td width="100" align="center" class="tb_td_border">
- <label for="uid${userStatus.index}"><span class="font12_blue">${user.userName }span>label>
- td>
- <td width="100" align="center" class="tb_td_border">
- <label for="uid${userStatus.index}"><span class="font12_blue">${user.userGender}span>label>
- td>
- <td width="100" align="left" class="tb_td_border">
- <label for="uid${userStatus.index}"><span class="font12_blue">${user.userEmail }span>label>
- td>
- <td width="100" align="center" class="tb_td_border">
- <label for="uid${userStatus.index}"><span class="font12_blue">${user.userBirthDay }span>label>
- td>
- <td width="100" align="center" class="tb_td_border">
- <label for="uid${userStatus.index}"><span class="font12_blue">${user.userAddress }span>label>
- td>
- <td width="110" align="center" class="tb_td_border">
- <div id="divnickname${userStatus.index}">
- <input id="nickname${userStatus.index }" name="nickname" type="text" class="font12_blue" maxlength="7" style="width: 100;" value="" onfocus="radiocheckbytextfocus(this);" />
- div>td>
- tr>
- <input name="userId" type="hidden" value="${user.userId }" />
- <input name="userName" type="hidden" value="${user.userName }" />
- <input name="userGender" type="hidden" value="${user.userGender}" />
- <input name="userEmail" type="hidden" value="${user.userEmail }" />
- <input name="userBirthDay" type="hidden" value="${user.userBirthDay }" />
- <input name="userAddress" type="hidden" value="${user.userAddress }" />
- c:forEach>
- <tr>
- <td colspan="7" align="right">
- <input type="button" id="btsubmit" name="btsubmit" value="go>>..." />
- td>
- tr>
- table>
- form>
- div>
- <div id="divbodyer">div>
- <hr size="2" noshade="noshade" width="665px" color="#4DFFFF"; />
- <div id="div2user">
- <table id="tbusernn" width="665" cellpadding="0" cellspacing="0" border="0">
- <c:if test="${empty userLink}">
- <tr>
- <td>user data is null!td>
- tr>
- c:if>
- <c:forEach items="${userLink}" var="usernn" varStatus="usernnStatus">
- <tr>
- <td width="100" align="center">${usernn.key }td>
- <td align="center">${usernn.value.id } - ${usernn.value.name } - ${usernn.value.phone }td>
- tr>
- c:forEach>
- table>
- div>
- center>
- body>
注解：
items(属 性)：进行循环的项目 (描述)，否(是否必须)，无(缺省值)
var：代表当前项目的变量名，否，无
varStatus：显示循环状态的变量，否，无
begin：开始条件，否，0
end：结束条件，否，集合中的最后一个项目
step：步长，否，1
jstl中的varStatus和 var 属性一样， varStatus 用于创建限定了作用域的变量。不过，由 varStatus 属性命名的变量并不存储当前索引值或当前元素，而是赋予 javax.servlet.jsp.jstl.core.LoopTagStatus 类的实例。该类定义了一组特性，它们描述了迭代的当前状态，下面列出了这些特性:
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代码：
- $(document).ready(function(){
- //submit html data
- $("#btsubmit").click(function(){
- var raduid = $("input[name=uid]:checked").val();
- if(raduid == null || raduid == ""){
- alert("请选择用户");
- return;
- }
- var userForm = $("#userform").get(0);
- var path = $("#contextPath").val(); userForm.action =path+"/usergetinfo.do?param=getHtmlUserInfo";
- userForm.method = "post";
- userForm.submit();
- $("#btsubmit").prop("disabled",true);
- });
- });
- //鼠标进入文本框，自动选中radio
- function radiocheckbytextfocus(obj){
- var nicknameId = $(obj).attr("id");
- var radioId = nicknameId.substring(8);
- var uidId = "#uid"+radioId;
- $(uidId).prop("checked",true);
- }
注解：$( elem ).attr( "checked" )
1.6版本前返回值为boolean,1.6+返回值为string，为属性的实际值，而不是boolean.
新的浏览器返回的是“checked”，老的浏览器返回的是true，所以不能使用attr ；.prop()方法被用来处理boolean attributes。
页面隐藏多条数据，值显示几条可以：
- function bkchange(obj)
- {
- var img_path=obj.src;
- if (img_path.lastIndexOf("images/jiantouup.jpg")>=0)
- {
- obj.src="images/jiantoudown.jpg";
- $("tr[class='bkhide']").show();
- }
- else{
- obj.src="images/jiantouup.jpg";
- if($("input[name=uid]:checked").val()+1>3){
- $("input[name=sid]").attr("checked",false);
- }
- $("tr[class='bkhide']").hide();
- }
- }
js操作表格迭代操作数据(迭代行下列获取单元格数据)：
- $("#tbuser tr").each(function(){
- /get user name
- var userName = $(this).children("td").eq(1).text().trim();
- });
js使用“$(obj).attr("id");”获取当前的id。或者$(this).attr("id");
js提交异步提交表单表单,数据为“$("#userForm").serialize()”，可以使用：
- $.ajax({
- url:"getNickName.do?uid="+index,
- type:"post",
- timeout:20000,
- data:$("#userForm").serialize(),
- success:function(data){
- if(data==null){
- data = "";
- }
- $(divuserhint).html("");
- $(userId).attr("value",data);
- clockradio("query");//callback "query"=method flag
- },
- error:function(){
- $(userId).attr("value","");
- $(divuserhint).html(user_info[3]);//js i18n
- }
- });
struts的配置文件(struts-config.xml)：
- <form-beans>
- <form-bean name="UserDataForm" type="com.ts.form.UserDataForm">form-bean>
- form-beans>
- <action path="/usergetinfo" name="UserDataForm" parameter="param" scope="request"
- type="com.ts.actions.UserDataAccessAction">
- lt;forward name="success" path="/tsjsp/userinfo.jsp">forward>
- action>
Action处理：
- package com.ts.actions;
- import java.io.UnsupportedEncodingException;
- import java.util.LinkedHashMap;
- import java.util.Vector;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import javax.servlet.http.HttpSession;
- import org.apache.log4j.Logger;
- import org.apache.struts.action.ActionForm;
- import org.apache.struts.action.ActionForward;
- import org.apache.struts.action.ActionMapping;
- import org.apache.struts.actions.DispatchAction;
- import com.ts.services.vo.LinkUser;
- import com.ts.services.vo.UserSVo;
- import com.ts.testdatas.LinkedMapTestData;
- import com.ts.testdatas.UserTestData;
- /**
- * ClassName: LinkedMapDataAccessAction <br/>
- * Date: 2015-1-14 上午10:20:49 <br/>
- * <br/>
- *
- * @author [email protected]
- *
- * first made
- * @version 0.0.1<br/>
- *
- */
- public class UserDataAccessAction extends DispatchAction {
- //log
- private static final Logger LOG = Logger.getLogger(UserDataAccessAction.class);
- /**
- *
- * getUserInfo:users information <br/>
- * @param mapping mapping
- * @param form form
- * @param request request
- * @param response response
- * @return forword mapping <br/>
- */
- public ActionForward getDBUserInfo(ActionMapping mapping, ActionForm form, HttpServletRequest request,HttpServletResponse response){
- //get request session
- HttpSession session = request.getSession();
- Vector<UserSVo> userList = UserTestData.getUserTestData();
- LOG.info("userList - :"+userList.size());
- session.setAttribute("userList", userList);
- return mapping.findForward("success");
- }
- /**
- *
- * getUserInfo:users information <br/>
- * @param mapping mapping
- * @param form form
- * @param request request
- * @param response response
- * @return forword mapping <br/>
- * @throws UnsupportedEncodingException if has error
- */
- public ActionForward getHtmlUserInfo(ActionMapping mapping, ActionForm form, HttpServletRequest request,HttpServletResponse response){
- //get request session
- HttpSession session = request.getSession();
- //set request encoding
- try {
- request.setCharacterEncoding("GBK");
- } catch (UnsupportedEncodingException e) {
- LOG.info("set request encoding failure!");
- }
- StringBuffer sf = new StringBuffer();
- //get html request data
- int uid = Integer.parseInt(request.getParameter("uid"));
- sf.append("uid:"+uid);
- String userId = request.getParameterValues("userId")[uid];
- sf.append(" name:"+userId);
- String name = request.getParameterValues("userName")[uid];
- sf.append(" name:"+name);
- String gender = request.getParameterValues("userGender")[uid];
- sf.append(" gender:"+gender);
- String email = request.getParameterValues("userEmail")[uid];
- sf.append(" email:"+email);
- String birthDay = request.getParameterValues("userBirthDay")[uid];
- sf.append(" birthDay:"+birthDay);
- String address = request.getParameterValues("userAddress")[uid];
- sf.append(" address:"+address);
- String nickName = request.getParameterValues("nickname")[uid];
- sf.append(" nickname:"+nickName);
- LOG.info(sf.toString());
- LinkedMapTestData linkdata = new LinkedMapTestData();
- LinkedHashMap<String, LinkUser> userLink = linkdata.getLinkedHashMapData(userId, nickName);
- LOG.info("userLink- :"+userLink.size());
- session.setAttribute("userLink", userLink);
- return mapping.findForward("success");
- }
- }
可以通过"String name = request.getParameterValues("userName")[uid];"获取页面上的数据(radio=checked)。
此处数据用Vector和linkedHashMap存储：
- public class UserTestData {
- public static Vector<UserSVo> getUserTestData(){
- Vector<UserSVo> userList = new Vector<UserSVo>();
- UserSVo usertttian = new UserSVo("us1", "甜甜", "22", "女", "18707005525", "[email protected]", "1992-02-08", "北京朝阳", "研究生","xiaoA");
- UserSVo userkke = new UserSVo("us2", "可可", "20", "女", "18707005526", "[email protected]", "1994-02-07", "北京昌平", "本科","xiaoB");
- UserSVo userkka = new UserSVo("us3", "卡卡", "19", "女", "18707005527", "[email protected]", "1995-02-06", "天津西青", "高中","xiaoC");
- UserSVo userddan = new UserSVo("us4", "淡淡", "18", "女", "18707005528", "[email protected]", "1996-02-05", "兰州城关", "高中","xiaoD");
- UserSVo usernna = new UserSVo("us5", "娜娜", "17", "女", "18707005529", "[email protected]", "1997-02-04", "甘肃临夏", "初中","xiaoE");
- userList.add(usertttian);
- userList.add(userkke);
- userList.add(userkka);
- userList.add(userddan);
- userList.add(usernna);
- return userList;
- }
- }
- public class LinkedMapTestData {
- LinkedHashMap<String, LinkUser> linkedHashMap = new LinkedHashMap<String, LinkUser>();
- public LinkedHashMap<String, LinkUser> getLinkedHashMapData(String userId,String nickName) {
- Vector<UserSVo> vector = UserTestData.getUserTestData();
- UserSVo user = null;
- for(int i=0,j=vector.size();i<j;i++){
- user = vector.get(i);
- LinkUser userlink = user.getUser();
- userlink.setId(user.getUserId());
- userlink.setName(user.getUserName());
- userlink.setPhone(user.getUserPhone());
- if(user.getUserId().equals(userId)){
- user.setUserNickName(nickName);
- }
- linkedHashMap.put(user.getUserNickName(),userlink);
- }
- return linkedHashMap;
- }
- }
此处的LinkedHashMap中key和value中放了对象，在页面可以通过“${usernn.value.id }”或“${usernn.key