JSP自定义标签（三） 多选控件（2）
三、JS代码：multiSelector.js
// author: HHB
function showMulti(parentId, name, id, value) {
var multi = new MultiSelector();
multi.create(parentId, name, 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 = null;
this.selectedItemR = null;
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_";
//根据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);
MultiSelector.removeEvent(_this.selectBtn,'click',MultiSelector.itemOnSelect);
MultiSelector.addEvent(_this.selectBtn,'click',function() {
MultiSelector.itemOnSelect(_this);
});
MultiSelector.removeEvent(_this.cancelBtn,'click',MultiSelector.itemOnSelect);
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.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';
MultiSelector.addEvent(selectBtn, "click", function() {
MultiSelector.itemOnSelect(_this);
});
this.selectBtn=selectBtn;
btnDiv.appendChild(selectBtn);
// 取消按钮
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";
MultiSelector.addEvent(cancelBtn, "click", function() {
MultiSelector.itemOnCancel(_this);
});
this.cancelBtn=cancelBtn;
btnDiv.appendChild(cancelBtn);
// 保存值
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.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.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.forSelec.removeChild(this.selectedItemL);
this.selected.appendChild(this.selectedItemL);
this.selectedItemR = this.selectedItemL;
this.selectedItemL = null;
this.selectedItemR.click();
}
} else {
if (this.selectedItemR) {
this.selected.removeChild(this.selectedItemR);
this.forSelec.appendChild(this.selectedItemR);
this.selectedItemL = this.selectedItemR;
this.selectedItemR = null;
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";
}
srcObj.style.backgroundColor = "#E0EEE0";
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);
};
};
四、tld定义
<!-- 多选标签 --> <tag> <name>multiselec</name> <tag-class>base.tags.MultiSelectorTag</tag-class> <body-content>empty</body-content> <small-icon></small-icon> <large-icon></large-icon> <description></description> <attribute> <name>id</name> <required>true</required> </attribute> <attribute> <name>name</name> <required>true</required> </attribute> <attribute> <name>value</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <example></example> </tag>
五、测试标签
<%
String multiStr="[{text:'zs1',value:'1'},{text:'zs2',value:'1'},{text:'zs3',value:'1',selected:'true'},{text:'zs4',value:'1',selected:'true'}]";
%>
<c:multiselec name="multiTest" id="multiTest" value="<%=multiStr %>"/>或者：
var multiS=new MultiSelector();
multiS.multiSelector("multiTest");
multiS.load(data,"serviceName","serviceId");