DWR实现省市无穷级联动

技术2022-05-20 59

完整版见https://jadyer.github.io/

这是一个Web Project

首先是web.xml文件

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <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> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

然后是位于//WEB-INF//下的DWR配置文件dwr.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> <dwr> <allow> <create creator="new" javascript="JSCity"> <param name="class" value="com.jadyer.dao.CityDao" /> </create> <convert match="com.jadyer.model.City" converter="bean" /> </allow> </dwr>

然后是用于显示省市无穷级联动效果的index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%> <script type='text/javascript' src="/dwr_city/dwr/interface/JSCity.js"></script> <script type='text/javascript' src="/dwr_city/dwr/engine.js"></script> <script type='text/javascript' src="/dwr_city/dwr/util.js"></script> <script type="text/javascript"> var theTagID; function initCity(parentCityID, tagID){ var isDelete = false; theTagID = tagID; var sons = document.getElementById(tagID).childNodes; for(var i=(sons.length-1); i>=0; i--){ //if("A" != sons[i].nodeName.toUpperCase()){ //二者等效 if("UL" == sons[i].nodeName.toUpperCase()){ sons[i].parentNode.removeChild(sons[i]); isDelete = true; } } if(isDelete){ return; } JSCity.findByParentID(parentCityID, callback); } function callback(citys){ var citys = eval(citys); var parentModule = document.getElementById(theTagID); var newUL = document.createElement("ul"); //创建<ul>标签 for(var i=0; i<citys.length; i++){ var newLI = document.createElement("li"); //创建<li>标签 newLI.id = "tag" + citys[i].cityID; //为<li>的id赋值，即指定<li id="">中的id的值，它的id是动态变化的 newLI.innerHTML = "<a href='#' οnclick='initCity(" + citys[i].cityID + ", /"tag" + citys[i].cityID + "/");'>" + citys[i].cityName + "</a>"; newUL.appendChild(newLI); } parentModule.appendChild(newUL); } </script>  <body οnlοad="initCity(0, 'initProvince')"> <div id="initProvince"></div> </body>

用到的实体类City.java

package com.jadyer.model; import java.util.List; public class City { private Integer parentID; private Integer cityID; private String cityName; private List<City> areas; //用于储存该城市下所有区县的详细信息 /* 四个属性对应的setter和getter略 */ public City(){} public City(Integer cityID, String cityName){ this.cityID = cityID; this.cityName = cityName; } }

然后是直接与Oracle数据库操作的DAO类

package com.jadyer.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.naming.Context; import javax.naming.InitialContext; import javax.naming.NamingException; import javax.sql.DataSource; import com.jadyer.model.City; /** * 这里的代码，应该重构一下，但为了演示方便，就没有重构 */ public class CityDao { /** * 根据父ID得到所有一级子类 * @see 如果传递为0，则得到所有根节点 */ public List<City> findByParentID(int parentID){ String sql = "select cityID, cityName from city where parentID=?"; List<City> citys = new ArrayList<City>(); try { Context context = new InitialContext(); //有关jdbc/oracleds连接池的配置，参见http://blog.csdn.net/jadyer/archive/2010/11/10/6001023.aspx DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds"); Connection conn = ds.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setInt(1, parentID); ResultSet rs = pstmt.executeQuery(); while(rs.next()){ citys.add(new City(rs.getInt("cityID"), rs.getString("cityName"))); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } return citys; } /** * 根据ID得到该城市的详细信息 */ public City fingByCityID(int cityID){ String sql = "select cityName from city where cityID=?"; City city = null; try { Context context = new InitialContext(); DataSource ds = (DataSource)context.lookup("java:/comp/env/jdbc/oracleds"); Connection conn = ds.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setInt(1, cityID); ResultSet rs = pstmt.executeQuery(); while(rs.next()){ city = new City(cityID, rs.getString("cityName")); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } return city; } }

最后是数据库脚本文件

--Oracle 11g --创建表格 create table city( id number(3) primary key, parentID number(3), --0表示根节点 cityID number(3), cityName varchar(20) ) --创建序列 create sequence sequence_city increment by 1 start with 1 nomaxvalue nocycle; --添加一级菜单 insert into city values(sequence_city.nextval, 0, 1, '黑龙江'); insert into city values(sequence_city.nextval, 0, 2, '吉林省'); insert into city values(sequence_city.nextval, 0, 3, '辽宁省'); --添加二级菜单 insert into city values(sequence_city.nextval, 1, 4, '哈尔滨'); insert into city values(sequence_city.nextval, 1, 5, '佳木斯'); insert into city values(sequence_city.nextval, 1, 6, '双鸭山'); insert into city values(sequence_city.nextval, 2, 7, '长春'); insert into city values(sequence_city.nextval, 2, 8, '辽源'); insert into city values(sequence_city.nextval, 2, 9, '通化'); insert into city values(sequence_city.nextval, 3, 10, '沈阳'); insert into city values(sequence_city.nextval, 3, 11, '大连'); insert into city values(sequence_city.nextval, 3, 12, '铁岭'); --添加三级菜单 --这里只提供了黑龙江省的三级联动数据，关于其它省份的数据，请自行添加 insert into city values(sequence_city.nextval, 4, 13, '巴彦县'); insert into city values(sequence_city.nextval, 4, 14, '延寿县'); insert into city values(sequence_city.nextval, 4, 15, '木兰县'); insert into city values(sequence_city.nextval, 5, 16, '抚远县'); insert into city values(sequence_city.nextval, 5, 17, '汤原县'); insert into city values(sequence_city.nextval, 5, 18, '桦川县'); insert into city values(sequence_city.nextval, 6, 19, '集贤县'); insert into city values(sequence_city.nextval, 6, 20, '宝清县'); insert into city values(sequence_city.nextval, 6, 21, '友谊县'); --添加四级菜单 --这里只提供了哈尔滨市的四级联动数据，其它数据，请自行添加 insert into city values(sequence_city.nextval, 13, 22, '兴隆镇'); insert into city values(sequence_city.nextval, 13, 23, '龙庙镇'); insert into city values(sequence_city.nextval, 13, 24, '洼兴镇'); insert into city values(sequence_city.nextval, 14, 25, '六团镇'); insert into city values(sequence_city.nextval, 14, 26, '中和镇'); insert into city values(sequence_city.nextval, 14, 27, '加信镇'); insert into city values(sequence_city.nextval, 15, 28, '东兴镇'); insert into city values(sequence_city.nextval, 15, 29, '大贵镇'); insert into city values(sequence_city.nextval, 15, 30, '新民镇'); --添加五级菜单 --这里只提供了巴彦县的五级联动数据，其它数据，请自行添加 insert into city values(sequence_city.nextval, 22, 31, '长春乡'); insert into city values(sequence_city.nextval, 22, 32, '丰乐乡'); insert into city values(sequence_city.nextval, 22, 33, '德祥乡'); insert into city values(sequence_city.nextval, 23, 34, '山后乡'); insert into city values(sequence_city.nextval, 23, 35, '华山乡'); insert into city values(sequence_city.nextval, 23, 36, '红光乡'); insert into city values(sequence_city.nextval, 24, 36, '镇东乡'); insert into city values(sequence_city.nextval, 24, 36, '富江乡'); insert into city values(sequence_city.nextval, 24, 36, '松花乡'); --添加六级菜单 --理论上可无限添加。但实际中，用到四级菜单的情况都不是太多，故以下数据略

专利

最新回复(0)