测试环境：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>