javascript xml은 데이터 source_javascript 기술의 드롭다운 상자 컨트롤입니다.

예를 들어 입력란에 Zhang San, Changsha 또는 Hunan을 입력하면 선택할 수 있도록 Zhang San이 나타납니다. 18을 입력하면 Zhang San과 Li Si가 동시에 나타납니다. 테스트 데이터 소스는 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

s1
Zhang San
<후난
<시>창사

학생> ;
s2< ;/id>
lee思
<후베이 ;
;18

;/name>
쓰촨
청두
>

//---------------------------------- DropDownListx.js---------
function DropDownListx(parent,id)
{
this.id = id
var i;
var me = this;
var e = this.parent;
var x = e .offsetLeft;
this.text = e.value;
while(e = e.offsetParent)
{
y = e.offsetTop
x = e.offsetLeft; >this.parentInfo = {x:0,y:0};
this.parentInfo.x = x;
this.parentInfo.y = y
//Appearance
this .width = this.parent.offsetWidth;
this.height = 150;
this.disabled = false;
this.visibility = "hidden";//data 속성으로 표현하면 노드로도 표현할 수 있습니다
this.mainText = "";//표시할 필드 이름
this.mainValue = "";//필드 이름 반환할 값
this.selectedIndex = -1;//선택한 인덱스
this.mouseoverIndex = -1;//마우스를 올렸을 때의 인덱스
this.mouseoutIndex = -1;// 마우스가 나갈 때의 인덱스
this.selectedValue = "";
this.selectedText = "";
this.value = ""; .drawed = false; // 다시 그려졌습니까?
this.table = null
//데이터 소스
this.dataSource =
try
{
(i = 6;i>0; i--)
{
시도
{
this.dataSource = new ActiveXObject("MSXML2.DOMDocument." i ".0"); >break;
}
catch(ex1){;};
}
}
catch(ex2){;}; >this.dataSource.setProperty(" SelectionLanguage ", "XPath");
var sh = function(){if(me.visibility == "hidden")me.show();}
this. parent.attachEvent("onfocus", function (){window.setTimeout(sh,100);})
this.parent.attachEvent("onchange",function(){me.filter(me.parent.value );});
this .parent.attachEvent("onkeyup",function(){me.filter(me.parent.value);})
this.parent.attachEvent("onclick",function (){if(event.button = "1")window.setTimeout(sh,10);})
this.parent.style.cursor = "hand"
//이벤트
this.onSelected=null;
this.onmouseover = null;
this.onhide = null;
window.document.attachEvent("onclick",function()
{
//예 e가 맨 위에 있지 않을 수도 있으므로 해당 영역을 찾으세요
if(event.x < me.parentInfo.x ||
event.x > me.parentInfo. x me.parent.offsetWidth || event.y < me.parentInfo.y ||
event.y > me.parentInfo.y me.parent.offsetHeight)
{
(me.visibility == "visible " )
me.hide();
}
})
}
//부모 위치가 바뀔 수 있으므로 위치를 다시 획득하세요
DropDownListx.prototype.getPosition=function ( )
{
var e = this.parent;
var y = e.offsetTop;
var x = e.offsetLeft; e.offsetParent)
{
y = e.offsetTop;
x = e.offsetLeft
}
this.parentInfo = {x:0,y:0}; this.parentInfo.x = x;
this.parentInfo.y = y;
this.width = this.parent.offsetWidth;
}//목록 그리기
.show=function()
{
this.getPosition();
var me = this
//div 그리기
var divid = this.id "_div_" this.parent .id;
var d = document.getElementById(divid);
if(d==null)
{
d = document.createElement("div")
d.style .position = "절대";
}
d.style.borderLeft = "검은색 1px 홈";
d.style.borderTop = "검은색 1px 홈"
d.style.borderRight = "검은색 1px 홈";
document.body.appendChild(d);
d.setAttribute("id",divid)
d.style.borderBottom = "검은색 1px 홈"; d.style.BackgroundColor = " 흰색 ";
d.style.left = this.parentInfo.x "px"
if(document.body.clientHeight < this.parentInfo.y this.parent.offsetHeight this.height)
d .style.top = (this.parentInfo.y - this.height) "px";
else
d.style.top = (this.parentInfo.y. parent.offsetHeight=="" ? 20:this.parent.offsetHeight)) "px";
d.style.overflowX = "숨김";
d.style.overflowY = "자동"; d.style.zIndex = 999;
d.style.visibility = "visible";
d.style.borderWidth = "1px";
this.visibility = "visible"; listData();
this ._selectByName(this.parent.value);
}
DropDownListx.prototype.listData()
{
var e = this.parent; >var base = this
//데이터 표시
if(this.nodeList == null)
this.nodeList = this.dataSource.documentElement.childNodes
var str="";
for(var i = 0;i{
var text = (base.attributed?this.nodeList.item(i).getAttribute(this.mainText):this.nodeList.item(i).selectSingleNode(this. mainText).text);
str = str "" 텍스트 ""
}
str = "";
var div = document.getElementById( this.id "_div_" e.id);
div.innerHTML = str;
var table = document.getElementById( this.id "_table_" e.id);
this.table = 테이블;
if(table.offsetHeight < this.height)
div.style.height = table.offsetHeight 3;
else
div.style.height = this.height 3;
div.style.width = table.offsetWidth;
for(var j = 0;j{
var d = document.getElementById(this.id "_td_" j "_" e.id );
d.attachEvent('onclick',function()
{
var _td = document.getElementById(base.id "_td_" base.selectedIndex "_" e.id);
if( _td)
{
_td.style.groundColor = "";
_td.style.color = "";
}
base.selectedIndex = event.srcElement.parentElement.rowIndex; 🎜>document.getElementById(base.id "_div_" base.parent.id ).style.visibility="hidden";
base.selectedValue = (base.attributed?base.nodeList.item(base.selectedIndex). getAttribute(base.mainValue):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainValue).text)
base.selectedText = (base.attributed?base.nodeList.item(base.selectedIndex) .getAttribute(base.mainText):base.nodeList.item(base.selectedIndex).selectSingleNode(base.mainText).text)
base.value = base.selectedValue;base.text = base.selectedText; >if(base.onSelected != null)
base.onSelected.apply(base)
return false
});
d.onmouseover=function()
{
base.mouseoverIndex =parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
시도해 보세요
{
event.srcElement.style.BackgroundColor='gray';
event.srcElement.style.color='흰색';
e.value = event.srcElement.innerText;
if(base.onmouseover != null)
base.onmouseover.apply(base);
}
catch(ex){};
};
d.onmouseout = function()
{
base.mouseoutIndex =parseInt(event.srcElement.id.split("_td_")[1].split("_")[0]);
if(event.srcElement.id == base.id "_td_" base.selectedIndex "_" e.id)
{
event.srcElement.style.BackgroundColor='red';
event.srcElement.style.color='파란색';
}
else
{
event.srcElement.style.BackgroundColor='';
event.srcElement.style.color='';
}
if(base.onmouseout != null)
base.onmouseout.apply(base);
}
}
this.drawed = true;
}
DropDownListx.prototype.hide=function()
{
var d = document.getElementById(this.id "_div_" this.parent.id);
if(d)
d.style.visibility = "숨김";
this.visibility = "숨김";
this._select(this.selectedIndex);//为了防止有筛选的数据，要先选择
this.nodeList = this.dataSource.documentElement.childNodes;
if(this.onhide != null)
this.onhide.apply(this);
}
DropDownListx.prototype.setSource=function(d)
{
this.dataSource.loadXML(d.xml);
this.nodeList = d.documentElement.childNodes;
this.drawed = false;
}
DropDownListx.prototype.setChildNodes=function(nodes)
{
this.dataSource.loadXML(" <옵션>");
var 노드 = this.dataSource.documentElement;
for(var i = 0;i{
var opt = doc.createNode(1,"option","");
var r = node.item(i).childNodes
for(var j = 0;j{
var att = doc.createNode(1,r. item(j).nodeName,"");
att.text = r.item(j).text;
opt.appendChild(att);
}
node.appendChild(opt);
}
this.drawed = false;
}
DropDownListx.prototype.filter=function(text)
{
if(text==null || text =="")
{
this.reset() ;
}
else
{
var _text = text.split(" ");
var str = "./*[contains(.,'" _text[0] "')";
for(var i=1;i<_text.length;i )
{
str = str " and Contains(.,'" _text[i] "')"
}
str = str "]";
this.nodeList = this.dataSource.documentElement.selectNodes(str);
}
this.listData();
}
//根据查询选中的节点的子节点적值
DropDownListx.prototype.getNodeValue=function(nodeName)
{
if(nodeName == null || nodeName == "")
return this.value;
return (this.attributed?this.nodeList.item(this.selectedIndex).getAttribute(nodeName):this.nodeList.item(this.selectedIndex).selectSingleNode(nodeName).text);
}
DropDownListx.prototype.reset=function()
{
this.nodeList = this.dataSource.documentElement.childNodes;
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.BackgroundColor = "";
_td.style.color = "";
}
this.selectedIndex = -1;
this.selectedValue = "";
this.selectedText = "";
this.value = "";
this.text = "";
this.parent.value = "";
}
DropDownListx.prototype.select=function(index)
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.BackgroundColor = "";
_td.style.color = "";
}
this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被選中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index ).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
시도해 보세요
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.BackgroundColor = "빨간색";
this.table.rows.item(index).cells.item(0).style.color = "파란색";
this.parent.focus();
}catch(ex){}
if(this.onSelected != null)
this.onSelected.apply(this);
}
}
DropDownListx.prototype.selectByName=function(name)
{
if(name == null || name == "")
{
이것 .다시 놓기();
반환;
}
for(var i = 0;i{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this .mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == 이름) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype.selectByValue=function(value)//不響應事件的副本
{
if(value == null || value == "")
{
this.reset();
반환;
}
for(var i = 0;i{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this .mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this.select(i);
}
else
this.reset();
}
DropDownListx.prototype._select=function(index)//不響應事件的副本
{
if(index == -1)
this.reset();
else
{
var _td = document.getElementById(this.id "_td_" this.selectedIndex "_" this.parent.id);
if(_td)
{
_td.style.BackgroundColor = "";
_td.style.color = "";
}
//this.nodeList = this.dataSource.documentElement.childNodes;
this.selectedIndex = index;//被選中的索引
this.selectedValue = this.attributed?this.nodeList.item(index).getAttribute(this.mainValue):this.nodeList.item(index ).selectSingleNode(this.mainValue).text;
this.selectedText = this.attributed?this.nodeList.item(index).getAttribute(this.mainText):this.nodeList.item(index).selectSingleNode(this.mainText).text;
this.value = this.selectedValue;
this.text = this.selectedText;
this.parent.value = this.selectedText;
시도해 보세요
{
this.table.rows.item(index).cells.item(0).focus();
this.table.rows.item(index).cells.item(0).style.BackgroundColor = "빨간색";
this.table.rows.item(index).cells.item(0).style.color = "파란색";
this.parent.focus();
}catch(ex){}
}
}
DropDownListx.prototype._selectByName=function(name)//不響應事件的副本
{
if(name == null || 이름 == "")
{
this.reset();
반환;
}
for(var i = 0;i{
var _name = this.attributed?this.nodeList.item(i).getAttribute(this .mainText):this.nodeList.item(i).selectSingleNode(this.mainText).text;
if(_name == 이름) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
DropDownListx.prototype._selectByValue=function(value)//不響應事件的副本
{
if(value == null || value == "")
{
this.reset();
반환;
}
for(var i = 0;i{
var _value = this.attributed?this.nodeList.item(i).getAttribute(this .mainValue):this.nodeList.item(i).selectSingleNode(this.mainValue).text;
if(_value == value) break;
}
if(i != this.nodeList.length)
{
this._select(i);
}
else
this.reset();
}
//---------------------------- ----DropDownListx-vsdoc.js------------
/// <참조 이름="MicrosoftAjax.js"/ >
함수 DropDownListx(parent, id)
{
///

/// 맞춤형 다운로드
///

///
///
/// 下柆框的父控件，只能是文本输入框元素;
///
///
///
/// 下拉框的ID文本
///
}
DropDownListx.prototype =
{
getPosition: function()
{
///

/// 드롭다운 상자의 위치를 ​​다시 가져옵니다. 상위 위치로 인해 변경될 수 있음
///

},
show: function()
{
///

/// 드롭다운 상자 표시
///

},
listData: function()
{
///

// 드롭다운 상자 그리기
///

},
hide: function()
{
///

/ 드롭다운 상자 숨기기
///

},
setSource: function(d)
{
///

/ 드롭다운 상자 xml 데이터 소스 설정
// /

/// 지정할 드롭다운 상자의 데이터 소스
/// < /param>
},
setChildNodes: function(nodes)
{
///

/// 드롭다운 상자 xml 데이터 소스 설정
/// < ;/summary>
/// /// 지정할 드롭다운 상자의 xml 노드 집합
/// },
filter: function(text)
{
// /

/// 드롭다운 상자 전역 필터링
/// ///
/// 찾을 텍스트
///
},
getNodeValue: function(nodeName)
{
///

/// 선택한 노드에 해당하는 하위 노드의 값을 반환합니다.
///

///
/// 하위 노드 이름
///
},
reset: function()
{
///

/// 드롭다운 상자 재설정
///

},
select: function( index)
{
///

/// 인덱스로 선택
///

///
/// 인덱스 값
/ //
},
selectByName:function(name)
{
// /

/// 텍스트로 선택
///

///
/// 선택할 텍스트, 이 값은 mainText에 해당하는 노드와 비교됩니다. 속성
///
},
selectByValue:function(value)
{
///

/// 값으로 선택 🎜>///

///
/// 선택할 값, 이 값은 mainValue 속성에 해당하는 노드
///
},
_select:function(index )
{
///

/ 인덱스별로 선택하면 선택 메서드가 이벤트 복사본에 응답하지 않습니다.
///

/// 🎜>/// 인덱스 값
///
},
_selectByName:function(name)
{
///

// 텍스트로 선택하면 selectByName 메서드가 이벤트 복사본에 응답하지 않습니다.
///

///
/// 선택할 텍스트, 이 값은 mainText 속성에 해당하는 노드와 비교됩니다.
///
},
_selectByValue:function(value)
{
///

/// 값으로 선택하면 selectByValue 메소드가 이벤트 사본에 응답하지 않습니다.
/// < ;/summary> ///
/// 선택할 값, 이 값은 mainValue 속성에 해당하는 노드와 비교됩니다.
/// < ;/param>
}
}