使用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="" οnfοcus="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>
注解:<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代码:
$(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">
<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 tskk@ts.com
*
* 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", "ttian@ts.com", "1992-02-08", "北京朝阳", "研究生","xiaoA");
UserSVo userkke = new UserSVo("us2", "可可", "20", "女", "18707005526", "kke@ts.com", "1994-02-07", "北京昌平", "本科","xiaoB");
UserSVo userkka = new UserSVo("us3", "卡卡", "19", "女", "18707005527", "kka@ts.com", "1995-02-06", "天津西青", "高中","xiaoC");
UserSVo userddan = new UserSVo("us4", "淡淡", "18", "女", "18707005528", "ddan@ts.com", "1996-02-05", "兰州城关", "高中","xiaoD");
UserSVo usernna = new UserSVo("us5", "娜娜", "17", "女", "18707005529", "nna@ts.com", "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.id }”获取其中的值显示。