JSP自定义标签（三） 多选控件（3）

JSP自定义标签(三)多选控件 前两篇博文中实现的控件不能实现多选，为了补充该功能对JS进行了调整:

修改后的效果如下图：

multiselector.js:

// author: HHB  	
function showMulti(parentId, name, id, value) {
	var multi = new MultiSelector();
	multi.create(parentId, name, id);
	multi.multiSelector(id);
	var str = "[{text:'zs1',value:'1'},{text:'zs2',value:'1'},{text:'zs3',value:'1',selected:'true'},{text:'zs4',value:'1',selected:'true'}]";
	var obj = eval("(" + (value?value:'-1') + ")");
	multi.initItem(obj);
	// alert(multi);
}

MultiSelector = function() {
	this.forSelec = null;
	this.selected = null;
	this.selectedItemL = new Array();
	this.selectedItemR = new Array();
	this.valueObj = null;
	this.selectBtn=null;
	this.cancelBtn=null;
	var forSele_="forSele_";
	var selected_="selected_";
	var valueObj_="valueObj_";
	var selectBtn_="selectBtn_";
	var cancelBtn_="cancelBtn_";
	var parent_="multiParent_";
	var _this=this;
	//根据ID获取多选控件对象
	MultiSelector.prototype.multiSelector=function(id){
		var _this=this;
		this.forSelec=document.getElementById(forSele_+id);
		this.selected=document.getElementById(selected_+id);
		this.valueObj=document.getElementById(id);
		this.selectBtn=document.getElementById(selectBtn_+id);
		this.cancelBtn=document.getElementById(cancelBtn_+id);
		this.selectedItemL = new Array();
		this.selectedItemR = new Array();
		var nodes = this.forSelec.childNodes;
		var node=null;
		for (index = 0; index < nodes.length; index++) {
			node=nodes[index];
			if(node&&node.getAttribute("checked")=="true")
			{
				this.selectedItemL.push(node);
			}
		}
		nodes=this.selected.childNodes;
		for (index = 0; index < nodes.length; index++) {
			node=nodes[index];
			if(node&&node.getAttribute("checked")=="true")
			{
				this.selectedItemR.push(node);
			}
		}
		MultiSelector.removeEvent(_this.selectBtn,'click',function() {
			MultiSelector.itemOnSelect(_this);
		});
		MultiSelector.addEvent(_this.selectBtn,'click',function() {
			MultiSelector.itemOnSelect(_this);
		});
		MultiSelector.removeEvent(_this.cancelBtn,'click',function() {
			MultiSelector.itemOnCancel(_this);
		});
		MultiSelector.addEvent(_this.cancelBtn,'click',function() {
			MultiSelector.itemOnCancel(_this);
		});
		//MultiSelector.clearChildren(document.getElementById(parent_+id));
		//this.create()
	};
	
	//加载本地数据
	MultiSelector.prototype.load=function(data,textField,valueField){
		if(this.forSelec&&this.selected)
		{
			this.clear();
			this.initItem(data,textField,valueField);
		}
	};
	
	MultiSelector.addEvent = function(el, evname, func) {
		if (el.attachEvent) { // IE
			el.attachEvent("on" + evname, func);
		} else if (el.addEventListener) { // Gecko / W3C
			el.addEventListener(evname, func, true);
		} else { // Opera (or old browsers)
			el["on" + evname] = func;
		}
	};
	MultiSelector.removeEvent=function(el, evname, func) {
		if (el.detachEvent) { // IE
			el.detachEvent("on" + evname, func);
		} else if (el.removeEventListener) { // Gecko / W3C
			el.removeEventListener(evname, func, true);
		} else { // Opera (or old browsers)
			el["on" + evname] = null;
		}
	};
	MultiSelector.clearChildren=function(parent)
	{
		while (parent.firstChild) {
		      var oldNode = parent.removeChild(parent.firstChild);
		      oldNode = null;
			}
	};
	//清空多选控件的选择列表
	MultiSelector.prototype.clear=function()
	{
		var children=null;
		if(this.forSelec)
		{
			MultiSelector.clearChildren(this.forSelec);
		}
		if(this.selected)
		{
			MultiSelector.clearChildren(this.selected);
		}
	};
	//初始化创建元素
	MultiSelector.createElement = function(type, parent) {
		var el = null;
		if (document.createElementNS) {
			el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
		} else {
			el = document.createElement(type);
		}
		if (typeof parent != "undefined") {
			parent.appendChild(el);
		}
		return el;
	};
	
	//初始创建控件元素
	MultiSelector.prototype.create = function(par, name, id) {
		var _this=this;
		var parent = document.getElementById(par);
		var tempTable = MultiSelector.createElement("table");
		parent.appendChild(tempTable);
		var tbody = MultiSelector.createElement("tbody");
		tempTable.appendChild(tbody);
		var tmpTr = MultiSelector.createElement("tr");
		tmpTr.style.verticalAlign = 'middle';
		tbody.appendChild(tmpTr);

		// 供选择列表
		var forSeletd = MultiSelector.createElement("td");
		forSeletd.style.width = '150px';
		forSeletd.style.height = '200px';
		var forSeleDiv = MultiSelector.createElement("div");
		forSeleDiv.id=forSele_+id;
		forSeleDiv.style.width = '150px';
		forSeleDiv.style.height = '200px';
		forSeleDiv.style.border = '2px solid #C9D7F1';
		forSeleDiv.style.overflow= 'auto';
		forSeleDiv.setAttribute("stype", "L");
		this.forSelec = forSeleDiv;
		forSeletd.appendChild(forSeleDiv);
		tmpTr.appendChild(forSeletd);

		// 按钮列表
		var btntd = MultiSelector.createElement("td");
		btntd.style.width = '80px';
		btntd.style.height = '200px';
		var btnDiv = MultiSelector.createElement("div");
		btnDiv.style.width = '80px';
		btnDiv.style.height = '100px';
		// btnDiv.style.border='2px solid #C9D7F1';
		btnDiv.style.floatStyle = 'left';
		btntd.appendChild(btnDiv);
		tmpTr.appendChild(btntd);

		// 选择按钮
		var selectBtn = MultiSelector.createElement("div");
		selectBtn.id=selectBtn_+id;
		selectBtn.style.cursor = 'pointer';
		selectBtn.style.width = '70px';
		selectBtn.style.height = '20px';
		selectBtn.style.border = "#7b9ebd 1px solid";
		selectBtn.style.backgroundColor = "#EBE9ED";
		selectBtn.style.fontFamily = "Verdana,Arial,Helvetica,sans-serif";
		selectBtn.innerHTML = "选择 >>";
		selectBtn.style.marginLeft = 'auto';
		selectBtn.style.marginRight = 'auto';
		btnDiv.appendChild(selectBtn);
		this.selectBtn=selectBtn;
		/*
		MultiSelector.removeEvent(this.selectBtn,'click',MultiSelector.itemOnSelect);
		MultiSelector.addEvent(this.selectBtn, "click", function() {
			MultiSelector.itemOnSelect();
		});
		*/
		// 取消按钮
		var cancelBtn = MultiSelector.createElement("div");
		cancelBtn.id=cancelBtn_+id;
		cancelBtn.style.cursor = 'pointer';
		cancelBtn.style.width = '70px';
		cancelBtn.style.height = '20px';
		// cancelBtn.style.border="1px #000000 solid";
		cancelBtn.style.border = "#7b9ebd 1px solid";
		cancelBtn.style.backgroundColor = "#EBE9ED";
		cancelBtn.style.fontFamily = "Verdana,Arial,Helvetica,sans-serif";
		cancelBtn.innerHTML = "<< 取消 ";
		cancelBtn.style.marginLeft = 'auto';
		cancelBtn.style.marginRight = 'auto';
		cancelBtn.style.marginTop = '30px';
		cancelBtn.style.color = "#000000";
		btnDiv.appendChild(cancelBtn);
		this.cancelBtn=cancelBtn;
		/*
		MultiSelector.removeEvent(cancelBtn,'click',MultiSelector.itemOnCancel);
		MultiSelector.addEvent(cancelBtn, "click", function(event) {
			alert(_this.selectedItemR.length);
			MultiSelector.itemOnCancel(_this);
		});
		*/
		// 保存值
		var valueHid = MultiSelector.createElement("input");
		//valueHid.id=valueObj_+id;
		valueHid.type = "hidden";
		valueHid.name = name;
		valueHid.id = id;
		this.valueObj = valueHid;
		btnDiv.appendChild(valueHid);

		// 已选择项列表
		var selectedtd = MultiSelector.createElement("td");
		selectedtd.style.width = '150px';
		selectedtd.style.height = '200px';
		var selectedDiv = MultiSelector.createElement("div");
		selectedDiv.id=selected_+id;
		selectedDiv.style.width = '150px';
		selectedDiv.style.height = '200px';
		selectedDiv.style.border = '2px solid #C9D7F1';
		selectedDiv.style.floatStyle = 'left';
		selectedDiv.style.overflow= 'auto';
		selectedDiv.setAttribute("stype", "R");
		this.selected = selectedDiv;
		selectedtd.appendChild(selectedDiv);
		tmpTr.appendChild(selectedtd);
	};
	MultiSelector.prototype.initItem = function(jsonValue,textField,valueField) {
		//alert(jsonValue[0].text);
		//var objs = eval("(" + jsonValue + ")");
		var objs=jsonValue;
		var objTmp = null;
		for (objIndex = 0; objIndex < objs.length; objIndex++) {
			objTmp = objs[objIndex];
			this.createItem(objTmp,textField,valueField);
		}
		this.valueObj.value = this.getValue();
	};
	MultiSelector.prototype.createItem = function(valueObj,textField,valueField) {
		if (!valueObj) {
			return;
		}
		var itemDiv = null;
		itemDiv = MultiSelector.createElement("div");
		if(valueField)
		{
			itemDiv.setAttribute('key', valueObj[valueField]);
		}else{
			itemDiv.setAttribute('key', valueObj.value);
		}
		itemDiv.setAttribute('checked', "false");
		itemDiv.style.width = '100%';
		itemDiv.style.cursor = 'pointer';
		if(textField)
		{
			itemDiv.innerHTML = valueObj[textField];
		}
		else
		{
			itemDiv.innerHTML = valueObj.text;
		}
		itemDiv.onblur = MultiSelector.itemOnBlur;
		var _this = this;
		MultiSelector.addEvent(itemDiv, "click", function(event) {
			var srcObj = null;
			if (event && event.srcElement) {
				srcObj = event.srcElement;
			} else {
				srcObj = this;
			}
			MultiSelector.itemOnClick(srcObj, _this);
		});
		// MultiSelector.addEvent(itemDiv,"blur",MultiSelector.itemOnBlur);
		if (valueObj.selected == "true") {
			this.selected.appendChild(itemDiv);
		} else {
			this.forSelec.appendChild(itemDiv);
		}
	};
	MultiSelector.prototype.moveItem = function(direction) {
		if (direction && direction === true) {
			if (this.selectedItemL&&this.selectedItemL.length>0) {
				for(moveItem_index_L=0;moveItem_index_L<this.selectedItemL.length;moveItem_index_L++)
				{
					this.forSelec.removeChild(this.selectedItemL[moveItem_index_L]);
					this.selected.appendChild(this.selectedItemL[moveItem_index_L]);
					this.selectedItemR.push(this.selectedItemL[moveItem_index_L]);
				}
				this.selectedItemL.splice(0, this.selectedItemL.length);
				//this.forSelec.removeChild(this.selectedItemL);
				//this.selected.appendChild(this.selectedItemL);
				//this.selectedItemR = this.selectedItemL;
				//this.selectedItemL = null;
				//this.selectedItemR.click();
				for(moveItem_index_R=0;moveItem_index_R<this.selectedItemR.length;moveItem_index_R++)
				{
					//this.selectedItemR[moveItem_index_R].click();
				}
			}
		} else {
			if (this.selectedItemR&&this.selectedItemR.length>0) {
				
				for(moveItem_index_R=0;moveItem_index_R<this.selectedItemR.length;moveItem_index_R++)
				{
					this.selected.removeChild(this.selectedItemR[moveItem_index_R]);
					this.forSelec.appendChild(this.selectedItemR[moveItem_index_R]);
					this.selectedItemL.push(this.selectedItemR[moveItem_index_R]);
				}
				//this.selected.removeChild(this.selectedItemR);
				//this.forSelec.appendChild(this.selectedItemR);
				//this.selectedItemL = this.selectedItemR;
				//this.selectedItemR = null;
				this.selectedItemR.splice(0, this.selectedItemR.length);
				//this.selectedItemL.click();
			}
		}
		this.valueObj.value = this.getValue();
	};
	MultiSelector.prototype.getValue = function() {
		var valueStr = "";
		var valueObjs = this.selected.childNodes;
		var tmpItem = null;
		for (valueIndex = 0; valueIndex < valueObjs.length; valueIndex++) {
			tmpItem = valueObjs[valueIndex];
			valueStr = valueStr + tmpItem.getAttribute("key") + ",";
		}
		return valueStr;
	};
	MultiSelector.itemOnClick = function(srcObj, obj) {
		var nodes = srcObj.parentNode.childNodes;
		/*
		for (index = 0; index < nodes.length; index++) {
			nodes[index].style.backgroundColor = "#ffffff";
		}
		*/
		checkedStatus=srcObj.getAttribute("checked");
		if("true"==checkedStatus)
		{
			srcObj.setAttribute("checked","false");
			srcObj.style.backgroundColor = "#ffffff";
		}
		else
		{
			srcObj.setAttribute("checked","true");
			srcObj.style.backgroundColor = "#E0EEE0";
			
			if (srcObj.parentNode == obj.forSelec) {
				obj.selectedItemL.push(srcObj);
			}
			if (srcObj.parentNode == obj.selected) {
				obj.selectedItemR.push(srcObj);
			}
		}
		/*
		if (srcObj.parentNode == obj.forSelec) {
			obj.selectedItemL = srcObj;
		}
		if (srcObj.parentNode == obj.selected) {
			obj.selectedItemR = srcObj;
		}
		*/
	};
	MultiSelector.itemOnBlur = function() {
		this.style.backgroundColor = "#ffffff";
	};
	MultiSelector.itemOnSelect = function(obj) {
		obj.moveItem(true);
	};
	MultiSelector.itemOnCancel = function(obj) {
		obj.moveItem(false);
	};
};