左右列表相互操作控件

一、控件代码封装：

/**
 * For:左右列表相互操作控件
 * Author:vincan
 * Date:2008-10-22
 */
dojo.declare("BaseSelectMoveBox",null,{
	listBox1:null,//左列表
	cmdIn:null,//添加按钮
	cmdOut:null,//移出按钮
	listBox2:null,//右列表

	/**
	 * 构造函数：初始化对象、事件绑定
	 */
	constructor:function(listBox1,cmdIn,cmdOut,listBox2){
		this.listBox1=dojo.byId(listBox1);
		this.cmdIn=dojo.byId(cmdIn);
		this.cmdOut=dojo.byId(cmdOut);
		this.listBox2=dojo.byId(listBox2);
		dojo.connect(this.listBox1,"ondblclick",this,"moveIn");
		dojo.connect(this.cmdIn,"onclick",this,"moveIn");
		dojo.connect(this.cmdOut,"onclick",this,"moveOut");
		dojo.connect(this.listBox2,"ondblclick",this,"moveOut");
	},
	/**
	 * 添加(左列表记录添加到右列表)
	 */
	moveIn:function(){
		for(var i=0;i<this.listBox1.options.length;++i){
			if(this.listBox1.options[i].selected){
				var option=document.createElement("option");
				option.value=this.listBox1.options[i].value;
				option.text=this.listBox1.options[i].text;
				this.listBox2.options.add(option);
				this.listBox1.options.remove(i);
				break;
			}
		}
	},
	/**
	 * 移出(右列表记录移出到左列表)
	 */
	moveOut:function(){
		for(var i=0;i<this.listBox2.options.length;++i){
			if(this.listBox2.options[i].selected){
				var option=document.createElement("option");
				option.value=this.listBox2.options[i].value;
				option.text=this.listBox2.options[i].text;
				this.listBox1.options.add(option);
				this.listBox2.options.remove(i);
				break;
			}
		}
	},
	/**
	 * 获取列表记录(返回结果以逗号间隔串接,格式形如:a,b,c,d)
	 * @param listBoxId:列表id(int类型),1为左列表,2为右列表
	 */
	getListBoxValue:function(listBoxId/**int:1**/){
		var listBox;
		if(listBoxId==1){
			listBox = this.listBox1;
		}
		else{
			listBox = this.listBox2;
		}
		var numbers=[];
		for(var i=0;i<listBox.options.length;++i) numbers.push(listBox.options[i].text);
		return numbers.join(",");
	},
	/**
	 * 设置列表记录
	 * @param listBoxId:列表id(int类型),1为左列表,2为右列表
	 * @param listBoxValue:以逗号间隔串接,格式形如:a,b,c,d
	 */
	setListBoxValue:function(listBoxId/**int:1**/,listBoxValue/**String:a,b,c,d**/){
		var listBox;
		if(listBoxId==1){
			listBox = this.listBox1;
		}
		else{
			listBox = this.listBox2;
		}
		if(listBoxValue!=""&&listBoxValue!=null){
			/**
			 * 先删除原有的值
			 */
			for(var i=listBox.options.length-1;i>=0;--i){
				listBox.options.remove(i);
			}
			/**
			 * 然后填充新的值
			 */
			var listBoxValueArray=listBoxValue.split(",");
			for(var i=0;i<listBoxValueArray.length;++i){
				if(dojo.trim(listBoxValueArray[i])=="") continue;
				var option=document.createElement("option");
				option.text=listBoxValueArray[i];
				listBox.options.add(option);
			}
		}
	},
	/**
	 * 使能设置
	 */
	setEnabled:function(enabled){
		this.listBox1.disabled=!enabled;
		this.cmdIn.disabled=!enabled;
		this.cmdOut.disabled=!enabled;
		this.listBox2.disabled=!enabled;
	}
});

二、代码调用：

var faxNumListBox;
dojo.addOnLoad(function(){
faxNumListBox = new BaseSelectMoveBox("左列表id","添加按钮id","移出按钮id","右列表id");
faxNumListBox.setListBoxValue(1,"列表1的值");
faxNumListBox.setListBoxValue(2,"列表2的值");});

三、效果图：

四、简结：
随意写的一个左右列表相互操作控件，适合简单应用，目前只在IE6下运行过，Fiefox和IE7还未测试，有时间的话一定改进，更加美观和通用性更强。
使用前提：dojo库
改进设想：可在左列表中增加一个“快速筛选”的功能，方便左列表记录多时快速查询