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

// 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);
};
};