📄 mztreeview10.js
字号:
<!--
/*---------------------------------------------------------------------------*\
| Subject: Web TreeView Class |
| Version: 1.0 |
| Author: 黄方荣【meizz】【梅花雪】 |
| FileName: MzTreeView.js |
| Created: 2004-10-18 |
| LastModified: 2005-03-10 |
| Download: http://www.meizz.com/Web/Download/MzTreeView10.rar |
| Explain: http://www.meizz.com/Web/Article.asp?id=436 |
| Demo: http://www.meizz.com/Web/Demo/MzTreeView10.htm |
| |
| You may use this code on your item |
| this entire copyright notice appears unchanged |
| and you clearly display a link to http://www.meizz.com/ |
| |
|-----------------------------------------------------------------------------|
| MSN: huangfr@msn.com QQ: 112889082 http://www.meizz.com |
| CSDN Community ID: meizz Copyright (c) 2004-2005 meizz |
\*---------------------------------------------------------------------------*/
//MzTreeView1.0网页树类, 在实例化的时候请把实例名作参数传递进来
function MzTreeView(Tname)
{
if(typeof(Tname) != "string" || Tname == "")
throw(new Error('创建类实例的时候请把类实例的引用变量名传递进来！'));
//【property】
this.url = "javascript:void 0";
this.target = "_self";
this.name = Tname;
this.wordLine = false;
this.currentNode = null;
this.useArrow = false;
this.nodes = {};
this.node = {};
this.names = "";
this._d = "\x0f";
this.index = 0;
this.divider = "_";
this.rootId = "-1";
this.colors =
{
"highLight" : "#0A246A",
"highLightText" : "#FFFFFF",
"mouseOverBgColor" : "#D4D0C8"
};
this.icons = {
L0 : 'L0.gif', //┏
L1 : 'L1.gif', //┣
L2 : 'L2.gif', //┗
L3 : 'L3.gif', //━
L4 : 'L4.gif', //┃
PM0 : 'P0.gif', //＋┏
PM1 : 'P1.gif', //＋┣
PM2 : 'P2.gif', //＋┗
PM3 : 'P3.gif', //＋━
empty : 'L5.gif', //空白图
root : 'root.gif', //缺省的根节点图标
folder : 'folder.gif', //缺省的文件夹图标
file : 'file.gif', //缺省的文件图标
exit : 'exit.gif'
};
this.iconsExpand = { //存放节点图片在展开时的对应图片
PM0 : 'M0.gif', //－┏
PM1 : 'M1.gif', //－┣
PM2 : 'M2.gif', //－┗
PM3 : 'M3.gif', //－━
folder : 'folderopen.gif',
exit : 'exit.gif'
};
//扩展 document.getElementById(id) 多浏览器兼容性
//id 要查找的对象 id
this.getElementById = function(id)
{
if (typeof(id) != "string" || id == "") return null;
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all(id);
try {return eval(id);} catch(e){ return null;}
}
//MzTreeView 初始化入口函数
this.toString = function()
{
this.browserCheck();
this.dataFormat();
this.node["0"] =
{
"id": "0",
"path": this.rootId,
"isLoad": false,
"childNodes": [],
"childAppend": "",
"sourceIndex": this.rootId
};
this.load("0");
var rootCN = this.node["0"].childNodes;
var str = "<A id='"+ this.name +"_RootLink' href='#' style='DISPLAY: none'></A>";
if(rootCN.length>0)
{
this.node["0"].hasChild = true;
for(var i=0; i<rootCN.length; i++)
str += this.nodeToHTML(rootCN[i], i==rootCN.length-1);
//setTimeout(this.name +".expand('"+ rootCN[0].id +"', true); "+
// this.name +".focusClientNode('"+ rootCN[0].id +"'); "+ this.name +".atRootIsEmpty()",10);
setTimeout(this.name +".atRootIsEmpty();"+ this.name +".focusClientNode('"+ rootCN[0].id +"'); ",10);
}
if (this.useArrow) //使用方向键控制跳转到上级下级父级子级节点
{
if (document.attachEvent)
document.attachEvent("onkeydown", this.onkeydown);
else if (document.addEventListener)
document.addEventListener('keydown', this.onkeydown, false);
}
return "<DIV class='MzTreeView' "+
"onclick='"+ this.name +".clickHandle(event)' "+
"ondblclick='"+ this.name +".dblClickHandle(event)' "+
">"+ str +"</DIV>";
};
this.onkeydown= function(e)
{
e = window.event || e; var key = e.keyCode || e.which;
switch(key)
{
case 37 : eval(Tname).upperNode(); break; //Arrow left, shrink child node
case 38 : eval(Tname).pervNode(); break; //Arrow up
case 39 : eval(Tname).lowerNode(); break; //Arrow right, expand child node
case 40 : eval(Tname).nextNode(); break; //Arrow down
}
};
}
//浏览器类型及版本检测
MzTreeView.prototype.browserCheck = function()
{
var ua = window.navigator.userAgent.toLowerCase();
if(/msie/i.test(ua))
{
this.navigator = /opera/i.test(ua) ? "opera" : "";
if(!this.navigator) this.navigator = "msie";
}
else if(/gecko/i.test(ua))
{
var vendor = window.navigator.vendor.toLowerCase();
if(vendor == "firefox") this.navigator = "firefox";
else if(vendor == "netscape") this.navigator = "netscape";
else if(vendor == "") this.navigator = "mozilla";
}
else this.navigator = "msie";
if(window.opera) this.wordLine = false;
};
//给 TreeView 树加上样式设置
MzTreeView.prototype.setStyle = function()
{
/*
width: 16px; \
height: 16px; \
width: 20px; \
height: 20px; \
*/
var style = "<style>"+
"DIV.MzTreeView DIV IMG{border: 0px solid #FFFFFF;}"+
"DIV.MzTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;}";
if(this.wordLine)
{
style +="\
DIV.MzTreeView DIV\
{\
height: 20px;"+
(this.navigator=="firefox" ? "line-height: 20px;" : "" ) +
(this.navigator=="netscape" ? "" : "overflow: hidden;" ) +"\
}\
DIV.MzTreeView DIV SPAN\
{\
vertical-align: middle; font-size: 21px; height: 20px; color: #D4D0C8; cursor: default;\
}\
DIV.MzTreeView DIV SPAN.pm\
{\
width: "+ (this.navigator=="msie"||this.navigator=="opera" ? "11" : "9") +"px;\
height: "+ (this.navigator=="netscape"?"9":(this.navigator=="firefox"?"10":"11")) +"px;\
font-size: 7pt;\
overflow: hidden;\
margin-left: -16px;\
margin-right: 5px;\
color: #000080; \
vertical-align: middle;\
border: 1px solid #D4D0C8;\
cursor: "+ (this.navigator=="msie" ? "hand" : "pointer") +";\
padding: 0 2px 0 2px;\
text-align: center;\
background-color: #F0F0F0;\
}";
}
style += "<\/style>";
/*alert(document.getElementsByTagName("HEAD")[0].innerHTML);
if(document.body)
{
var head = document.getElementsByTagName("HEAD")[0];
head.innerHTML = head.innerHTML + style;
}
else */
document.write(style);
};
//当根节点为空的时候做的处理
MzTreeView.prototype.atRootIsEmpty = function()
{
var RCN = this.node["0"].childNodes;
for(var i=0; i<RCN.length; i++)
{
if(!RCN[i].isLoad) this.expand(RCN[i].id);
if (RCN[i].text=="")
{
var node = RCN[i].childNodes[0], HCN = node.hasChild;
if(this.wordLine)
{
var span = this.getElementById(this.name +"_tree_"+ node.id);
span = span.childNodes[0].childNodes[0].childNodes[0];
span.innerHTML = RCN[i].childNodes.length>1 ? "┌" : "─";
}
else
{
node.iconExpand = RCN[i].childNodes.length>1 ? HCN ? "PM0" : "L0" : HCN ? "PM3" : "L3"
this.getElementById(this.name +"_expand_"+ node.id).src = this.icons[node.iconExpand].src;
}
}
}
};
//初始化数据源里的数据以便后面的快速检索
MzTreeView.prototype.dataFormat = function()
{
var a = new Array();
for (var id in this.nodes) a[a.length] = id;
this.names = a.join(this._d + this._d);
this.totalNode = a.length; a = null;
};
//在数据源检索所需的数据节点
//id 客户端节点对应的id
MzTreeView.prototype.load = function(id)
{
var node = this.node[id], d = this.divider, _d = this._d;
var sid = node.sourceIndex.substr(node.sourceIndex.indexOf(d) + d.length);
var reg = new RegExp("(^|"+_d+")"+ sid +d+"[^"+_d+d +"]+("+_d+"|$)", "g");
var cns = this.names.match(reg), tcn = this.node[id].childNodes; if (cns){
reg = new RegExp(_d, "g"); for (var i=0; i<cns.length; i++)
tcn[tcn.length] = this.nodeInit(cns[i].replace(reg, ""), id); }
node.isLoad = true;
};
//初始化节点信息, 根据 this.nodes 数据源生成节点的详细信息
//sourceIndex 数据源中的父子节点组合的字符串 0_1
//parentId 当前树节点在客户端的父节点的 id
MzTreeView.prototype.nodeInit = function(sourceIndex, parentId)
{
this.index++;
var source= this.nodes[sourceIndex], d = this.divider;
var text = this.getAttribute(source, "text");
var hint = this.getAttribute(source, "hint");
var ctrl = this.getAttribute(source, "ctrl"); //由xuStanly_cn增加于2006.5.4
var ctrlClick = this.getAttribute(source, "ctrlClick"); //由xuStanly_cn增加于2006.5.4
if (ctrlClick == "") ctrlClick = false; //由xuStanly_cn增加于2006.5.4
var ctrlName = this.getAttribute(source, "ctrlName"); //由xuStanly_cn增加于2006.5.4
var ctrlType = this.getAttribute(source, "ctrlType"); //由xuStanly_cn增加于2006.8.4
if (ctrlType == "") ctrlType = "checkbox"; //由xuStanly_cn增加于2006.8.4
var rtClick = this.getAttribute(source, "rtClick"); //由XuStanly_cn增加于2007.1.26
var sid = sourceIndex.substr(sourceIndex.indexOf(d) + d.length);
this.node[this.index] =
{
"id" : this.index,
"text" : text,
"hint" : hint ? hint : text,
"icon" : this.getAttribute(source, "icon"),
"path" : this.node[parentId].path + d + this.index,
"isLoad": false,
"isExpand": false,
"parentId": parentId,
"parentNode": this.node[parentId],
"sourceIndex" : sourceIndex,
"childAppend" : "",
"ctrl" : ctrl, //由XuStanly_cn增加于2006.5.4
"ctrlClick" : ctrlClick, //由XuStanly_cn增加于2006.5.4
"ctrlName" : ctrlName, //由XuStanly_cn增加于2006.5.4
"ctrlType" : ctrlType, //由XuStanly_cn增加于2006.8.4
"rtClick" : rtClick //由XuStanly_cn增加于2007.1.26
};
this.nodes[sourceIndex] = "index:"+ this.index +";"+ source;
this.node[this.index].hasChild = this.names.indexOf(this._d + sid + d)>-1;
if(this.node[this.index].hasChild) this.node[this.index].childNodes = [];
return this.node[this.index];
};
//从XML格式字符串里提取信息
//source 数据源里的节点信息字符串(以后可以扩展对XML的支持)
//name 要提取的属性名
MzTreeView.prototype.getAttribute = function(source, name)
{
var reg = new RegExp("(^|;|\\s)"+ name +"\\s*:\\s*([^;]*)(\\s|;|$)", "i");
if (reg.test(source))
return RegExp.$2.replace(/[\x0f]/g, ";").replace(/\'/g, "'"); return "";
};
//根据节点的详细信息生成HTML
//node 树在客户端的节点对象
//AtEnd 布尔值 当前要转换的这个节点是否为父节点的子节点集中的最后一项
MzTreeView.prototype.nodeToHTML = function(node, AtEnd)
{
var source = this.nodes[node.sourceIndex];
var target = this.getAttribute(source, "target");
var data = this.getAttribute(source, "data");
var url = this.getAttribute(source, "url");
var dataId = node.sourceIndex.split(this.divider);
if(!url) url = this.url;
if(data) url += (url.indexOf("?")==-1?"?":"&") + data;
if(!target) target = this.target;
var id = node.id;
var HCN = node.hasChild, isRoot = node.parentId=="0";
if(isRoot && node.icon=="") node.icon = "root";
if(node.icon=="" || typeof(this.icons[node.icon])=="undefined")
node.icon = HCN ? "folder" : "file";
node.iconExpand = AtEnd ? "└" : "├";
var HTML = "<DIV noWrap='True'><NOBR>";
if(!isRoot)
{
node.childAppend = node.parentNode.childAppend + (AtEnd ? " " : "│");
if(this.wordLine)
{
HTML += "<SPAN>"+ node.parentNode.childAppend + (AtEnd ? "└" : "├") +"</SPAN>";
if(HCN) HTML += "<SPAN class='pm' id='"+ this.name +"_expand_"+ id +"'>+</SPAN>";
}
else
{
node.iconExpand = HCN ? AtEnd ? "PM2" : "PM1" : AtEnd ? "L2" : "L1";
HTML += "<SPAN>"+ this.word2image(node.parentNode.childAppend) +"<IMG "+
"align='absmiddle' id='"+ this.name +"_expand_"+ id +"' "+
"src='"+ this.icons[node.iconExpand].src +"' style='cursor: "+ (!node.hasChild ? "":
(this.navigator=="msie"||this.navigator=="opera"? "hand" : "pointer")) +"'></SPAN>";
}
}
HTML += "<IMG "+
"align='absMiddle' "+
"id='"+ this.name +"_icon_"+ id +"' "+
"src='"+ this.icons[node.icon].src +"'";
if(node.rtClick != "") HTML += " oncontextmenu=\""+ node.rtClick +"\">"; //由xuStanly_cn增加于2007.6.19>";
else HTML += ">"; //由xuStanly_cn增加于2007.6.19>"
if(eval(node.ctrl)){ //{}中部分由xuStanly_cn增加于2007.8.28
HTML += "<input id='"+ node.ctrlType +"_"+ node.id +
"' type='"+ node.ctrlType +"' name='"+ node.ctrlName +"' value="+ dataId[1];
if(node.ctrlClick) HTML += " onclick='"+ this.name +".getPath(\""+ node.ctrlType +"\",\""+node.path+"\")'"
HTML += ">";
}
HTML += " <A "+
"class='MzTreeview' hideFocus "+
"id='"+ this.name +"_link_"+ id +"' "+
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -