高分求救,关于目录树中递归调用问题。

apboy 2002-07-12 05:27:51
/** 图片所在目录 *///~~
imageDir = "images";
/** 文件节点的图片 *///~~
img_file = imageDir+"/file.gif";
/** 关闭的目录的图片 *///~~
img_folder_close = imageDir+"/close.gif";
/** 在中间的加号的图片 *///~~
img_plus = imageDir+"/plusnode.gif";
/** 在树末尾的加号的图片 *///~~
img_plus_last = imageDir+"/pluslastnode.gif";
/** 打开的目录的图片 *///~~
img_folder_open = imageDir+"/open.gif";
/** 在树末尾的减号的图片 *///~~
img_minus_last = imageDir+"/minuslastnode.gif";
/** 在中间的减号的图片 *///~~
img_minus = imageDir+"/minusnode.gif";
/** 无节点线条的图片 *///~~
img_line = imageDir+"/line.gif";
/** 最后节点的线条图片 *///~~
img_line_last = imageDir+"/lastnode.gif";
/** 中间节点的线条图片 *///~~
img_line_mid = imageDir+"/node.gif";
/** 空白区域的图片 *///~~
img_blank = imageDir+"/blank.gif";


/*******************************************设置公共的图片变量结束**************************************************/



function tree() {

/** 根节点 *///~~
this.root = null;
/** 节点个数 *///~~
this.length = 0;
/** 节点数组 *///~~
this.nodes = new Array();
/** 在drawFrontLine时用来临时存储字符串 *///~~
// this.tempStr = "";

/** 添加根节点 *///~~
this.addRoot = addRoot;
/** 添加节点 *///~~
this.addNode = addNode;

/** 画出根节点 *///~~
this.drawRoot = drawRoot;
/** 画出节点前的空白图片或连接线图片 *///~~
this.drawFrontLine = drawFrontLine;
/** 画出节点 *///~~
this.drawNode = drawNode;
/** 画出所有节点 *///~~
this.drawNodes = drawNodes;
/** 得到节点的父节点 *///~~
this.getParent = getParent;
/** 添加节点时,将同一层的其他节点的isLast属性设置为false *///~~
this.setOtherIsLast = setOtherIsLast;
}

/**
* 根节点对象
* @param id 根节点的id号
* @param name 根节点名称,显示在页面的连接的名字
* @param url 链接
* @param target 指示链接的目标页面
*/
function root(id,name,url,target) {
this.id = id;
this.name = name;
this.parentId = null;
this.type = "root";
this.url = url;
this.target = target;
}

function addRoot(root) {
this.root = root;
this.length = 1;
this.nodes[0] = root;
}

/**
* 节点对象
* @param id 节点id号
* @param name 节点名称,显示在页面上的链接的名字
* @param parentId 父节点id号
* @param type 节点的类型(folder|file)
* @param url 节点的链接
* @param target 节点链接的目标页面
*///~~

function node(id,name,parentId,type,url,target) {
/** 节点id号 *///~~
this.id = id;
/** 节点名称,显示在页面上的链接的名字 *///~~
this.name =name;
/** 父节点id号 *///~~
this.parentId = parentId;
/** 节点的类型(folder|file) *///~~
this.type = type;
/** 节点的链接 *///~~
this.url = url;
/** 节点链接的目标页面 *///~~
this.target = target;


/** 节点的图片(目录或文件等) *///~~
this.image = "";
/** 节点的前导图片(加号或减号或线条等) *///~~
this.fImage = "";
/** 是否是同层中最后节点 *///~~
this.isLast = false;
}

/** 判断一个节点是否有父节点,如果有则返回其父节点,如果没有返回null */
function getParent(node) {
for (var i=0;i<this.length;i++)
{
if (this.nodes[i].id == node.parentId)
{
return this.nodes[i];
}
}
return null;
}

/** 当添加一个新节点后,将与它处在同一层的其它元素的isLast标志设置为false */
function setOtherIsLast(node) {
for (var i=1;i<this.length;i++) //i=1,表示不包括根节点在内的循环
{
if (this.nodes[i].parentId == node.parentId && this.nodes[i].isLast) //如果找到父节点相同的,并且isLast为true的节点
{
this.nodes[i].isLast = false; //设置该节点的isLast为false
if (this.nodes[i].type == "folder") //设置图片为非末节点图片
{
this.nodes[i].fImage = img_plus;
} else {
this.nodes[i].fImage = img_line_mid;
}
return true;
}
}
return false;
}

