ExtJS实现上拉列表级联-JavaSript-爱易网页

ExtJS实现上拉列表级联

日期：2014-05-16　浏览次数：20521 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ExtJS实现上拉列表级联

相关资料更多>

推荐阅读更多>