> 웹 프론트엔드 > JS 튜토리얼 > JXTree 객체, 외부 xml 파일 데이터 읽기, tree_javascript 기술 생성 기능

JXTree 객체, 외부 xml 파일 데이터 읽기, tree_javascript 기술 생성 기능

WBOY
풀어 주다: 2016-05-16 19:15:55
원래의
1569명이 탐색했습니다.

/******************************************
*JXTree 객체, 외부 XML 읽기 파일 데이터, 스패닝 트리
*@author brull
*@email brull@163.com
*@date 2007-03-27
************ *** **************************/

/*
 *@param xmlURL XML文件的地址
 */
var JXTree = function(xmlURL)
{
    var 결과 = new Array();

    /*****************************
*먼저 TreeNode 추상 개체를 정의합니다.
*TreeNode 개체 속성:
*id 고유 번호, xml 파일에 노드 속성으로 정의되어야 함
*level 노드 레벨, -1부터 시작(예: 루트 노드)
*_click 노드 클릭, xml 파일에 노드 속성으로 정의 [선택 사항 ]
*isLast 이 노드가 위치한 레벨의 마지막 노드인지 여부
*parent_isLast 상위 노드가 상위 노드가 위치한 레벨의 마지막 노드인지 여부
*toHTML 변환 방법 이 노드를 HTML 코드로 변환
****** *************************/
    var TreeNode = 함수(노드, 수준)
    {
        var parent_elements = node.parentNode ? (node.parentNode.parentNode ? node.parentNode.parentNode.childNodes : null) : null;
        var 요소 = node.parentNode ? node.parentNode.childNodes : null;
        this.id = XMLDom.getAttribute(node,"id") ? XMLDom.getAttribute(node,"id") : "";
        this.level = level;//节点的层次
        this.isLast = 요소 ? ((elements.item(elements.length-2) === 노드) ? true : false) : false;
        this._click = XMLDom.getAttribute(node,'click') ? XMLDom.getAttribute(node,'click') : "";
        this.toHTML = null;//function
    }

    /*****************************
*ElementNode 객체, 추상 객체 TreeNode
에서 상속됨 ​​*새 속성:
* _nodeName 노드 이름
*****************************/
    var ElementNode = function(node,level)
    {
        TreeNode .apply(this,arguments);
        this._nodeName = XMLDom.getAttribute(node,"name") ? XMLDom.getAttribute(node,"name") : "";
        this.toHTML = function(){
            var 결과 = "";
            if(this.isLast) 결과  = "

            else 결과  = "
            결과  = " id='" this.id "_join' onclick="JXTree.changeState('" this.id "')">
" this._nodeName "
";
            return 결과;
        }
    }

    /*****************************
*TexNode 객체, 추상 객체 TreeNode에서 상속됨 ​​
*속성은 TreeNode와 동일함
*새 속성:
*_nodeValue 노드 값
***********************************/
    var TextNode = function(node,level)
    {    트리노드 .apply(this,arguments);
        this._nodeValue = node.firstChild.nodeValue;
        this.toHTML = function(){
           var result =
          if(this.isL ast) 결과  = "
";
          else 결과  = "
";
           결과  = "
" _nodeValue "";
           결과 반환;
        }

    /**********노드 노드 구성이 완료되고 XML 파일이 해석되기 시작합니다*******************/

    var XMLDom .loadXML (xmlURL).documentElement;//同步加载XML文件
    var level = -1;//root节点level
    var stack = new Array(1)
    result.push("

" XMLDom.getAttribute(DOMRoot,"이름") "
");
//xml 파일의 내용을 트리 상태로 확장하는 HTML 코드를 설명하고, 재귀적으로 호출합니다.
this.parseXML = function(node){
stack.push(level);
level;
var element = new ElementNode(node,level);
var elements = node.childNodes;
if(level != 0){
if(element.isLast)
result.push( "
");
else
result.push("
")
}
for(var i=0;i If (Elements.item (i). NodeName == "item") {// 노드는 나뭇잎
var textNode = new textNode (elements.item (i), level); Result.push (textNode .toHTML());
textNode = null;//시간 내에 객체 해제
        var elementNode = new ElementNode(elements.item(i),level)
result.push (elementNode.toHTML());
elementNode = null;//시간에 맞춰 객체 해제 This.parseXML(elements.item(i));
                                                                                                      ");
level = stack.pop();
}

//해석 결과를 얻어서 return
this.getTree = function(){
this.parseXML( DOMRoot ); //현재 텍스트의 ID

/***************정적 속성*****************/
JXTree.changeState = function (id){//노드 내용 확장 또는 축소
var _body = document.getElementById(id "_body");
var _join = document.getElementById(id "_join");
var 폴더 = document.getElementById(id "_folder") (_body.style .display == "none ") ? (
_body.style.display = "block",
_join.className = _join.className.replace("plus","minus"),
폴더. className = "folder_open" )
};//changeState
JXTree.setFocus = function(id){
if(JXTree.curText)
포함 (document.getElementById(JXTree.curText).style){
backgroundColor = "";
color = "#000";
}
with(document.getElementById(id).style )
backgroundColor = "#003366";
color = "#FFF";
                                                                                              
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