在程序开发过程中，经常要实现级联的作用，比如：省市区的级联，当下拉列表选择了省之后，在市的下拉的时候就应该是该省下的所有城市，而不是全部饿城市，以此类推在选着市区之后在区域也应该是该市下的市区。
其实这种级联的方式，完全可以用一颗树表示，比如省是根节点，其他的都是其孩子的方式表示，但是这里我只用下拉列表的方式实现，毕竟有得地方用这种方式还是有点优势，而且不是很复杂。
其实现的步骤如下：
首先看看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 下拉列表
主要实现下拉列表复选功能，从Ext.ux.form.LovCombo.js文件改进而来 目前实现的有全选，全不选，自然序，操作序功能 changeSort负责实现操作序功能（即先选的显示顺序在前，后选的在后；取消操作也不影响操作的顺序...
将文件拷贝到extjs根目录下。运行即可。实现了选中之类。父类联动选中
Extjs4下拉菜单中用Grid显示，有单选，和多选两个控件，完美通用代码控件，绝对让你好用，值得收藏^-^
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
extjs 树形下拉列表框，可以进行数据选择，数据回显。
说明：本例主要实现在树节点数据过多的情况下对数据进行异步请求，并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a，在struts2下测试通过。例子仅供提供思路，简单易懂，不负责代码优化，哈哈！
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
ExtJs3下拉树 分两种方式调用：第一种： xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
NULL 博文链接：https://brooke.iteye.com/blog/1477860
ExtJs4.2没有直接提供下拉树这个组件，但是有例子可以用，文件位置：ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧：默认显示了根节点；达到最小高度时再展开节点，高度不能自动调整。 所以我做了一...
下拉框中要添加一项 ’所有‘ ，由于是combox无法使用option
ExtJS4下拉树组件 ExtJS4下拉树组件
最近小弟做了Extjs实现实现下拉框联动的效果，参考了好久才学会，闲下来发一个简单的例子。。呵呵
此处做一个extjs下拉列，以备后用。该项目中包涵使用说明，将项目下载下来按照使用说明即可。 本人也是extjs的初学者，有不足之处希望使用该资源的兄弟姐妹指出，希望对大家有帮助。
本文实例为大家分享了Extjs实现下拉树效果，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet...
NULL 博文链接：https://init-since.iteye.com/blog/2095766
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
Extjs4下拉多选扩展