/** 为树的节点组nodes[]添加一个新的节点 */
function addNode(node) {
if (this.getParent(node) != null) //如果有父节点
{
this.setOtherIsLast(node); //设置同层中的其他元素为非末节点
node.isLast = true; //设置本节点为末节点
if (node.type == "folder") //根据节点类型设置图片
{
node.image = img_folder_close;
node.fImage = img_plus_last;
} else {
node.image = img_file;
node.fImage = img_line_last;
}
this.nodes[this.length] = node; //添加该节点到树的节点组nodes[]
this.length++; //节点数加1
} else {
alert("没有找到该节点的父节点,这是一个非法节点!");
}
}


/** 画出根节点 */
function drawRoot() {
document.write("<table border='0' cellspacing='0' cellpadding='0'>");
document.write("<tr style='font-size:12px'><td>");
document.write("<a onFocus='this.blur()' href='"+this.root.url+"' target='"+this.root.target+"'><img border='0' src='"+img_folder_close+"'></a>");
document.write("</td><td valign='middle'>");
document.write("<a onFocus='this.blur()' href='"+this.root.url+"' target='"+this.root.target+"'>"+this.root.name+"</a>");
document.write("</td></tr>");
document.write("</table>");
}

/** 画出节点 */
function drawNode(node) {
document.write("<table border='0' cellspacing='0' cellpadding='0'>");
document.write("<tr style='font-size:12px'><td>");
this.drawFrontLine(node);
if (node.type == "folder")
{
document.write("<a onClick='clickOnFolder()' onFocus='this.blur()' href='#'><img border='0' src='"+node.fImage+"'></a>");
document.write("<a onFocus='this.blur()' href='"+node.url+"' target='"+node.target+"'><img border='0' src='"+node.image+"'></a>");
document.write("</td><td valign='middle'>");
document.write("<a onFocus='this.blur()' id='folderLink' href='"+node.url+"' target='"+node.target+"'>"+node.name+"</a>");
} else {
document.write("<img border='0' src='"+node.fImage+"'>");
document.write("<a onFocus='this.blur()' href='"+node.url+"' target='"+node.target+"'><img border='0' src='"+node.image+"'></a>");
document.write("</td><td valign='middle'>");
document.write("<a onFocus='this.blur()' href='"+node.url+"' target='"+node.target+"'>"+node.name+"</a>");
}
document.write("</td></tr>");
document.write("</table>");
}

/** 画出整个树的节点组 */
function drawNodes(node) {
if (node.type != "root")
{
document.write("<div style='display:none'>");
}
for (var i=1;i<this.length;i++)
{
if (this.nodes[i].parentId!=null && this.nodes[i].parentId == node.id)
{
this.drawNode(this.nodes[i]); //画出节点
this.drawNodes(this.nodes[i]); //递归画出整个节点组的节点
}
}
if (node.type != "root")
{
document.write("</div>");
}
}

/** 画出节点前的前导图片,有空格或线条图片.
如果其父节点是一个末节点,那么该对应列的前导图片为空格图片.
如果不是末节点,应该添加线条图片.
这里进行了递归运算,但由于其图片顺序为反顺序,所以设置一个tempStr来暂存需要画出的图片,
用以保证其图片顺序为正确顺序. */
function drawFrontLine(node) {
var tempStr = "";
for (var i=1;i<this.length;i++)
{
if (this.nodes[i].id == node.parentId)
{
if (this.nodes[i].isLast)
{
tempStr = "<img src='"+img_blank+"'>" + tempStr;;
} else {
tempStr = "<img src='"+img_line+"'>" + tempStr;
}
this.drawFrontLine(this.nodes[i]);
}
}
document.write(tempStr);
}


