`
lizhenbin2010
  • 浏览: 101267 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ExtJS实现下拉列表级联

 
阅读更多

      在程序开发过程中，经常要实现级联的作用，比如：省市区的级联，当下拉列表选择了省之后，在市的下拉的时候就应该是该省下的所有城市，而不是全部饿城市，以此类推在选着市区之后在区域也应该是该市下的市区。

       其实这种级联的方式，完全可以用一颗树表示，比如省是根节点，其他的都是其孩子的方式表示，但是这里我只用下拉列表的方式实现，毕竟有得地方用这种方式还是有点优势，而且不是很复杂。

其实现的步骤如下：

首先看看JS部分：

建立省市区的三个下拉列表comboBox

var pcombo = new Ext.form.ComboBox({
	fieldLabel : '所在省',
	anchor: '80%',
                forceSelection : true,
	selectOnFocus: true,
	triggerAction: 'all',
	mode: 'local',
	store: pdatastore,
	allowBlank: true,
	maxHeight:180,
                valueField : 'pid',
	displayField : 'pname',
	applyTo : 'pcombo'
});

var ccombo = new Ext.form.ComboBox({
	fieldLabel : '所在市',
	anchor: '80%',
                forceSelection : true,
	selectOnFocus: true,
	triggerAction: 'all',
	mode: 'local',
	store: cdatastore,
	allowBlank: true,
	maxHeight:180,
                valueField : 'cid',
	displayField : 'cname',
	applyTo : 'ccombo'
});

var acombo = new Ext.form.ComboBox({
	fieldLabel : '所在区',
	anchor: '80%',
                forceSelection : true,
	selectOnFocus: true,
	triggerAction: 'all',
	mode: 'local',
	store: adatastore,
	allowBlank: true,
	maxHeight:180,
                valueField : 'aid',
	displayField : 'aname',
	applyTo : 'acombo'
});

  这样就定义号了三个级联的comboBox，我这里要实现的是从数据库中加载数据，所有定义一个加载数据的store，其他实现方式如下：

//------------省开始------------------	
			var precord=[
		    	{name : 'pid',type : 'string'},
		    	{name : 'pname',type : 'string'}
			];
								
			var precordHeads = Ext.data.Record.create(precord);			

		    var pdatastore = new Ext.data.Store( {
				proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findProvinces.action'})),
				reader : new Ext.data.JsonReader( {
					root : 'provinces' //后台返回的list集合
				}, precordHeads),
				remoteSort : false
			});
			
			//----------市开始--------------------
			var crecord=[
		    	{name : 'cid',type : 'string'},
		    	{name : 'cname',type : 'string'},
		    	{name : 'pid',type : 'string'}
			];	
							
			var crecordHeads = Ext.data.Record.create(crecord);	
					
		    var cdatastore = new Ext.data.Store( {
				proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findCityByPid.action'})),
				reader : new Ext.data.JsonReader( {
					root : 'cities' //后台返回的list集合
				}, crecordHeads),
				remoteSort : false
			});
			
			//----------区开始--------------------
			var arecord=[
		    	{name : 'aid',type : 'string'},
		    	{name : 'aname',type : 'string'},
		    	{name : 'cid',type : 'string'}
			];	
							
			var arecordHeads = Ext.data.Record.create(arecord);
						
		    var adatastore = new Ext.data.Store( {
				proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findAreaByCid.action'})),
				reader : new Ext.data.JsonReader( {
					root : 'areas' //后台返回的list集合
				}, arecordHeads),
				remoteSort : false
			});

  级联下拉列表需要用到comboBox的一个事件，就是当点击第一个（省）的时候，传一个省的id过去在去加载市的数据，在加载市的数据之前，应该先清掉之前的数据，这样可以重复利用，我这里的具体实现方式如下：

pdatastore.load(); //加载store()

pcombo.on('select', function(comboBox){
				
				//alert(comboBox.getValue());
				ccombo.clearValue(); //清理掉上一次的数据
				cdatastore.load({params:{temppid: comboBox.getValue()}});
			});
			
			ccombo.on('select', function(comboBox){
				
				acombo.clearValue();
				adatastore.load({params:{tempcid: comboBox.getValue()}});
			});
			
			acombo.on('select', function(comboBox){

				alert(pcombo.getValue()+'-'+ccombo.getValue()+'-'+acombo.getValue());
				//获取数据后的响应操作
				//pcombo.clearValue();
				//ccombo.clearValue();
				//acombo.clearValue();
							
			});

 到这里就实现了级联下拉列表的js部分，但是要想在页面上显示，把他嵌入到jsp页面中。

 

<body>
	省：<input id=pcombo type="text" />
	市：<input id=ccombo type="text" />
	区：<input id=acombo type="text" />
	<!-- comboBox必须放在input标签里面 -->
  </body>

 

到这里页面显示部分就算已经完成了，接下来是后台的实现部分，我这里定义了三个POJO分别是省市区，并且通过ID关联起来，具体代码如下：

public class Province {
	
	private String pid;
	private String pname;

                 //相应的get/set方法
}

public class Province {
	
	private String pid;
	private String pname;

                 //相应的get/set方法
}

public class Area {

	private String aid;
	private String aname;
	private String cid;

                 //相应的get/set方法
}

 

读取数据库数据的action部分，我这里使用了原始的JDBC代码去读取数据库，方法比较的笨，每次都要开启JDBC的连接和关闭，没有采用工厂的模式，或者框架去实现，也是方便读取数据，这里只是读取简单的数据库表格数据，我个人认为没有必要用到ssh或者ssi之类的，所以我还是选择用JDBC实现，具体代码如下：

package ext.util.comboBox;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;
/**
 * 下拉列表级联
 * @author lizhenbin
 *
 */
public class ComboCascadeAction extends ActionSupport {
	
	private List<Province> provinces;
	private List<City> cities;
	private List<Area> areas;
	private String temppid;
	private String tempcid;
	private int total;


	/**
	 * 查找所有的省信息
	 * @return
	 */
	public String findProvinces() throws Exception {
		
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		
		List<Province> plist = new ArrayList<Province>();

		Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
		conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
		stmt = conn.createStatement();
		rs = stmt.executeQuery("select * from t_province");
		while(rs.next()) {
			Province temp = new Province();
			temp.setPid(rs.getString("PID"));
			temp.setPname(rs.getString("PNAME"));
			plist.add(temp);
		}
		this.setProvinces(plist);
		conn.close();
		stmt.close();
		rs.close();
		return "success";
	}
	
	/**
	 * 通过省Id查询城市
	 * @return
	 * @throws Exception
	 */
	public String findCityByPid() throws Exception {
		
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		
		List<City> clist = new ArrayList<City>();

		Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
		conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
		stmt = conn.createStatement();
		rs = stmt.executeQuery("select * from t_city where pid = "+this.temppid+"");
		while(rs.next()) {
			City temp = new City();
			temp.setCid(rs.getString("CID"));
			temp.setCname(rs.getString("CNAME"));
			temp.setPid(rs.getString("PID"));
			clist.add(temp);
		}
		this.setCities(clist);
		conn.close();
		stmt.close();
		rs.close();
		return "success";
	}
	
	/**
	 * 通过城市Id查询区域
	 * @return
	 * @throws Exception
	 */
	public String findAreaByCid() throws Exception {
		
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		
		List<Area> alist = new ArrayList<Area>();

		Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
		conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
		stmt = conn.createStatement();
		rs = stmt.executeQuery("select * from t_area where cid = "+this.tempcid+"");
		while(rs.next()) {
			Area temp = new Area();
			temp.setAid(rs.getString("AID"));
			temp.setAname(rs.getString("ANAME"));
			temp.setCid(rs.getString("CID"));
			alist.add(temp);
		}
		this.setAreas(alist);
		conn.close();
		stmt.close();
		rs.close();
		return "success";
	}
	
	public static void main(String[] agrs) {
		
		ComboCascadeAction c = new ComboCascadeAction();
		try {
			c.findProvinces();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public List<Province> getProvinces() {
		return provinces;
	}
	public void setProvinces(List<Province> provinces) {
		this.provinces = provinces;
	}
	public List<City> getCities() {
		return cities;
	}
	public void setCities(List<City> cities) {
		this.cities = cities;
	}
	public List<Area> getAreas() {
		return areas;
	}
	public void setAreas(List<Area> areas) {
		this.areas = areas;
	}
	
	public String getTemppid() {
		return temppid;
	}

	public void setTemppid(String temppid) {
		this.temppid = temppid;
	}

	public String getTempcid() {
		return tempcid;
	}

	public void setTempcid(String tempcid) {
		this.tempcid = tempcid;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}
}

 

最后就是struts.xml的配置了，我读取数据的时候用到的是JsonReader所以返回的数据应该是Json类型，所以我的配置信息如下：

<package name="weibo_json" namespace="/json"  extends="json-default">

<!-- comboBox级联 -->
<action name="cascade_*" method="{1}" class="ext.util.comboBox.ComboCascadeAction">
	<result type="json"></result>
</action>

</package>

  

到这里级联下拉列表的后台代码实现部分已经完成，接下来就是在数据库中创建表格，因为主要是演示，所以建立的表格比较的简单：

省表：

-- Create table
create table T_PROVINCE
(
  PID   VARCHAR2(20) not null,
  PNAME VARCHAR2(100)
)
tablespace WEIBO_DATA
  pctfree 10
  initrans 1
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );
-- Create/Recreate primary, unique and foreign key constraints 
alter table T_PROVINCE
  add constraint PK_T_PROVINCE primary key (PID)
  using index 
  tablespace WEIBO_DATA
  pctfree 10
  initrans 2
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );

 市表：

-- Create table
create table T_CITY
(
  CID   VARCHAR2(20) not null,
  CNAME VARCHAR2(100) not null,
  PID   VARCHAR2(20)
)
tablespace WEIBO_DATA
  pctfree 10
  initrans 1
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );
-- Create/Recreate primary, unique and foreign key constraints 
alter table T_CITY
  add constraint PK_T_CITY primary key (CID)
  using index 
  tablespace WEIBO_DATA
  pctfree 10
  initrans 2
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );

 

区表：

-- Create table
create table T_AREA
(
  AID   VARCHAR2(20) not null,
  ANAME VARCHAR2(20) not null,
  CID   VARCHAR2(20)
)
tablespace WEIBO_DATA
  pctfree 10
  initrans 1
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );
-- Create/Recreate primary, unique and foreign key constraints 
alter table T_AREA
  add constraint PK_T_AID primary key (AID)
  using index 
  tablespace WEIBO_DATA
  pctfree 10
  initrans 2
  maxtrans 255
  storage
  (
    initial 1M
    next 1M
    minextents 1
    maxextents unlimited
    pctincrease 0
  );

 

到这里全部结束，需要级联的数据，自己在数据库表格中加入即可，我的数据库版本是oracle 10g，你也可以换成其他的比如mysql，换的时候记住要把数据库的连接部分改一下，并且加入相应链接数据库的jar就行，本人能力有限，有什么问题还请多多指教。

  • 大小: 3.1 KB
分享到：
| ExtJS ComboBox读取数据库数据用法
评论
4 楼 weizaiC 2012-12-19  

[flash=200,200][/flash]
3 楼 road_16 2012-08-06  
奶奶的，大妹子的
2 楼 road_16 2012-08-06  
2.0版本的前台显示不了数据，3.0版本的才可以，检查了大半天啊，大哥
1 楼 road_16 2012-08-06  
怎么不说明extjs所使用的版本呢？版本不一样，写法也是不同的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBox通常用于提供一个下拉列表供用户选择，而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者融合，创建了一个下拉树菜单，用户可以在其中浏览和选择树形结构的数据。 要实现单选功能，ComboBoxTree...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式，尤其在数据表单中用于联动选择。在本文中，我们将深入探讨EXTJS如何实现ComboBox的级联效果，并理解其数据提交VALUE的工作原理。 首先，我们需要创建两...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式，它允许用户从下拉列表中选择一个值，并且这个选择会影响到另一个ComboBox的选择项，通常用于表示层级关系的数据，比如省份-城市-区县。这种功能在数据筛选、...

    Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用

    用户可以在下拉列表中看到一个树形结构，逐级展开节点，选择需要的项。这种组件特别适合于那些需要展示层级关系且允许用户多选或单选的情况，如部门组织结构、地区分类等。 2. **多选与单选支持** 在ExtJS 4.x的...

    ExtJS 设置级联菜单的默认值

    其中，级联菜单是一种常见的用户界面组件，允许用户从一个下拉列表中选择一个选项来更新另一个下拉列表的选项。在这个过程中，设置默认值是一个非常关键的操作。 本文将详细介绍如何使用ExtJS框架设置级联菜单的...

    Ext combo 下拉框级联

    在这个场景中，"combo"指的是Ext JS中的ComboBox组件，它提供了一个下拉列表供用户选择。"级联"则意味着一个下拉框的选择会影响到另一个下拉框的选项，通常用于展示层级关系的数据。 ComboBox在Ext JS中是一个非常...

    ExtJS 下拉多选框lovcombo

    ### ExtJS 下拉多选框lovcombo：省份与城市级联选择实现 #### 背景介绍 在软件开发过程中，经常会遇到需要实现省份、城市等地理位置信息的级联选择功能的需求。对于前端开发者而言，如何高效地实现这一功能成为了...

    Extjs控件属性（详细版）

    - **minListWidth**：设置下拉列表的最小宽度，默认为70像素。 - **loadingText**：设置加载数据时的提示信息，仅在`mode='remote'`时生效。 - **maxHeight**：设置下拉列表的最大高度，默认为300像素。 - **...

    EXTJS记事本 当CompositeField遇上RowEditor

    在这个场景中，开发者面临的问题是如何在EXTJS的RowEditor中实现一个由三个下拉列表组成的级联选择控件，即CompositeField，来处理大量的物料种类数据。RowEditor通常用作表格行的编辑工具，提供对表格单元格的快速...

    ssh2+extCombobox联动动态下拉框

    而ExtJS的ComboBox是一个功能强大的组件，它提供了类似下拉列表的功能，用户可以选择一个或多个值。当我们将SSH2与ExtJS ComboBox结合使用时，可以创建动态联动的下拉框，实现数据的级联选择，提高用户交互体验。 ...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    `list`属性指定的是后台传入的列表数据，`onchange`事件触发时会调用`getTsFromDescribe`函数，实现二级菜单的动态加载。 在后台，我们通常会使用Service层和DAO层来处理数据。Service层调用DAO层的方法获取数据库...

    EXT2.0中文教程

    9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧！邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.2. localXHR让你在不用服务器就玩ajax 10.3....

    Ext 开发指南 学习资料

    9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧！邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4. DWRProxy和ComboBox 10.2. localXHR让你...

Magicbox
Global site tag (gtag.js) - Google Analytics