【combobox组件】-001-省市联动案例

最新推荐文章于 2023-01-03 16:50:57 发布

piao317110771

最新推荐文章于 2023-01-03 16:50:57 发布

阅读量446

点赞数

分类专栏： easyui 文章标签：【combobox组件】-001-省市联动案例

本文链接：https://blog.csdn.net/piao317110771/article/details/84763422

版权

easyui 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、界面展示

2、数据库脚本

--省份表结构
create table province (
  id int(10) not null,
  name varchar(50) default null
) engine=innodb default charset=utf8;

--城市表结构
create table city (
  id int(10) not null,
  name varchar(50) default null,
  pro_id int(10) not null
) engine=innodb default charset=utf8;

--省份表数据初始化
INSERT INTO province VALUES (1,'福建省');
INSERT INTO province VALUES (2,'广东省');
INSERT INTO province VALUES (3,'湖南省');
INSERT INTO province VALUES (4,'河南省');

--城市表数据初始化
INSERT INTO city VALUES (1,'厦门市',1);
INSERT INTO city VALUES (2,'漳州市',1);
INSERT INTO city VALUES (3,'广州市',2);
INSERT INTO city VALUES (4,'深圳市',2);
INSERT INTO city VALUES (5,'长沙市',3);
INSERT INTO city VALUES (6,'湘潭市',3);
INSERT INTO city VALUES (7,'郑州市',4);
INSERT INTO city VALUES (8,'商丘市',4);

3、WebContent/jsp/combobox_001.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>【combobox组件】-001-省市联动案例</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$('#sel_pro').combobox({
			onSelect:function() {
				var pid = $('#sel_pro').combobox('getValue');
				$('#sel_city').combobox('setValue','');
				$('#sel_city').combobox('reload','<%=root%>/ProvinceServlet?method=getCity&pid='+pid);
			}
		});
	});
</script>
</head>
<body>
	省份：<select id="sel_pro" class="easyui-combobox" url="<%=root%>/ProvinceServlet?method=getProList" valueField="id" textField="name" panelHeight="auto"></select>
	城市：<select id="sel_city" class="easyui-combobox" valueField="id" textField="name" panelHeight="auto"></select>
</body>
</html>

4、com.easyui.bean.Province.java

package com.easyui.bean;

/**
 * 省份信息
 * @author LiPiaoShui
 */
public class Province {

	private int id;
	private String name;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

5、com.easyui.bean.CityBean.java

package com.easyui.bean;

/**
 * 城市基本信息 
 * @author LiPiaoShui
 */
public class CityBean {

	private int id;
	private String name;
	private int proId;
	
	public CityBean() {
	}
	public CityBean(int id, String name) {
		this.id = id;
		this.name = name;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getProId() {
		return proId;
	}
	public void setProId(int proId) {
		this.proId = proId;
	}
	
}

6、com.easyui.servlet.ProvinceServlet.java

package com.easyui.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.easyui.bean.CityBean;
import com.easyui.bean.Province;
import com.easyui.dao.ProvinceDao;

/**
 * 省份和城市控制器
 * @author LiPiaoShui
 */
public class ProvinceServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private ProvinceDao pDao = new ProvinceDao();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String method = request.getParameter("method");
		if("getProList".equals(method)) {
			getProList(request,response);
		} else if("getCity".equals(method)) {
			getCity(request,response);
		}
	}

	/**
	 * 根据省份ID获取所有城市信息
	 * @param request
	 * @param response
	 */
	private void getCity(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			String pid = request.getParameter("pid");
			List<CityBean> cList = pDao.getCityListByProId(Integer.parseInt(pid));
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(JSONArray.fromObject(cList).toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获取全部省份信息
	 * @param request
	 * @param response
	 */
	private void getProList(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			List<Province> pList = pDao.getProList();
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(JSONArray.fromObject(pList).toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

}

7、com.easyui.dao.ProvinceDao.java

package com.easyui.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 com.easyui.bean.CityBean;
import com.easyui.bean.Province;
import com.easyui.util.DBUtil;

/**
 * 省份数据库操作类 
 * @author LiPiaoShui
 */
public class ProvinceDao {

	/**
	 * 获取全部省份信息
	 * @return
	 */
	public List<Province> getProList() {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		List<Province> pList = new ArrayList<Province>();
		try {
			String sql = "select * from province";
			conn = DBUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				Province p = new Province();
				p.setId(rs.getInt("id"));
				p.setName(rs.getString("name"));
				pList.add(p);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(rs, pstmt, conn);
		}
		return pList;
	}
	
	/**
	 * 根据省份ID获取所有城市信息
	 * @param pid
	 * @return
	 */
	public List<CityBean> getCityListByProId(int pid) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		List<CityBean> cList = new ArrayList<CityBean>();
		try {
			String sql = "select * from city where pro_id="+pid;
			conn = DBUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while(rs.next()) {
				CityBean c = new CityBean();
				c.setId(rs.getInt("id"));
				c.setName(rs.getString("name"));
				c.setProId(rs.getInt("pro_id"));
				cList.add(c);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(rs, pstmt, conn);
		}
		return cList;
	}
	
}