用Extjs+dwr 写的一个二级联动程序

最新推荐文章于 2022-06-03 18:34:32 发布

wangdandan2000

最新推荐文章于 2022-06-03 18:34:32 发布

阅读量139

点赞数 1

分类专栏： js收集文章标签： ext+dwr ext 联动 dwr联动 js联动二级联动

本文链接：https://blog.csdn.net/wangdandan2000/article/details/84704403

版权

js收集专栏收录该内容

0 篇文章 0 订阅

订阅专栏

近期，在网上看了一些资料，自己写了一个二级联动的例子：

在这里，DWR的配置就不多说了，先贴上dwr.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
  <allow>
    <filter class="org.directwebremoting.filter.AuditLogAjaxFilter"/>      
     <filter class="org.directwebremoting.filter.AuditLogAjaxFilter"/>
     <create creator="new" javascript="MainService">
      <param name="class" value="com.service.portal.MainService "/>
     </create>
</allow>
</dwr>

MainService.java 代码如下：

public class MainService {
	/**
	 * 获取联动类型
	 * @param hs 前台传入的查询参数pid
	 * @return 
	 */
	public ListRange getType(HashMap hs){
		hs.put("flag","1");
		List<Type> list = typeDao.getTypeList(hs);
		listRange.setData(list.toArray());
		listRange.setTotalSize(list.size());	
		return listRange;
	}

}

该方法返回一个ListRange；其中的typeDao.getTypeList(hs) 这个方法就不多介绍，就是返回一个List<Type> （Type类代码下面会贴上）。

ListRange.java:

public class ListRange {
	private Object[] data;
	private int totalSize;
	public Object[] getData() {
		return data;
	}
	public void setData(Object[] data) {
		this.data = data;
	}
	public int getTotalSize() {
		return totalSize;
	}
	public void setTotalSize(int totalSize) {
		this.totalSize = totalSize;
	}
	
}

Type.java

/**
 * 类型
 * @author Administrator
 *
 */
public class Type {
	private Integer id;
	private String name;
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

接下来上是显示页面test.jsp

<%@ page contentType="text/html; charset=GBK"%>
<html>
 <head>
   <title>二级联动</title>
      <link rel="stylesheet" type="text/css" href="../css/resources/css/ext-all.css" />
      <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
      <script type='text/javascript' src='../dwr/interface/MainService.js'> </script>
      <script type='text/javascript' src='../dwr/engine.js'> </script>
      <script type='text/javascript' src='../dwr/util.js'> </script>
      <script type="text/javascript" src="../js/dwrproxy.js"></script>
      <script type="text/javascript" src="test.js"></script> 
   </head>
   <body>
      <div id="from"></div>	
   </body>
</html>

test.js:

Ext.onReady(function() {
	var typeRecord = Ext.data.Record.create([
		{name : 'id', type : 'int',mapping:'id'}, 
		{name : 'name',type : 'string',mapping:'name'}
	]);
	
	var typeStore = new Ext.data.Store({
		proxy : new Ext.data.DWRProxy(MainService.getType, true),
		reader : new Ext.data.ListRangeReader({
					totalProperty : 'totalSize',
					root:'data',
					id : 'pid'
				}, typeRecord)
	});
	typeStore.on("beforeload", function(thiz, options) {
		thiz.baseParams["pid"] = '0';
	});
	
	var sonStore = new Ext.data.Store({
		proxy : new Ext.data.DWRProxy(MainService.getType, true),
		reader : new Ext.data.ListRangeReader({
					totalProperty : 'totalSize',
					root:'data',
					id : 'pid'
				}, typeRecord)
	});
			
	var tyleCombobox = new Ext.form.ComboBox({
		fieldLabel:"一级类型",
		valueField:"id",
		displayField:"name",
		store:typeStore,
		triggerAction:"all",
		name :'_type',
		id:'_type', 
		emptyText:'请选择...',
		blankText:'请选择类型',
		editable:false,
		width:200,
		mode:"remote",
		listeners:{
			'select' : function(o){
				var v = o.getValue();
				var sonType = Ext.getCmp('son_type');
				sonType.reset(); //重置
				sonStore.load({  //加载sonStore
					params : {
						pid : v
					}
				})		
			}
		}
	});
	
	var sonTypeCombobox = new Ext.form.ComboBox({
		fieldLabel:"二级类型",
		valueField:"id",
		displayField:"name",
		store:sonStore,
		triggerAction:"all",
		name :'son_type',
		id:'son_type',
		emptyText:'请选择...',
		blankText:'请选择二级类型',
		editable:false,
		width:200,
		mode:"local"
		});
			
    var form = new Ext.form.FormPanel({
		title : '二级联动例子',
		frame:true,
		id:'form',
		bodyStyle:"padding:10px 10px 0px 10px",
		renderTo : 'from',
		items:[tyleCombobox,sonTypeCombobox]
	});
});

在这里注意：tyleCombobox 的 mode用的是“remote” 而 sonTypeCombobox 的mode用的是“local” ，这样的话，只有在选择了一级类型后才加载二级类型的数据。若sonTypeCombobox 的mode也改成“remote”的话，会出现在没选择一级类型的情况下，可直接选二级类型。

附：mode:'local'指的是打开页面时就将数据取到本地，需要load() 启动

mode:'remote'指的是要动态去服务器端拿数据,点击下拉列表时会加载数据