?? tree.js
字號:
/***************************************************************************************
* XMLTree2.1
* 此代碼版權歸海洋工作室ocean所有,您可以非商業目的使用、復制、修改此代碼,但需要
* 保留本工作室的版權信息。如果您使用、修改此代碼為商業目的,請聯系本工作室取得使用許可。
* 此腳本的商業許可為RMB30,被許可方除不能分發和轉售之外,可以用于被許可方的任何項目和
* 產品當中。
* 如果您對本程序有什么建議,請email to:ocean@forever.net.cn。
*
* 海洋工作室
* http://www.oceanstudio.net
* ocean(ocean@forever.net.cn) 制作
*****************************************************************************************/
//XML樹類
function XMLTree(treeName,imgPath) {
this.id = treeName;
this.xmlDoc = null;
this.dblClick = false; // "true"為允許有雙擊事件,"false"為不允許有雙擊事件,默認為"false"
this.openAction = false; //展開節點時的行為,"true"為已展開的節點全部關閉,"false"為已展開的節點全部保持不變.
this.isOpened = false; //節點是否是展開的,false-沒有展開
this.isLoaded = false; //節點是否是已經加載的。(針對ref型節點)
this.isSelected = false; //節點是否被選中
this.ref = ""; //引用外部的xml路徑
this.autoRefresh = false; //是否總是重新加載外部xml(false-不重新加載)
this.text = ""; //節點的文字
this.title = ""; //節點的提示
this.textColor = "#000000"; //節點文字的顏色
this.overTextColor = "#cccccc"; //節點鼠標放上去時候文字的顏色
this.selectedTextColor = "white"; //節點被選中后的顏色
this.backgroundColor = ""; //節點的背景色
this.overBackgroundColor = ""; //節點鼠標放上去是的背景色
this.selectedBackgroundColor = "Darkblue"; //節點被選中時候的背景色
this.underLine = false; //節點文字是否有下劃線,false-沒有下劃線
this.overUnderLine = true; //節點鼠標放上去的時候文字是否有下劃線,false-沒有下劃線
this.selectedUnderLine = false; //節點選中的時候文字是否有下劃線
this.fontSize = "9pt"; //文字大小
this.paddingLeft = "18px";//左邊縮進
this.paddingTop = "2px"; //上邊縮進
this.spaceWidth = "2px"; //圖片和圖片以及文字與圖片之間間距
this.leafPaddingLeft = "18px"; //2.01:葉子左邊多余縮進
this.cursor = "hand"; //鼠標的默認形狀
if ( imgPath == null ) {
this.openFlag = "../../common/images/openflag.gif"; //節點打開時的第一個圖片(一般是-號)
this.closeFlag = "../../common/images/closeflag.gif"; //節點關閉時的第一個圖片(一般是+號)
this.openFolder = "../../common/images/openfolder.gif"; //節點打開時的第二個圖片(一般是一個文件夾的圖片)
this.closeFolder = "../../common/images/closedfolder.gif"; //節點關閉時的第二個圖片(一般是一個文件夾的圖片)
this.leafImage = "../../common/images/url.gif"; //葉子節點的圖片
}
else {
this.openFlag = imgPath + "/openflag.gif"; //節點打開時的第一個圖片(一般是-號)
this.closeFlag = imgPath + "/closeflag.gif"; //節點關閉時的第一個圖片(一般是+號)
this.openFolder = imgPath + "/openfolder.gif"; //節點打開時的第二個圖片(一般是一個文件夾的圖片)
this.closeFolder = imgPath + "/closedfolder.gif"; //節點關閉時的第二個圖片(一般是一個文件夾的圖片)
this.leafImage = imgPath + "/url.gif"; //葉子節點的圖片
}
this.href = ""; //節點的url鏈接
this.selectedNode = null; //被選中的節點
this.doc = null; //節點的文檔對象
this.menuNode = new Array(); //節點數組:此節點的子菜單中的每一個節點
this.parent = null; //節點的父親(為null的話表明這是一個樹根)
this.root = this; //節點的根(為null的話表明這是一個樹根)
this.currentNode = null; //當前正在使用的節點
}
//外部方法:異步xml讀取數據,數據來自一個xml文件
XMLTree.prototype.load = function (url,container) {
if (container != null)
this.doc = container;
this.xmlDoc = new ActiveXObject("Msxml.DOMDocument");
this.root.currentNode = this;
var f = new Function("event",this.root.id+".currentNode.parseTree()");
this.xmlDoc.onreadystatechange = f;
this.xmlDoc.load(url);
}
XMLTree.prototype.loadXMLStr = function(xmlStr, container) {
if (container != null)
this.doc = container;
this.xmlDoc = new ActiveXObject("Msxml.DOMDocument");
this.root.currentNode = this;
this.xmlDoc.loadXML(xmlStr);
this.root.currentNode.parseTree();
}
//展開一個節點的下一級子節點
XMLTree.prototype.open = function (nodeId) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this; //如果沒有找到相應的節點,則以自身節點
if (node.parent == null) return; //如果節點是根結點,則返回
var nodeType = node.getType();
if (nodeType != "leaf") { //葉子節點不去理會
if (nodeType == "node") { //如果是一個包含字節點的節點
node.doc.children[1].style.display = "block";
}
else { //如果是引用節點
if (node.isLoaded) { //如果節點已經加載,則直接展開
if (node.doc.children.length >= 2) {
node.doc.children[1].style.display = "block";
}
}
else {
node.load(node.ref); //加載子節點的樹
node.isLoaded = true;
}
}
//標識節點為打開狀態
node.isOpened = true;
node.doc.children[0].rows[0].cells[0].children[0].src = node.openFlag;
node.doc.children[0].rows[0].cells[1].children[0].src = node.openFolder;
}
}
//展開一個節點的下一級子節點
XMLTree.prototype.openXmlStr = function (nodeId, xmlStr) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this; //如果沒有找到相應的節點,則以自身節點
if (node.parent == null) return; //如果節點是根結點,則返回
var nodeType = node.getType();
if (nodeType != "leaf") { //葉子節點不去理會
if (xmlStr == null) { //如果節點已經加載,則直接展開
if (node.doc.children.length >= 2) {
node.doc.children[1].style.display = "block";
}
}
else {
if ( node.isLoaded || nodeType == "node") {
// add by janage
// 已經加載,系統刪除原先的節點。
var divs = node.doc.all.tags("DIV");
for ( var i=0; i<divs.length; i++ ) {
divs[i].removeNode(true);
}
}
node.menuNode = new Array();
node.loadXMLStr(xmlStr); //加載子節點的樹
node.doc.children[1].style.display = "block";
node.isLoaded = true;
}
//標識節點為打開狀態
node.isOpened = true;
node.doc.children[0].rows[0].cells[0].children[0].src = node.openFlag;
node.doc.children[0].rows[0].cells[1].children[0].src = node.openFolder;
}
else {
if ( xmlStr != null && xmlStr.length > 0) {
node.loadXMLStr(xmlStr);
if ( node.doc.childNodes.length == 1 ) return ;
// 將葉子節點升為普通的節點。
var flagNode = node.doc.children(0).rows(0).cells(0);
var floderNode = node.doc.children(0).rows(0).cells(1);
var flagImg;
if ( flagNode.childNodes.length == 0 ) {
flagImg = document.createElement("img");
flagNode.appendChild(flagImg);
}
else {
flagImg = document.children(0);
}
flagImg.src = node.openFlag;
var floderImg;
if ( floderNode.childNodes.length == 0 ) {
floderImg = document.createElement("img");
floderNode.appendChild(floderImg);
}
else {
floderImg = floderNode.children(0);
}
floderNode.style.paddingLeft = node.spaceWidth;
floderImg.src = (node.openFolder==undefined)?( (this.openFolder==undefined)?this.root.openFolder:this.openFolder):node.openFolder;
node.doc.children(1).style.display = "block";
node.isLoaded = true;
//標識節點為打開狀態
node.isOpened = true;
}
}
}
//關閉一個節點的下一級子節點
XMLTree.prototype.close = function (nodeId) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this; //如果沒有找到相應的節點,則以自身節點
if (node.parent == null) return; //如果節點是根結點,則返回
var nodeType = node.getType();
if (nodeType != "leaf") { //葉子節點不去理會
if (nodeType == "node") { //如果是一個包含字節點的節點
if (node.doc.children.length >= 2) {
node.doc.children[1].style.display = "none";
}
}
else { //如果是引用節點
if (node.autoRefresh) { //如果節點屬于總是加載情況,則刪除掉此節點的子節點
node.doc.children[1].removeNode(true);
node.menuNode = new Array();
node.isLoaded = false;
}
else {
if (node.doc.children.length >= 2) {
node.doc.children[1].style.display = "none";
}
}
}
node.isOpened = false;
node.doc.children[0].rows[0].cells[0].children[0].src = node.closeFlag;
node.doc.children[0].rows[0].cells[1].children[0].src = node.closeFolder;
}
}
//選中一個節點
XMLTree.prototype.selected = function (nodeId) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this; //如果沒有找到相應的節點,則以自身節點
if (node.parent == null) return; //如果節點是根結點,則返回
var oSpan = node.doc.children[0].cells[2].children[0]; //找到此節點相應的文字對象
with (oSpan.style) {
color = node.selectedTextColor;
backgroundColor = node.selectedBackgroundColor;
textDecoration = node.selectedUnderLine ? "underline" : "none";
fontWeight="bold";
}
node.isSelected = true; //標識節點被選中
}
//取消選中的一個節點
XMLTree.prototype.unSelected = function (nodeId) {
var node = this.getMenuItem(nodeId);
if (node == null) node = this; //如果沒有找到相應的節點,則以自身節點
if (node.parent == null) return; //如果節點是根結點,則返回
var oSpan = node.doc.children[0].cells[2].children[0]; //找到此節點相應的文字對象
with (oSpan.style) {
color = node.textColor;
backgroundColor = node.backgroundColor;
textDecoration = node.underLine ? "underline" : "none";
fontWeight="normal";
}
node.root.selectedNode = null; // 設置選中的節點為null。
node.isSelected = false; //標識節點被選中
}
//得到當前節點的類型,返回"leaf"、"node"、"ref"三種情況
XMLTree.prototype.getType = function () {
if (this.ref != "") return "ref";
if (this.menuNode.length > 0) return "node";
return "leaf";
}
//根據菜單項id查找菜單項,返回擁有此id的菜單項
XMLTree.prototype.getMenuItem = function (id) {
if (this.id == id) { //如果此節點就是要尋找的節點
return this;
}
else {
for (var i=0;i<this.menuNode.length;i++) {
var result = this.menuNode[i].getMenuItem(id); //遞歸搜索子節點
if (result != null) //如果搜索到則返回此節點
return result;
}
return null; //如果搜索不到則返回null
}
}
//2.01:根據菜單項href查找菜單項,返回擁有此href的菜單項
XMLTree.prototype.getMenuItemByHref = function (href) {
if (this.href == href) { //如果此節點就是要尋找的節點
return this;
}
else {
for (var i=0;i<this.menuNode.length;i++) {
var result = this.menuNode[i].getMenuItemByHref(href); //遞歸搜索子節點
if (result != null) //如果搜索到則返回此節點
return result;
}
return null; //如果搜索不到則返回null
}
}
//解析xml樹
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -