`
宋双旺
  • 浏览: 154312 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jeecg v2.0 二级联动例子

阅读更多

 

页面效果如下图所示:

 

二级联动

 

js代码如下图所示:

$(function(){  
	//初始化省份、城市下拉列表
 	 var provinceId = $('#provinceId');
		provinceId.combobox({
	 	    url:'demoAction!getProvinceJson.action',
		    valueField:'provinceId',
		    textField:'provinceName',
		    onChange:function(){
		     	 var provinceId = $('#provinceId').combobox('getValue');
		     	 $('#cityId').combobox({
			     	 url:'demoAction!getCityJsonByProvinceId.action?provinceId='+provinceId,
			      	 valueField:'cityId',
			         textField:'cityName'
		         });
		    }
	   });
});

 action处理如下图所示:

	// ××××××××××××××××××××××××××××××××××××××××××××××××××××××××××
	// ×××××××××××××××××××××××××××二级联动×××××××××××××××××××××××
	// ××××××××××××××××××××××××××××××××××××××××××××××××××××××××××	
	
	//进入二级联动页面
	public String menuButton2(){
		return "combobx2";
	}
	
	//得到省级数据
	public void getProvinceJson(){
		JSONArray jsonArray = new JSONArray();
		JSONObject jsonObj = new JSONObject();
		jsonObj.put("provinceId", "bj");
		jsonObj.put("provinceName", "北京");
		jsonObj.put("selected", true);
		jsonArray.add(jsonObj);	
		JSONObject jsonObj2 = new JSONObject();		
		jsonObj2.put("provinceId", "hb");
		jsonObj2.put("provinceName", "河北");
		jsonArray.add(jsonObj2);
		writeJson(jsonArray);
	}
	//-----------------------得到城市列表---------------------------
	//浏览器传递过来的信息
	private String provinceId;
	
	public String getProvinceId() {
		return provinceId;
	}

	public void setProvinceId(String provinceId) {
		this.provinceId = provinceId;
	}

	public void getCityJsonByProvinceId(){
		JSONArray jsonArray = new JSONArray();
		JSONObject jsonObj = new JSONObject();
		if("bj".equals(provinceId)){
			jsonObj.put("cityId", "ft");
			jsonObj.put("cityName", "丰台区");
			jsonObj.put("selected", true);
			JSONObject jsonObj2 = new JSONObject();			
			jsonArray.add(jsonObj);					
			jsonObj2.put("cityId", "hd");
			jsonObj2.put("cityName", "海淀区");
			jsonArray.add(jsonObj2);					
		}
		if("hb".equals(provinceId)){
			jsonObj.put("cityId", "lf");
			jsonObj.put("cityName", "廊坊");
			jsonObj.put("selected", true);
			jsonArray.add(jsonObj);	
			JSONObject jsonObj2 = new JSONObject();				
			jsonObj2.put("cityId", "cz");
			jsonObj2.put("cityName", "石家庄");
			jsonArray.add(jsonObj2);					
		}
		writeJson(jsonArray);
	}

 注意:如果默认使数据选中,需要设置 selected=true

小技巧:官网提供的例子里,直接通过firebug查看,如下图所示:

 

firebug

  • 大小: 43.9 KB
  • 大小: 61.7 KB
分享到:
评论

相关推荐

    二级联动例子

    在这个例子中,我们主要探讨如何在Android应用中实现一个简单的二级联动效果。 首先,我们需要理解二级联动的基本概念。二级联动指的是两个或多个下拉列表之间的关联,当用户在一个下拉列表中选择一个选项时,另一...

    struts2.0三级联动 json

    Struts2.0是一个强大的Java Web开发框架,它在企业级应用中被广泛使用,尤其在构建MVC(Model-View-Controller)架构的应用程序时。三级联动是一种常见的功能需求,通常出现在下拉框的选择中,例如省份、城市、区县...

    asp二级联动 html二级联动

    在网页设计中,二级联动(或称为下拉菜单联动)是一种常见的交互设计方式,它通常用于数据筛选或信息选择,特别是在有层次结构的数据中。二级联动的原理是,当用户在一个下拉菜单(一级菜单)中做出选择时,另一个...

    uniapp 二级联动.zip

    本项目"uniapp 二级联动.zip"显然是一个关于使用uniapp进行二级联动功能开发的实践案例,这在很多数据筛选、地区选择等场景中非常常见。下面,我们将深入探讨uniapp二级联动的实现原理和相关知识点。 首先,理解...

    asp二级联动下拉框,三级联动下拉框

    在ASP中,二级联动和三级联动下拉框是常见的功能,通常用于实现数据的筛选和过滤,例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...

    Java中二级联动的简单而实用例子

    Java 中二级联动的简单而实用的例子 Java 中的二级联动是指在 select 选择框中,选择某个选项后,根据选项的值来动态加载另外一个 select 选择框的选项,这种技术广泛应用于许多 web 应用程序中,以提高用户体验和...

    Ext二级联动完整例子

    总的来说,这个“Ext二级联动完整例子”项目将涵盖ExtJS的基础组件使用、数据绑定、事件处理和用户交互等多个方面,对于学习和掌握ExtJS的联动功能具有很高的参考价值。通过分析和运行这个项目,开发者能够深入理解...

    网页按钮二级联动三级联动

    二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动

    datagridview使用combobox进行二级联动

    当需要实现二级联动效果时,即一个`ComboBox`的选择会影响到另一个`ComboBox`的选项,这种功能常见于多级分类选择或筛选场景。本篇文章将深入探讨如何在C#环境下,利用这两个控件在`DataGridView`中实现二级联动。 ...

    省市二级联动mysql数据库

    省市二级联动mysql数据库

    用ajax实现的jsp二级联动下拉列表

    在网页开发中,二级联动下拉列表是一种常见的交互设计,尤其在处理层级关系的数据时,如省份-城市、类别-子类别的选择。本主题主要探讨如何利用AJAX技术与JSP结合,实现这种高效的异步加载二级联动效果,从而避免一...

    jquery插件城市二级联动

    城市二级联动是网页开发中常见的功能,特别是在表单填写或者地址选择时,用户需要从一个大范围(如省份)中选择后,系统自动显示出与之相关的更具体范围(如城市)。这种交互方式能够提高用户体验,减少用户输入错误...

    asp数据库二级联动

    在ASP中实现数据库二级联动,通常是指在一个下拉菜单或选择框中选择一个选项后,根据该选项自动更新另一个下拉菜单或选择框的内容,这种效果在数据筛选和表单填写中非常常见。这种功能在网站的导航、筛选、查询等...

    下拉框二级联动

    在IT行业中,二级联动是一种常见的交互设计,尤其在网页表单和数据筛选中十分常见。本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在...

    省市二级联动Access版

    省市二级联动是一种常见的数据筛选和展示方式,在网页设计或数据库应用中经常被使用。这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能,使得用户在选择省份时,下拉菜单会动态...

    AJAX二级联动超实用例子程序(三种)

    在这个“AJAX二级联动超实用例子程序”中,包含了三种不同的实现方式,每个都作为一个独立的Web工程,展示了如何利用AJAX进行二级联动效果的构建。 一、二级联动的基本概念 二级联动通常指的是在一个下拉框(select...

    php+ajax二级联动

    在IT行业中,"php+ajax 二级联动"是一种常见的前端交互技术,主要用于构建动态、无刷新的用户界面。这种技术可以提升用户体验,因为用户在选择一个选项时,无需等待整个页面刷新,就能实时看到下级选项的变化。接...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    省市二级联动代码JS

    标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能,它允许用户在选择省份后,自动更新下拉菜单以显示对应省份的城市,从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景,...

    二级联动 下拉列表

    二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了

Global site tag (gtag.js) - Google Analytics