`

用struts,jquery-easyui省市级联小例子

 
阅读更多
1。运用的是jquery-easyui中combobox组件,前端展示引入jquery-1.7.1.min.js和
   jquery.easyui.min.js包,直接看代码:
(1)前端html代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path",basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){	 
           var province = $('#province').combobox({ 
             width:'100',
             url:'citys.do?param=queryProvince',
             valueField:'id',
             textField:'code',
             onSelect:function(record){ 
                 $('#city').combobox({ 
                     disabled:false, 
                     width:'100',
                     url:'citys.do?param=queryCityByProvinceId&parentid='+record.id, 
                     valueField:'id', 
                     textField:'name'
                 }).combobox('clear');
                 $("#province").combobox('setValue',record.name);
             } 
         }); 
         
          $('#city').combobox({ 
             disabled:true, 
             width:'100',
             url:'citys.do?param=queryCityByProvinceId&parentid='+province.val(),
             valueField:'id',
             textField:'name' 
         }); 
         });
</script>
  </head>
  
  <body>
    <center>
    <select id="province" name="province" class="easyui-combobox">
    </select>
    &nbsp;
     <select id="city" name="city" class="easyui-combobox">
    </select>
    
    </center>
  </body>
</html>


(2)Java代码,取得省份和相应的市,然后转换成JSON传到前端,如下:
public class CityAction  extends DispatchAction{
	
         /**

          取得所有省份
          */
	public ActionForward queryProvince(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		
		List<City> list = null;
		CityDAO citydao = new CityDAO();
		list = citydao.findProvince();
		JSONArray json=JSONArray.fromObject(list);
		response.setContentType("text/json; charset=utf-8"); 
		PrintWriter out=response.getWriter();  
		out.print(json);
		out.flush();
		return null;
	}
	/**
         取得相应省份的市.
         */
	public ActionForward queryCityByProvinceId(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String parentid = request.getParameter("parentid");
		List<City> list = null;
		CityDAO citydao = new CityDAO();
		if(parentid!=null&&!parentid.equals("null")){
		list = citydao.findCity(Long.parseLong(parentid));
		}
		JSONArray json=JSONArray.fromObject(list);
		response.setContentType("text/json; charset=utf-8"); 
		PrintWriter out=response.getWriter();  
		out.print(json);
		out.flush();
		return null;
	}

}

分享到:
评论

相关推荐

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-1.2.2 jquery-easyui-1.2.2

    jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2

    jquery-easyui.zip_easyui框架_html 框架_jquery-easyui

    在文件列表中,“1漂亮的jquery easyui后台框架”可能是一个示例项目,展示如何使用EasyUI创建一个美观的后台管理系统界面。这个文件可能包含了一系列HTML文件、CSS样式表和JavaScript脚本,通过这些文件,我们可以...

    jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e

    jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的组件和易于使用的API,极大地简化了Web界面的开发。而其核心魅力之一,便是丰富的主题系统,使得开发者可以轻松定制出符合企业品牌或者个人喜好的用户...

    jquery-easyui-1.7.0.zip官方文档

    《jQuery EasyUI 1.7.0:打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件,使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中,这个强大的...

    jquery-easyui-1.2.6

    jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。 jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助...

    jquery-easyui-1.3.5

    jQuery EasyUI是基于jQuery的,因此理解jQuery的基本概念和语法是使用EasyUI的前提。 `EasyUI` 是一套基于jQuery的插件集合,它提供了一系列的UI组件,如对话框、表格、树形结构、表单验证、菜单等。这些组件都是...

    jquery-easyui-1.5.5.zip

    easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...

    超实用的jQuery-EasyUI视频教程(30集)

    教程名称:超实用的jQuery-EasyUI视频教程(30集)课程目录:【】jQuery-EasyUI视频教程(01-02集)【】jQuery-EasyUI视频教程(03-04集)【】jQuery-EasyUI视频教程(05-06集)【】jQuery-EasyUI视频教程(07-08集...

    Jquery-Easyui-1.2.3

    《jQuery EasyUI 1.2.3:轻松构建高效用户界面》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的组件和便捷的API,用于快速开发出具有专业外观和交互体验的Web应用程序。标题中的 "Jquery-Easyui-...

    jquery-easyui-1.5.5

    该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css

    jquery-easyui-1.5完整源码.zip

    《jQuery EasyUI 1.5 完整源码解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如表格、对话框、菜单、按钮等,大大简化了Web应用程序的开发。在"jquery-easyui-1.5完整...

    jquery-easyui-themes

    jquery-easyui-themes,easyui主题包,包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题,具体的php使用方式见:...

    jquery-easyui完整demo演示

    jQuery EasyUI 是基于 jQuery 的轻量级框架,它不依赖任何其他库,只需要引入相应的 CSS 和 JS 文件即可使用。EasyUI 提供了诸如窗口(Window)、表单(Form)、面板(Panel)、菜单(Menu)等丰富的组件,以及数据...

    jquery-easyui-EDT-1.4-build1-附带各种主题

    jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列易于使用的组件,如表格、下拉菜单、对话框等,极大地简化了网页的用户界面开发。在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的...

    jquery-easyui-1.3.2+API

    该文件中含有jquery-easyui 开发使用实例demo 及 jquery.easyui.min.js、jquery-1.8.0.min.js文件 ,以及EasyUI-1.3.2+中文版API,个人觉得在WEB开发的时候挺实用的,希望能方便大家

    jquery-easyui-1.3.2 demo

    本篇文章将详细探讨 "jquery-easyui-1.3.2 demo",即官方提供的示例,帮助读者理解并掌握这一强大工具的使用方法。 EasyUI 的核心在于其组件库,这些组件包括数据网格(datagrid)、下拉树(combotree)、日期选择...

    jquery-easyui-EDT-1.5.5.rar

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它极大地简化了网页界面的构建过程,提供了丰富的组件和易于使用的API,使得开发者能够快速创建出功能完备、交互性强的Web应用。而“jquery-easyui-EDT-1.5.5.rar...

    jQuery EasyUI jquery-easyui-1.5.5.6

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些...

Global site tag (gtag.js) - Google Analytics