/** 当点击目录节点的前导"加号|减号"图片时,展开层或收缩层,并用相应的图片替代现有图片,实现动态收缩动作 */
function clickOnFolder() {
var srcIndex = event.srcElement.sourceIndex;
var divElement = document.all[srcIndex+5]; //得到层对象
var imgElement = document.all[srcIndex+2]; //得到图片对象
var fimgElement = document.all[srcIndex]; //得到前导图片对象(即它本身)
if (divElement.style.display == "none")
{
divElement.style.display = "";
imgElement.src=img_folder_open;;
if (fimgElement.src!=null && fimgElement.src.indexOf(img_plus)!=-1)
{
fimgElement.src=img_minus;
} else {
fimgElement.src=img_minus_last;
}
} else {
divElement.style.display = "none";
imgElement.src=img_folder_close;
if (fimgElement.src!=null && fimgElement.src.indexOf(img_minus)!=-1)
{
fimgElement.src=img_plus;;
} else {
fimgElement.src=img_plus_last;
}
}
}
...全文
28 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
apboy 2002-07-12
  • 打赏
  • 举报
回复
呵呵是的,上例中company = new Array();数组是从库中读出来的,现在如果mm底下还有一组属于的dept,但是我不想再用循环,想用一个递归程序取代for的两个循环,也就是以后可以有无限多层,而不用再手工添加循环,请问有什么办法?
apboy 2002-07-12
  • 打赏
  • 举报
回复
/**
* 使用方法:
1.生成一个新的树对象 var tree = new tree();
2.生成一个新的根对象 var root = new root(1,"根目录","#","");
3.为树对象添加根对象 tree.addRoot(root);
4.为树对象添加节点,节点的顺序应该按id先后来排列
5.画出根对象 tree.drawRoot();
6.画出整个树 tree.drawNodes(tree.root);
例子:
<HTML>
<HEAD>
<TITLE>fff</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">

<SCRIPT language=javascript>
function onclick_alert()
{
alert("对不起!您没该权限!");
}

var onecount;
onecount=0;
var topid=000000;
company = new Array();

company[0] = new Array("aa","000000","000001");

company[1] = new Array("bb","000000","000021");

company[2] = new Array("cc","000000","010000");

company[3] = new Array("dd","010000","010001");

company[4] = new Array("ff","010000","010002");

company[5] = new Array("gg","000000","011000");

company[6] = new Array("ee","011000","011001");

company[7] = new Array("hh","000000","012000");

company[8] = new Array("ii","000000","013000");

company[9] = new Array("kk","000000","014000");

company[10] = new Array("jj","000000","015000");

company[11] = new Array("mm","000001","016001");

company[12] = new Array("nn","000001","017002");

onecount=13;
</SCRIPT>
<script src="script/FKtree.js"></script>
</HEAD>
<BODY>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD width="100%">
<script type="text/javascript">
var i=24;
var n=70;
var j;
var k;
var tree = new tree();
var root = new root(1,"center","#","");
tree.addRoot(root);
tree.addNode(new node(2,"system",1,"folder","#",""));

tree.addNode(new node(24,"dept",2,"folder","#",""));
for(j=0;j < onecount; j++){
if (company[j][1] == topid){
i++;
tree.addNode(new node(i,company[j][0],24,"folder","index.jsp?topid="+company[j][2]+"&dept="+company[j][0],""));
for(k=0;k < onecount; k++){
if (company[k][1] == company[j][2]){
n++;
tree.addNode(new node(n,company[k][0],i,"file","index.jsp?topid="+company[k][2]+"&dept="+company[k][0],""));
}
}
}
}

tree.addNode(new node(3,"abc",2,"file","admin/opmain.jsp",""));

tree.addNode(new node(4,"ddfdfd",2,"file","admin/queryRole.jsp",""));

tree.addNode(new node(5,"asfd",2,"folder","#",""));
tree.addNode(new node(6,"fdsg",5,"file","#",""));
tree.addNode(new node(7,"sgdsfds",5,"file","#",""));

tree.addNode(new node(11,"dfsg",1,"file","#",""));
tree.addNode(new node(12,"fdsg",1,"file","#",""));

tree.addNode(new node(19,"fsdg",1,"folder","#",""));
tree.addNode(new node(20,"gfggf",19,"file","#",""));
tree.addNode(new node(21,"fdgsfdg",19,"file","#",""));

tree.addNode(new node(22,"ddfdf",1,"file","#",""));
tree.drawRoot();
tree.drawNodes(tree.root);
</script>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
孟子E章 2002-07-12
  • 打赏
  • 举报
回复
:)又有问题了?
孟子E章 2002-07-12
  • 打赏
  • 举报
回复
:)又有问题了?

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