二级，三级联动详解

首先说一下我做的功能需求。所要实现的内容。
   我要做一个根据域来配置险种的三级关联包括其它信息的显示。其实主要的是第二级的下拉选项查询，所有的显示信息都是从第二级的下拉选项ID来配置的，比如它的上一级也是根据二级所在的类型中查找上一级，三级联查相对来说比较简单些，只要找到了二级险种的ID就能联查出三级的信息。
   由于实现需要的东西太多，现重要代码具体实例如下：
1.必备的一个dwr.jar文件不可缺少的，导入此包后可以在WEB-INF下的dwr.xml文件里配置相应的bean 没有这个文件你就什么都不能做。为什么用到这个dwr文件呢，如果只是做个简单的关联查询是用不到的，鉴于一级和三级类型都要根据二级的配置来联查。所以要传入二级的ID给一级和三级下拉就必须用到对象保存数据。用到对象保存数据，就要用到dwr.jar文件了。
2.二级联查显示一个固定的Action必不可缺。现代码如下：
package com.eline.epicc.insurance.struts;
import com.eline.epicc.insurance.model.*;
import com.eline.epicc.insurance.*;
import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class ServletTestAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
int targetId = Integer.parseInt(request.getParameter("TypeId"));
ArrayList list = new ArrayList();
list=Insurances.GetInsuranceType1s2(targetId);
String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";
String eStr;
if(targetId==0){
xml = "<select><value>0</value><text>请选择险种</text></select>";
}else{
for(int i=0;i<list.size();i++){
        InsuranceTypeObj obj =(InsuranceTypeObj)list.get(i);
        eStr=new String(obj.getIn_Genre().getBytes("UTF-8"),"ISO-8859-1");
        xml+= "<select><value>"+obj.getIn_ID()+"</value><text>"+eStr+"</text></select>";
    }
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
}

return null;
}

}
3.对数据库的查询操作读取数据
   1）根据传入的用户ID所在的域来查找对应配置的信息
public ArrayList getDutyPersonMobileID(int userId)throws SQLException{
    ArrayList list = new ArrayList();
    Connection conn = null;
    CallableStatement stmt = null;
ResultSet rst = null;
try{
String strSQL="{ call dbo.Insurances_GetUserInRegionID(?)}";
conn = super.getDBConnection();
stmt = conn.prepareCall(strSQL);
//stmt = conn.prepareStatement(strSQL);
stmt.setInt(1, userId);
rst  = stmt.executeQuery();
while(rst.next()){
InsuranceTypeObj obj = new InsuranceTypeObj();
obj.setRegionID(rst.getInt("indexID"));
obj.setIn_ID(rst.getInt("in_ID"));
obj.setIn_GenreID(rst.getInt("in_GenreId"));
obj.setIn_Explain(rst.getString("in_Explain"));
   list.add(obj);
    }
}catch(Exception ex){
ex.printStackTrace();
}finally{
super.closeResultSet(rst);
super.closeStatement(stmt);
super.closeConnection(conn);
}
return list;


}

     2）剩下的数据查询其实重要的域对应配置的一个关系是在数据库中实现的。不要要告诉的是得到二级险种的ID后就可以根据这个ID找它的上级和下级，这个应该并不难找吧。
代码省略。

4.最后具体使用的页面：
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="org.blue.util.*" %>
<%@ page import="com.eline.epicc.utils.*" %>
<%@ taglib uri="/tlds/eline-common.tld" prefix="common"%>
<%@ taglib uri="/tlds/eline-user.tld" prefix="user"%>
<%@ page import="com.eline.epicc.insurance.*"%>
<%@ page import="com.eline.epicc.insurance.model.*"%>
<%@ page import="java.util.*"%>
<%@ page import="com.eline.epicc.user.*"%>
<%@ page import="com.eline.epicc.user.model.*"%>

/*页面要导入的dwr配置信息*/
<script type='text/javascript' src='/e-picc-ox/dwr/interface/Insurances.js'></script>
<script type='text/javascript' src='/e-picc-ox/dwr/engine.js'></script>
<script type='text/javascript' src='/e-picc-ox/dwr/util.js'></script>

<%
ArrayList list = new ArrayList();
    String dpMobile = StringUtils.toString(request.getParameter("dpMobile"));
    User user =Users.getUser(0,dpMobile,false,false);
    if (user == null || user.getUserId() == 0) {
    System.out.println("Can not get instance of current user.");
    }
    int tmpId=user.getUserId();
    list=Insurances.GetInsuranceType1s(tmpId);
    String pId = request.getParameter("PId");
    String cId = request.getParameter("CId");
    String ph  = request.getParameter("ph");
    String lengthDate=request.getParameter("lengthDate");
    String startDate = request.getParameter("startDate");
    String endDate = request.getParameter("endDate");
    String tel     = request.getParameter("tel"); //投保人联系方式
    if(tel==null){
    tel = "无";
    }
    String type  = request.getParameter("type");
   %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }
       
        function Change_Select()
        {
            var zhi=document.getElementById('hero').value;  
            var url="${pageContext.request.contextPath}/insurance/servletTest.do?TypeId="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
           
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
       
        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
       
        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('skill');
            select_root.options.length=0;
           
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
           
           
        }
