|
|
*JXTree對象，讀取外部xml文件數據，生成樹
*@author brull
*@email brull@163.com
*@date 2007-03-27
*******************************************/
/*
*@param xmlURL XML文件的地址
*/
var JXTree = function(xmlURL)
{
var result = new Array();
/*****************************
*首先定義TreeNode抽象對象
*TreeNode對象屬性：
*id 唯一編號,必須在xml文件里定義為節點屬性
*level 節點層次，從-1開始（即根節點）
*_click 節點click，在xml文件定義為節點屬性[可選]
*isLast 是否為本節點所在層次最后一個節點
*parent_isLast 父節點是否為父節點所在層次的最后一個節點
*toHTML 本節點轉成HTML代碼的方法
*******************************/
var TreeNode = function (node,level)
{
var parent_elements = node.parentNode ? (node.parentNode.parentNode ? node.parentNode.parentNode.childNodes : null) : null;
var elements = node.parentNode ? node.parentNode.childNodes : null;
this.id = XMLDom.getAttribute(node,"id") ? XMLDom.getAttribute(node,"id") : "";
this.level = level;//節點的層次
this.isLast = elements ? ((elements.item(elements.length-2) === node) ? 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 result = "";
if(this.isLast) result += "<div><div class='minus_bottom'";
else result += "<div><div class='minus'";
result += " id='"+this.id+"_join' onclick=/"JXTree.changeState('"+this.id+"')/"></div><div id='"+this.id+"_folder' class='folder_open'></div><span class='text' onclick=/""+this._click+"/">"+this._nodeName+"</span></div>";
return result;
}
}
/*****************************
*TexNode對象，繼承自抽象對象TreeNode
*屬性和TreeNode一樣
*新增屬性：
*_nodeValue 節點值
******************************/
var TextNode = function(node,level)
{
TreeNode.apply(this,arguments);
this._nodeValue = node.firstChild.nodeValue;
this.toHTML = function(){
var result = "";
if(this.isLast) result += "<div><div class='join_bottom'></div>";
else result += "<div><div class='join'></div>";
result += "<div class='page'></div><span class='text' id='"+this.id +"_item' onclick=/"JXTree.setFocus(this.id);"+this._click+"/">"+this._nodeValue+"</span></div>";
return result;
}
}
/**********Node 節點構建結束，開始解釋XML文件************/
var DOMRoot=XMLDom.loadXML(xmlURL).documentElement;//同步加載XML文件
var level = -1;//root節點level
var stack = new Array(1);
result.push("<div><div class='root'></div><span class='text'>"+XMLDom.getAttribute(DOMRoot,"name")+"</span></div>");
//解釋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("<div id='"+element.id+"_body' class='body_empty'>");
else
result.push("<div id='"+element.id+"_body' class='body_line'>");
}
for(var i=0;i<elements.length;i++){
if(elements.item(i).nodeName == "item"){//節點為樹葉
var textNode = new TextNode(elements.item(i),level);
result.push(textNode.toHTML());
textNode = null;//及時釋放對象
}
else if(elements.item(i).nodeType ==1){//節點為樹枝
var elementNode = new ElementNode(elements.item(i),level);
result.push(elementNode.toHTML());
elementNode = null;//及時釋放對象
this.parseXML(elements.item(i));
}
}
if(level != 0)result.push("</div>");
level = stack.pop();
}
//得到解釋結果并返回
this.getTree = function(){
this.parseXML(DOMRoot);
DOMRoot = null;//釋放DOM對象
return result.join("");
}
/*************靜態屬性***************/
JXTree.curText = null;//當前文本的id
/************靜態方法***************/
JXTree.changeState = function (id){//展開或者收縮節點內容
var _body = document.getElementById(id + "_body");
var _join = document.getElementById(id+"_join");
var folder = document.getElementById(id+"_folder");
(_body.style.display == "none") ? (
_body.style.display = "block",
_join.className = _join.className.replace("plus","minus"),
folder.className = "folder_open"
) : (
_body.style.display = "none",
_join.className = _join.className.replace("minus","plus"),
folder.className = "folder_close"
)
};//changeState
JXTree.setFocus = function(id){
if(JXTree.curText)
with(document.getElementById(JXTree.curText).style){
backgroundColor = "";
color = "#000";
}
with( document.getElementById(id).style){
backgroundColor = "#003366";
color = "#FFF";
}
JXTree.curText = id;
}
}
JavaScript技術：JXTree對象，讀取外部xml文件數據，生成樹的函數，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
