JSP 사용자 정의 탭(3) 다중 선택 컨트롤(2)
// 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);
};
};
4.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>5. 테스트 라벨
<%
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");이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JSP| EL (Experession Language)텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
