一个很实用和好用的资源管理器的树形目录源码
发表于:2007-07-14来源:作者:点击数:
标签:
本原码从网上下载,经本人改写,功能更强大,使用更方便,可以有无限级目录,一次性载入,可以分别设置树结点和叶结点的颜色及图标,可以展开和收缩,可以显示当前所处的路径位置,点击树结点时只在展开时显示树结点的超链接,不过,据 测试 ,一次性载入500
本原码从网上
下载,经本人改写,功能更强大,使用更方便,可以有无限级目录,一次性载入,可以分别设置树结点和叶结点的颜色及图标,可以展开和收缩,可以显示当前所处的路径位置,点击树结点时只在展开时显示树结点的超链接,不过,据
测试,一次性载入500个节点时浏览器会显示“该脚本会使浏览器变慢”的提示,不过,选择不取消执行不会影响浏览器的
性能。
function Folder(folderDescription, hreference,parentid,target) {
//constant data;
this.desc = folderDescription;
this.parentid=parentid;
this.hreference = hreference;
this.target=target;
this.id = index;
this.navObj = 0;
this.iconImg = 0;
this.nodeImg = 0;
this.isLastNode = 0;
// dynamic data
this.isRoot = true;
this.isOpen = true;
this.iconsrc="/Files/BeyondPic/2005-12/19/05121906564426578.gif"";
this.iconRoot =imageURL+"ftv2folderopen.gif";
this.children = new Array;
this.nChildren = 0;
// methods
this.initialize = initializeFolder;
this.setState = setStateFolder;
this.addChild = addChild;
this.createIndex = createEntryIndex;
this.hide = hideFolder;
this.display = display;
this.renderOb = drawFolder;
this.totalHeight = totalHeight;
this.subEntries = folderSubEntries;
this.outputLink = outputFolderLink;
}
function setStateFolder(isOpen) {
var subEntries;
var totalHeight;
var fIt = 0;
var i = 0;
if(isOpen == this.isOpen)
return;
if(browserVersion == 2) {
totalHeight = 0
for(i = 0; i < this.nChildren; i++)
totalHeight = totalHeight + this.children[i].navObj.clip.height;
subEntries = this.subEntries();
if(this.isOpen)
totalHeight = 0 - totalHeight;
for(fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)
indexOfEntries[fIt].navObj.moveBy(0, totalHeight);
}
this.isOpen = isOpen;
propagateChangesInState(this);
}
function propagateChangesInState(folder) {
var i = 0;
if(folder.isOpen) {
if(folder.nodeImg) {
if(folder.isLastNode)
folder.nodeImg.src = imageURL+"ftv2mlastnode.gif";
else
folder.nodeImg.src = imageURL+"ftv2mnode.gif";
}
if(this.isRoot)
folder.iconImg.src = imageURL+"ftv2_mail.gif";
else
folder.iconImg.src = imageURL+"ftv2folderopen.gif";
for(i = 0; i < folder.nChildren; i++)
folder.children[i].display();
}
else {
if(folder.nodeImg) {
if(folder.isLastNode)
folder.nodeImg.src = imageURL+"ftv2plastnode.gif";
else
folder.nodeImg.src = imageURL+"ftv2pnode.gif";
}
if(this.isRoot)
folder.iconImg.src = imageURL+"ftv2_mail.gif";
else
folder.iconImg.src = imageURL+"ftv2folderclosed.gif";
for(i = 0; i < folder.nChildren; i++)
folder.children[i].hide();
}
}
function hideFolder() {
if(browserVersion == 1) {
if(this.navObj.style.display == "none")
return;
this.navObj.style.display = "none";
}
else {
if(this.navObj.visibility == "hiden")
return;
this.navObj.visibility = "hiden";
}
this.setState(0);
}
function initializeFolder(level, lastNode, leftSide) {
var i = 0;
var j = 0;
var numberOfFolders;
var numberOfDocs;
nc = this.nChildren;
this.createIndex();
var nc;
var auxEv = "";
if(browserVersion > 0)
auxEv = "<A HREF='
JavaScript: clickOnNode("+this.id+")'>";
else
auxEv = "<A>";
if(level > 0) {
if(lastNode) { //the last 'brother' in the children array
this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "' src="/Files/BeyondPic/2005-12/19/05121906564762713.gif" WIDTH=16 HEIGHT=22 BORDER=0></A>");
leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906565077649.gif"\' WIDTH=16 HEIGHT=22>";
this.isLastNode = 1;
}
else {
this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "'src="/Files/BeyondPic/2005-12/19/05121906565471284.gif"\' WIDTH=16 HEIGHT=22 BORDER=0></A>");
leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906565752587.gif"\' WIDTH=16 HEIGHT=22>";
this.isLastNode = 0;
}
}
else {
this.renderOb("");
}
if(nc > 0) {
level = level + 1;
for(i = 0; i < this.nChildren; i++) {
if(i == this.nChildren-1)
this.children[i].initialize(level, 1, leftSide);
else
this.children[i].initialize(level, 0, leftSide);
}
}
}
function drawFolder(leftSide) {
if(browserVersion == 2) {
if(!doc.yPos)
doc.yPos = 8;
doc.write("<LAYER ID='folder" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");
}
doc.write("<TABLE")
if(browserVersion == 1)
doc.write(" ID='folder" + this.id + "' STYLE='position:block;' ");
doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
doc.write("<TR><
TD>");
doc.write(leftSide);
this.outputLink();
doc.write("<IMG NAME='folderIcon" + this.id + "' ");
if(leftSide == '') {
doc.write("SRC='" + this.iconRoot+"' BORDER=0></A>");
}
else {
doc.write("SRC='" + this.iconSrc+"' BORDER=0></A>");
}
doc.write("</TD><TD NOWRAP>");
doc.write("<DIV CLASS=\"fldrroot\">");
if(leftSide == '') {
if(USETEXTLINKS) {
this.outputLink();
doc.write('<font size="2" color="'+floderColor+'">'+this.desc + "</font></A>");
}
else
doc.write(this.desc);
}
else {
doc.write("<A HREF='JavaScript: clickOnNode("+this.id+")'>");
doc.write('<font size="2" color="'+floderColor+'">'+this.desc + "</font></A>");
}
doc.write("</DIV>");
doc.write("</TD>");
doc.write("</TABLE>");
if(browserVersion == 2) {
doc.write("</LAYER>");
}
if(browserVersion == 1) {
this.navObj = doc.all["folder"+this.id];
this.iconImg = doc.all["folderIcon"+this.id]
this.nodeImg = doc.all["nodeIcon"+this.id]
}
else if(browserVersion == 2) {
this.navObj = doc.layers["folder"+this.id];
this.iconImg = this.navObj.document.images["folderIcon"+this.id];
this.nodeImg = this.navObj.document.images["nodeIcon"+this.id];
doc.yPos = doc.yPos + this.navObj.clip.height;
}
}
<BODY bgColor=#C0C693 leftMargin=5 topMargin=5 marginwidth="5" marginheight="5">
<SCRIPT language=JavaScript src="../leftfiles/treemenu.js"></SCRIPT>
<SCRIPT language=JavaScript>
//以下三项可以设置也可以按默认值,main和parent.main都是链接页面要显示的目标框架
setImageURL("images/"); //图标路径
setLinkColor("#ff0000");//叶节点链接颜色
setFloderColor("#ffff00");//树结点链接颜色
foldersTree = gFldr('***介绍','','');
aux1 = insFldr(foldersTree, "**机关",parent.main,"function.htm");
aux2 = insFldr(aux1 , "**处",parent.main,"function.htm");
insDoc(aux2 , "main", "**室","department/manage/offic.htm");
insDoc(aux2 , "main", "**室", "department/manage/employee.htm");
insDoc(aux2 , "main", "**室","department/manage/finance.htm");
aux2 = insFldr(aux1 , "**处",parent.main,"function.htm");
insDoc(aux2 , "main", "**室","department/manage/law.htm");
insDoc(aux2 , "main", "**室","department/manage/manage.htm");
insDoc(aux2 , "main", "**室", "department/manage/custody.htm");
insDoc(aux2 , "main", "**室", "department/manage/marketmanage.htm");
aux3 = insFldr(aux2 , "**处",parent.main,"function.htm");
insDoc(aux3 , "main", "**室", "department/manage/policy.htm");
insDoc(aux3 , "main", "**室", "department/manage/disposition.htm");
aux1 = insFldr( foldersTree,"**中心",parent.main,"department/business/function.htm");
aux2 = insFldr(aux1 , "**处",parent.main,"function.htm");
insDoc(aux2 , "main", "**室","department/manage/offic.htm");
insDoc(aux2 , "main", "**室", "department/manage/employee.htm");
insDoc(aux2 , "main", "**室","department/manage/finance.htm");
aux2 = insFldr(aux1 , "**处",parent.main,"function.htm");
insDoc(aux2 , "main", "**室","department/manage/law.htm");
insDoc(aux2 , "main", "**室","department/manage/manage.htm");
insDoc(aux2 , "main", "**室", "department/manage/custody.htm");
insDoc(aux2 , "main", "**室", "department/manage/marketmanage.htm");
aux3 = insFldr(aux2 , "**处",parent.main,"function.htm");
insDoc(aux3 , "main", "**室", "department/manage/policy.htm");
insDoc(aux3 , "main", "**室", "department/manage/disposition.htm");
initializeDocument();
</script>
function outputFolderLink() {
if(this.hreference && this.target) {
doc.write("<A HREF='" + this.hreference + "' TARGET=\""+this.target.name+"\" ")
if(browserVersion > 0) {
doc.write("onClick='JavaScript: clickOnFolder("+this.id+")'")
}
doc.write(">")
}
else
doc.write("<A>")
}
function addChild(childNode) {
selectfile[fEntries]=childNode.desc;
fEntries++;
this.children[this.nChildren] = childNode;
this.nChildren++;
return(childNode);
}
function folderSubEntries() {
var i = 0;
var se = this.nChildren;
for(i = 0; i < this.nChildren; i++) {
if(this.children[i].children) //is a folder
se = se + this.children[i].subEntries();
}
return(se)
}
// Definition of class Item (a document or link inside a Folder)
function Item(itemDescription, hreference, itemLink, itemImg,parentid) // Constructor
{
// constant data
this.desc = itemDescription
this.link = itemLink
this.hreference = hreference;
this.id =index;
this.navObj = 0; //initialized in render()
this.iconImg = 0; //initialized in render()
// iconSrc俊 瘤沥登绰 捞固瘤 颇老阑 阿 酒捞袍俊 嘎霸 瘤沥且 荐 乐档废 茄促 (格钎)
this.iconSrc = itemImg;
// methods
this.initialize = initializeItem ;
this.createIndex = createEntryIndex;
this.hide = hideItem;
this.display = display;
this.renderOb = drawItem;
this.totalHeight = totalHeight;
this.parentid=parentid;
//alert(this.parent);
}
function hideItem() {
if(browserVersion == 1) {
if(this.navObj.style.display == "none")
return;
this.navObj.style.display = "none"
}
else {
if(this.navObj.visibility == "hiden")
return;
this.navObj.visibility = "hiden";
}
}
function initializeItem(level, lastNode, leftSide) {
this.createIndex();
if(level > 0) {
if(lastNode) { //the last 'brother' in the children array
this.renderOb(leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906570126337.gif" WIDTH=16 HEIGHT=22>")
leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906570428126.gif" WIDTH=16 HEIGHT=22>"
}
else {
this.renderOb(leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/051219065708665.gif" WIDTH=16 HEIGHT=22>")
leftSide = leftSide + "<IMG src="/Files/BeyondPic/2005-12/19/05121906571221960.gif" WIDTH=16 HEIGHT=22>"
}
}
else
this.renderOb("")
}
function drawItem(leftSide) {
if(browserVersion == 2)
doc.write("<LAYER ID='item" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");
doc.write("<TABLE ");
if(browserVersion == 1)
doc.write(" ID='item" + this.id + "' STYLE='position:block;' ");
doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
doc.write("<TR><TD>");
doc.write(leftSide);
if(this.link != "") doc.write("<A onclik=\'veiwFile("+this.id+")\' HREF=" + this.link + ">");
doc.write("<IMG ID='itemIcon"+this.id+"' ")
doc.write("SRC='"+this.iconSrc+"' BORDER=0>")
if(this.link != "")
doc.write("</A>");
doc.write("</TD><TD NOWRAP>");
doc.write("<DIV CLASS=\"fldritem\">");
if(USETEXTLINKS) {
if(this.link != "")
doc.write("<A onclick=\'veiwFile("+this.id+")\' HREF=" + this.link + '><font size="2" color="'+linkColor+'">'+ this.desc + "</font></A>");
else
doc.write(this.desc);
}
else {
doc.write(this.desc);
}
doc.write("</DIV>");
doc.write("</TABLE>")
if(browserVersion == 2)
doc.write("</layer>");
if(browserVersion == 1) {
this.navObj = doc.all["item"+this.id]
this.iconImg = doc.all["itemIcon"+this.id]
}
else if(browserVersion == 2) {
this.navObj = doc.layers["item"+this.id];
this.iconImg = this.navObj.document.images["itemIcon"+this.id];
doc.yPos = doc.yPos+this.navObj.clip.height;
}
}
function addposition(id,str1){
if(id>0){
clickedFolder = indexOfEntries[id];
parentid=clickedFolder.parentid;
parentname=indexOfEntries[parentid];
pa=parentname.desc;
if(parentid==0)str=pa+str1;
else str='</font><font size=\"2\" color=\"#8F8F8F\">—></font><font size=\"2\" color="#AA0000">'+pa+str1;
addposition(parentid,str);
}
}
var str="";
function veiwFile (msg) {
var typeLogo=typeof top.logo;
if(typeLogo=="undefined")return;
var tpyeFrame=typeof top.logo.top1;
if(tpyeFrame=="undefined")return;
objDocument= top.logo.top1;
var folderText="";
if(msg==0)folderText=selectfile[msg];
else {
str='</font><font size=\"2\" color=\"#8F8F8F\">—></font></font><font size=\"2\" color="#AA0000">'+selectfile[msg];
addposition(msg,str);
folderText=str;
}
objDocument.document.open();
objDocument.document.write('<font size=\"2\" color=\"#8F8F8F\"> 当前位置: </font> <font size=\"2\" color="#AA0000"> '+folderText+"</font>");
objDocument.document.close();
}
// Methods common to both objects (pseudo-inheritance)
function display() {
if(browserVersion == 1)
this.navObj.style.display = "block";
else
this.navObj.visibility = "show";
}
function createEntryIndex() {
indexOfEntries[nEntries] = this;
nEntries++;
}
// total height of subEntries open
function totalHeight() { //used with browserVersion == 2
var h = this.navObj.clip.height;
var i = 0;
if(this.isOpen) { // is a folder and _is_ open
for(i = 0 ; i < this.nChildren; i++)
h = h + this.children[i].totalHeight();
}
return h
}
// Events
function clickOnFolder(folderId) {
var clicked = indexOfEntries[folderId];
if(!clicked.isOpen)
clickOnNode(folderId);
if(clicked.isSelected)
return;
}
function clickOnNode(folderId) {
var clickedFolder = 0;
var state = 0;
clickedFolder = indexOfEntries[folderId];
state = clickedFolder.isOpen;
if (!state){
if(clickedFolder.target)clickedFolder.target.location=clickedFolder.hreference; //点击folder时显示相关链接页面
veiwFile(folderId);
}
clickedFolder.setState(!state); //open<->close
}
function initializeDocument() {
if(doc.all)
browserVersion = 1; //IE4
else if(doc.layers)
browserVersion = 2; //NS4
else
browserVersion = 0; //other
foldersTree.initialize(0, 1, "");
//foldersTree.display();
if(browserVersion > 0) {
doc.write("<LAYER TOP="+indexOfEntries[nEntries-1].navObj.top+"> </LAYER>");
// close the whole tree
clickOnNode(0);
// open the root folder
clickOnNode(0);
}
}
// Auxiliary Functions for Folder-Treee backward compatibility
function gFldr(description, hreference,parentid,target) {
var des;
index++;
if(fEntries==0){
selectfile[fEntries]=description;
fEntries++;
}
des=description;
folder = new Folder(des, hreference,parentid,target);
return(folder);
}
function gLnk(target, description, linkData, itemImg,parentid) {
fullLink = ""
if(target == 0 ||target=="") {
if(linkData != "")
fullLink = "'"+linkData+"' TARGET=\"_blank\"";//显示在新开的窗体中
else
fullLink = "";
}
if(target == 1) {
if(linkData != "" )
fullLink = "'"+linkData+"' TARGET=\"_slef\"";//显示在表单所在的框架或窗体中
else
fullLink = "";
}
else if(target == 2) {
if(linkData != "")
fullLink = "'"+linkData+"' TARGET=\"_parent\""; //显示在包含表单的框架的父框架中
else
fullLink = "";
}
else if(target == 3) {
if(linkData != "")
fullLink = "'"+linkData+"' TARGET=\"_top\"";//显示在顶层窗体中
else
fullLink = "";
}
else {//alert(target);
if(linkData != "")
fullLink = "'"+linkData+"' TARGET="+target;//显示在target窗体中
else
fullLink = "";
}
index++; //当前节点编号
linkItem = new Item(description, linkData, fullLink, itemImg,parentid)
return linkItem
}
function insFldr(parentFolder, childFolder,target,hreference) {
var child;
var desc;
parentid=parentFolder.id;
child=gFldr(childFolder,hreference,parentid,target);
return(parentFolder.addChild(child));
}
function insDoc(parentFolder,target, description, linkData, itemImg) {
var document;
var itemImg;
itemImg=imageURL+"bu.gif";
var desc;
parentid=parentFolder.id;
document=gLnk(target, description, linkData, itemImg,parentid);
parentFolder.addChild(document);
}
function setObjDocument(msg){
if (msg!=null){
objDocument=msg;
}
}
//设置展开、收缩图片路径
function setImageURL(msg){
if (msg==null){
imageURL="../leftfiles/images/";
}else imageURL=msg;
}
//设置超链接文本颜色
function setLinkColor(msg){
linkColor=msg;
}
function setFloderColor(msg){
floderColor=msg;
}
// Global variables
USETEXTLINKS = 1;
indexOfEntries = new Array;
nEntries = 0;
index=-1; //节点编号
doc = document;
browserVersion = 0;
selectedFolder = 0;
selectfile=new Array;
fEntries=0;
var objDocument,imageURL;
var linkColor="#085dde";
var floderColor="#292c08";
var type1=typeof top.logo;
if (type1=="undefined"){
objDocument=null;
}
if(imageURL==null){
setImageURL(imageURL);
}
将源代码和接前代码中的代码合并成一个treemenu.js文件,在在页面中引入即可
原文转自:http://www.ltesting.net