您的位置：首页 > Web前端 > JavaScript

jsp版本2.1 servlet版本2.5 el表达式、jstl标签学习以及自定义标签（用标签实现业务逻辑和jsp页面的分离）

2013-06-09 20:36 886 查看

测试环境：MyEclipse 8.5 Java EE 5 新建 web project。容器环境 tomcat 6。JQuery 1.9

用自定义标签实现一个基本的部门检索功能，运行效果如下：

初始画面：

<%@ page contentType="text/html; charset=gb2312"%>
<%@page import="com.test.taglib.bean.DepartSearchBean"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="common_control"
uri="http://www.test.com/taglibs/site-utils"%>

<html>
<head>
<title> 部门检索共通控件测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>

</head>
<body>
<%
DepartSearchBean departSearchBean = new DepartSearchBean();
departSearchBean.setDepartmentCode("123");
departSearchBean.setDepartmentName("abc");
request.setAttribute("departSearchBean",departSearchBean);
%>

<form id="form1" name="form1" action="department_submit.jsp">
<!--
部门：<input type="text" id="depart_code" name="depart_code"><a id="depart_search" name="depart_search" href="#">检索</a><span id="depart_name"></span><br/>
-->
<common_control:department_search id="departsearchcontrol" initvalue="${departSearchBean}"></common_control:department_search>
<input type="submit" value="submit">
</form>
</body>
</html>

点击检索链接打开部门选择对话框

<%@ page contentType="text/html; charset=gb2312"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title> 部门检索</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
/*
$('[id^="depart_id_"]').click(function(){
//alert("abc");
var id = $(this).attr("id");
$(":radio").each(function(){
//alert($(this).attr("id"));
if ($(this).attr("id") != id) {
$(this).removeAttr("checked");
}
});
return true;
});
*/
$('[id^="depart_row_"]').mouseenter(function(){
$(this).css('color','blue');
var rowid = $(this).attr("id").split("_");
var id = "depart_id_" + rowid[2];
$(":radio").each(function(){
if ($(this).attr("id") != id) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", "checked");
}
});
});

$('[id^="depart_row_"]').mouseleave(function(){
$(this).css('color','black');
});

$('[id^="depart_select_"]').click(function(){
var rowid = $(this).attr("id").split("_");
var index = rowid[2];

var argu = window.dialogArguments;
var arguArr = argu.split(",");

var retVal = "";
//alert($("#depart_code_"+index).text());
retVal += arguArr[0] + "=" + $("#depart_code_"+index).text();
retVal += ",";
retVal += arguArr[1] + "=" + $("#depart_name_"+index).text();
window.returnValue = retVal;
window.close();
});

});
</script>
</head>
<body>
<table>
<tr><td>ID</td><td>code</td><td>name</td><td>选择</td></tr>
<c:forEach var="bean" items="${departSearchBeanList}" varStatus="status">
<c:set var="idx" value="${status.index + 1}"></c:set>
<tr id="depart_row_${idx }"><td><input type="radio" id="depart_id_${idx }" name="depart_id_${idx }" /></td><td><span id="depart_code_${idx }">${bean.departmentCode }</span></td><td><span id="depart_name_${idx }">${bean.departmentName }</span></td><td><a id="depart_select_${idx }" href="#">选择</a></td></tr>
</c:forEach>
</table>
</body>
</html>

移动到相应的行上

点击选择会将选择的部门id和部门名称显示在之前的画面上

点击submit，可以将选择到的部门id传到后台进行处理

<%@ page contentType="text/html; charset=gb2312"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title> 部门提交</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>

</head>
<body>
<%=request.getParameter("depart_code") %>
</body>
</html>

简要的实现逻辑：

　　自定义标签封装html代码和jquery代码，点击检索时请求servlet检索出所有的部门信息展示在弹出的jsp对话框中，点击选择后拿到对话框的返回值并关闭对话框以及现在画面上对应的dom上

自定义的tld文件放在WEB-INF目录及其子目录下，tomcat会自动读取，内容如下

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2/EN"
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>common_control</short-name>
<uri>http://www.test.com/taglibs/site-utils</uri>

<tag>
<name>department_search</name>
<tag-class>com.test.taglib.DepartmentSearchTag</tag-class>
<attribute>
<name>id</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<type>String</type>
</attribute>
<attribute>
<name>initvalue</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
<type>com.test.taglib.bean.DepartSearchBean</type>
</attribute>
</tag>
</taglib>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航