javascript xml은 데이터 source_javascript 기술의 드롭다운 상자 컨트롤입니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:50 PM

javascriptxml데이터 소스

예를 들어 입력란에 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 event.x > me.parentInfo. x me.parent.offsetWidth || event.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  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 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>{ 
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------------ 
///  
함수 DropDownListx(parent, id) 
{ 
///  
/// 맞춤형 다운로드 
///  
///  
///  
/// 下柆框的父控件，只能是文本输入框元素; 
///  
///  
///  
/// 下拉框的ID文本 
///  
}
DropDownListx.prototype = 
{ 
getPosition: function() 
{ 
///  
/// 드롭다운 상자의 위치를 ​​다시 가져옵니다. 상위 위치로 인해 변경될 수 있음 
///  
}, 
show: function() 
{ 
///  /// 드롭다운 상자 표시 
///  
}, 
listData: function() 
{ 
///  // 드롭다운 상자 그리기
 ///  
}, 
hide: function() 
{ 
///  / 드롭다운 상자 숨기기
///  
}, 
setSource: function(d) 
{ 
///  / 드롭다운 상자 xml 데이터 소스 설정 
// /  
///  지정할 드롭다운 상자의 데이터 소스
///  
}, 
setChildNodes: function(nodes) 
{ 
///  
/// 드롭다운 상자 xml 데이터 소스 설정 
/// < ;/summary> 
///  /// 지정할 드롭다운 상자의 xml 노드 집합
/// > 
}, 
filter: function(text) 
{ 
// /  
/// 드롭다운 상자 전역 필터링
///  summary>///  
/// 찾을 텍스트
///  
}, 
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> 
} 
} 
" 텍스트 "

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

See all articles