</SCRIPT>
<script type="text/javascript">
function insurance_prev() {
window.location.href="${pageContext.request.contextPath}/input/in_InsuranceNo_1.jsp";
}
function submitForm(){
    document.form1.in_ID.value=document.form1.skill.value;
document.all["backParam"].value="pId="+document.all["PId"].value
+",cId="+document.all["CId"].value
+",ph="+document.all["ph"].value
+",dpMobile="+document.all["dpMobile"].value
+",startDate="+document.all["startDate"].value
+",endDate="+document.all["endDate"].value
+",lengthDate="+document.all["lengthDate"].value
+",tel="+document.all["tel"].value
+",type="+document.all["type"].value
+",skill="+document.all["skill"].value;
document.form1.submit();
}
function ocTest(){
  var a = document.form1.skill.value;
  document.form1.in_ID.value=document.form1.skill.value;
}
function closea(){
window.close();
}
function closego(){
  window.close();
}


/*方法实现得到页面属性的值*/
function findByGenreId(skillId){
    var id=skillId.value;
    Insurances.getInsuranceTypeOthers(id, callbackInsurances);
}
function callbackInsurances(obj){
    var in_costScopeMin = document.getElementById("in_costScopeMin");
    var in_costScopeMax = document.getElementById("in_costScopeMax");
    var in_fronsScopeMin = document.getElementById("in_fronsScopeMin");
    var in_fronsScopeMax = document.getElementById("in_fronsScopeMax");
    var in_burdenScope = document.getElementById("in_burdenScope");
    var in_InsuranceFei = document.getElementById("in_InsuranceFei");
    var in_InsuranceLv = document.getElementById("in_InsuranceLv");
    in_costScopeMin.innerText = obj.in_costScopeMin;  ///意义等同，都可以得到
    in_costScopeMax.firstChild.nodeValue =  obj.in_costScopeMax;///意义等同，都可以得到 in_costScopeMin.innerText 是在span标签上显示    obj.in_costScopeMax：配置的dwr文件里取出对象里保存的信息
    in_fronsScopeMin.innerText = obj.in_fronsScopeMin;
    in_fronsScopeMax.innerText = obj.in_fronsScopeMax;
    in_burdenScope.innerText   = obj.in_burdenScope;
    in_InsuranceFei.value      = obj.in_InsuranceFei;
    in_InsuranceLv.value     = obj.in_InsuranceLv;
   
    if(in_InsuranceFei.value == 0 || in_InsuranceFei.value ==0.0){
    in_InsuranceFei.value = "";
    }
    if(in_InsuranceLv.value == 0 || in_InsuranceLv.value ==0.0){
    in_InsuranceLv.value = "";
    }
   
}
</script>

<img height="3" src="${pageContext.request.requestURL}/images/blank.gif" /><br />
<table cellspacing="3" cellpadding="0" width="98%" border="0" style="border-bottom:1px solid #2f4e7c">
<tr>
<td style="FONT-FAMILY: SimSun"><b>当前位置:</b>录入 -  新建保单 - 险种选择录入
</td>
</tr>
</table>

<img height="5" src="${pageContext.request.contextPath}/images/blank.gif" /><br />
<TABLE cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD bgColor="#325380" height="7"><IMG src="${pageContext.request.contextPath}/skin/content-top-left_delt.gif"></TD>
<TD width="7" bgColor="#325380" height="7"><IMG src="${pageContext.request.contextPath}/skin/blank.gif"></TD>
</TR>
<TR>
<TD style="BORDER-LEFT: #325380 1px solid; BORDER-BOTTOM: #325380 1px solid; PADDING: 2px;">

