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) { // IEel.attachEvent("on" + evname, func);} else if (el.addEventListener) { // Gecko / W3Cel.addEventListener(evname, func, true);} else { // Opera (or old browsers)el["on" + evname] = func;}};MultiSelector.removeEvent=function(el, evname, func) {if (el.detachEvent) { // IEel.detachEvent("on" + evname, func);} else if (el.removeEventListener) { // Gecko / W3Cel.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);};};