JXTree 객체, 외부 xml 파일 데이터 읽기, tree_javascript 기술 생성 기능-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 19:15:55

원래의

1596명이 탐색했습니다.

/******************************************
*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";