<%if(tmpId!=0){%>
<form name="form1" action="<%=SiteUrls.getInstance().getProperty("input.insuranceEBdo")%>" method="post">
<table  cellspacing="0" width="100%" border="0" height="450">
<tr>
<th height=30 colspan="5" style="BORDER-BOTTOM: #dbdce3 1px solid; BACKGROUND-COLOR: #e9f5f7;COLOR: #444444;" align="center">
请选择填写险种信息<input type="hidden" name="userID" id="userID" value="<%=tmpId %>"/>
</th>
</tr>
  <tr>
<td colSpan="2" valign="middle" align="center">

<table class="clsDataList" cellspacing="0" width="600" border="0" style="BORDER:#dbdce3 1px solid;">
<tr>
<td>
　险种分类：
</td>
<td>
<SELECT name="hero" id="hero" onChange="Change_Select()">
                   <OPTION value="0">请选择险种分类</OPTION>   
               <%
                 for(int i=0;i<list.size();i++){
                 InsuranceTypeObj obj =(InsuranceTypeObj)list.get(i);
             %>
                <OPTION value="<%=obj.getIn_ID()%>"><%=obj.getIn_Genre()%></OPTION>
              <%}%>
          </SELECT>
</td>
<td>
　险&nbsp;&nbsp;种：
</td>
<td>
<SELECT name="skill" id="skill" onchange="findByGenreId(this);">
                      <OPTION value="0">请选择险种</OPTION>
             </SELECT>
             <input type="hidden" name="in_ID" id="in_ID" value="">
</td>
</tr>
<tr>

<td>
　险种说明：
</td>
<td colspan="3" width="500">
保费范围：最小值&nbsp;<span id="in_costScopeMin">&nbsp;</span>&nbsp;、&nbsp;最大值&nbsp;<span id="in_costScopeMax">&nbsp;</span><br>
保额费率：最小值&nbsp;<span id="in_fronsScopeMin">&nbsp;</span>&nbsp;、&nbsp;最大值&nbsp;<span id="in_fronsScopeMax">&nbsp;</span><br>
责任范围：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="in_burdenScope">&nbsp;</span>
</td>
</tr>

<tr>
<td>
　保&nbsp;&nbsp;费：
</td>
<td colspan="3">
<input type="text" name ="in_InsuranceFei" value="" maxlength="10">
</td>
</tr>
  <tr>
<td>
　保额费率：
</td>
<td colspan="3">
<input type="text" name ="in_InsuranceLv" value="" maxlength="10">
</td>
</tr>
<tr>
<td>
   <input type="hidden" name="PId" value="<%=pId %>">
   <input type="hidden" name="CId" value="<%=cId %>">
   <input type="hidden" name="ph" value="<%=ph %>">
   <input type="hidden" name="dpMobile" value="<%=dpMobile%>">
   <input type="hidden" name="lengthDate" value="<%=lengthDate %>">
   <input type="hidden" name="startDate" value="<%=startDate %>">
   <input type="hidden" name="endDate" value="<%=endDate %>">
   <input type="hidden" name="tel" value="<%=tel%>">
   <input type="hidden" name="type" value="<%=type%>">
</td>
</table>
</td>
</tr>
</table>
<table style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid"
             cellspacing="1" cellpadding="1" width="100%" bgColor="#f0f0f0" border="0">
<tr>
<td><input type="hidden" name="backUrl" value="in_Insurance_3.jsp" />
<input type="hidden" name="backParam" value="" />
<input type="hidden" name="status" value="3" />
<input type="hidden" name="action" value="add" />
</td>
<td align="center">
<input type="button" class="clsBtn4w" id="sb1" name="sb1" value="提  交" onclick="submitForm();"/>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" class="clsBtn4w" id="sb2" name="sb2" value="返  回" onclick="javascript:insurance_prev();"/>
</td></tr>
</table>
</form>
<%}else{%>
<table border="0" width="100%" height="90">
<tr><td width="100%"><font color="red">错误提示：<br>&nbsp;&nbsp;您录入的承保人手机不是合法号码,没有承保权限.请您核对后在次录入!</font><td></tr>
<tr><td width="100%" align="center"><input type="button" class="clsBtn4w"  name="btnn" value="确定" onclick="javaScript:closego();"/><td></tr>
</table>
<%} %>
</TD>
<TD vAlign="bottom" width="7" bgColor="#325380"><IMG src="${pageContext.request.contextPath}/skin/content-right-bottom_delt.gif"></TD>
</TR>
</TABLE>
------------------
最后一定不要忘记在web.xml里添加对dwr的配置
配置如下：
<!-- lily add dwr config -->
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
配置完成后也不要忘记导入dwr.jar包

如果也在苦寻多级联查的IT新手们，此代码希望能够帮上你的忙。
以上代码如果有不懂之处，请留言我在详解！

评论

5 楼 pangbuddy 2008-11-17  

我用RICHFACE的AJAX功能和DROPDOWN 菜单 结合后台动态生成DROPDOWN 的LIST，效果也不错。

4 楼 yuanyeekong 2008-11-13  

function aaa(){

}[color=olive][/color][align=center][/align]

3 楼 elice 2008-07-24  

个人认为不用刷页面是更好的解决办法

另外请楼主把代码用<code></code>圈起来

2 楼 yourenyouyu2008 2008-07-23  

你没用到jsf吗，如果用了多级联动实现是很简单的，并且通用。不需要自己写一句ajax。因为是如此的简单，所以jsf里面是没有提供多级联动的组件的。

1 楼 xieboxin 2008-07-22  

就个人而言，我喜欢写ajax来实下多级联动菜单，不依赖任何的框架。这样写的有自己新晰的思路，便于自己的控制。

有时间我把我写的多级联动代码贴出来。