在easyui里写一个连接数据库的二级联动

最新推荐文章于 2022-05-15 00:14:37 发布

XHui_Lin

最新推荐文章于 2022-05-15 00:14:37 发布

阅读量942

点赞数

CC 4.0 BY-SA版权

分类专栏：框架

本文链接：https://blog.youkuaiyun.com/XHui_Lin/article/details/77285762

框架专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用EasyUI实现省市区三级联动效果。通过引入EasyUI库并利用jQuery插件，配合后台Struts2框架及数据库操作，实现前端下拉框的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二级联动的效果图

第一步：引入easyui库，如果没有easyui可以去www.jeasyui.net官网去下载

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

第二步：写入下拉框

省：<input id="sheng" name="dept">
市：<input id="shi" name="dept" value="-----请选择-----">

第三步：写js样式

<script type="text/javascript">
$(function(){
	/* 二级连动 */
		$('#sheng').combobox({    
		    url:'myCitys!selectSheng.action',
		    valueField:'c_id',    
		    textField:'sheng',
		    onSelect: function(node){    
		    	$('#shi').combobox({    
				    url:'myCitys!selectShi.action?sheng='+node.sheng,
				    valueField:'c_id',    
				    textField:'sheng',
			});  
	        }
	});  
	
});	

</script>

第四步：写一个dao方法

package com.zking.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.entity.City;
import com.zking.util.DBHelper;

public class CityDao {
	/**
	 * 查询省、distinct，去重复值
	 * @return 省
	 */
	 
	public List<City> selectSheng() {
		List<City> cList=new ArrayList<>();
		Connection conn=DBHelper.getConn();
		PreparedStatement ps=null;
		ResultSet rs=null;
		try {
			ps=conn.prepareStatement("select distinct sheng from city");
			rs=ps.executeQuery();
			while(rs.next()){
				String sheng=rs.getString("sheng");
				City c=new City(sheng);
				cList.add(c);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DBHelper.myCloas(conn, ps, rs);
		}
		return cList;
	}

	/**
	 *  根据省查询ID、市
	 * @param sheng 省
	 * @return ID、市
	 */
	 
	public List<City> selectShi(String sheng) {
		List<City> cList=new ArrayList<>();
		Connection conn=DBHelper.getConn();
		PreparedStatement ps=null;
		ResultSet rs=null;
		try {
			ps=conn.prepareStatement("select c_id,shi from city where sheng=?");
			ps.setString(1, sheng);
			rs=ps.executeQuery();
			while(rs.next()){
				int c_id=rs.getInt("c_id");
				String shi=rs.getString("shi");
				City c=new City(c_id,shi);
				cList.add(c);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			DBHelper.myCloas(conn, ps, rs);
		}
		return cList;
	}
}

第五部：我用了Struts2，所以你要导入9个Struts需要的jar包，写一个Struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<!-- 打开方法的动态调用 -->
	<constant name="struts.enable.DynamicMethodInvocation" value="true" />

	<package name="mypackage" extends="struts-default" namespace="/">
		<action name="myCitys" class="com.zking.action.CityAction">
		</action>
	</package>
</struts>

第六步：写一个Cityaction.java

package com.zking.action;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;
import com.zking.dao.CityDao;
import com.zking.entity.City;

public class CityAction extends ActionSupport{

	public String selectSheng() throws Exception {
		HttpServletResponse response=ServletActionContext.getResponse();
		response.setContentType("text/html;charset=utf-8"); 
		HttpServletRequest req=ServletActionContext.getRequest();		
		req.setCharacterEncoding("UTF-8");
		CityDao dao=new CityDao();
		List<City> cList=dao.selectSheng();
		List<City> cLists=new ArrayList<>();
		for (int i = 0; i < cList.size(); i++) {
			City citys=new City(i, cList.get(i).getSheng());
			cLists.add(citys);
		}
		PrintWriter out=ServletActionContext.getResponse().getWriter();
		String json=JSON.toJSONString(cLists);
		out.write(json.toString());
		out.close();
		return null;
	}
	
	public String selectShi() throws Exception {
		HttpServletResponse response=ServletActionContext.getResponse();
		response.setContentType("text/html;charset=utf-8"); 
		HttpServletRequest req=ServletActionContext.getRequest();		
		req.setCharacterEncoding("UTF-8");
		CityDao dao=new CityDao();
		String sheng=req.getParameter("sheng");
		List<City> cLists=dao.selectShi(sheng);
		PrintWriter out=ServletActionContext.getResponse().getWriter();
		String json=JSON.toJSONString(cLists);
		out.write(json.toString());
		out.close();
		return null;
	}
}