一个容易扩展的树型结构

最新推荐文章于 2024-04-27 10:03:26 发布

weiguolee

最新推荐文章于 2024-04-27 10:03:26 发布

阅读量1k

点赞数 1

分类专栏：页面-树型结构文章标签：扩展 border javascript function html table

本文链接：https://blog.csdn.net/weiguolee/article/details/7722582

版权

页面-树型结构专栏收录该内容

0 篇文章 0 订阅

订阅专栏

需求背景:

最近做了一个项目，需要把电脑中存放的上千个文件夹和对应的文件以页面树型的方式给客户展示出来，便于客户阅读,修改,上传添加等操作，便于管理员对文件的权限访问管理控制，这些文件分属不同的文件夹，有的文件在好几层文件夹下面，这个树型结构需要树枝体现文件夹的信息，树叶体现文件的信息。这就要求树型结构特别容易扩展。

看了网上几个开源的树型框架，构建树型特别的快捷和操作方便，但节点的权限控制，节点的操作扩展处理感觉不是太理想。

于是就自己构建了一个简单但特别实用，易于扩展的树型结构:

主要是通过html+js去构建一个树型结构。我以一个简单的公司组织树构建为例，说明一下。

共3个html页面外加一个图片文件夹，

主页面为 treeIndex.html 代码如下:

<html>
<head>
</head>
<frameset rows="*,0" framespacing="0" border="1" frameborder="0">
    <frame name="frameList" scrolling="auto" noresize src="treeRoot.html">
    <frame name="frameBack" scrolling="no" noresize src="">
    <noframes>
     <body>
     <p>此网页使用了框架，</p>
    </body>
    </noframes>
    </frameset>
</html>

第2个页面 treeRoot.html 代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树型显示管理</title>
<script language="Javascript">

//点击+号得到这个节点下的信息
function show_child (t)
{

    var imgS = eval("document.all.Image"+t);
    var divS = eval("document.all.divSub"+t);

    //当前节点图标不存在
    if ( typeof (imgS) != "object")
        return;
    //如果是最终的树叶节点,不做展开操作。下面没有子叶。
    // img标签上-自定义属性-loaded 标识节点展开或收拢
    if (imgS.loaded == "no")
        return;
    //当前节点展开操作处理
    if (divS.style.display == "none")
    {
       //把当前点击的+变成-
        imgS.src = "images/minus.gif";
       //把下面的一个空间给显示出来。
        divS.style.display = "";
        //做一个隐形提交。
        parent.frameBack.location ="treeNode.html?nodeID="+t;
    }
    else
    {
        //当点击"-"号的时候，-号变+号，子节点隐藏。
        imgS.src = "images/plus.gif";
        divS.style.display = "none";
    }
}

</script>
</head>
<body bgcolor="#F7F7F7" >
<form name="formMain" method="post">
<table border="2" height="100%" width="100%" bgcolor="#F7F7F7" style="font-size:10pt">
<tr height="30">
    <td width="100%" colspan="5" bgcolor="#F7F7F7" align="center" valign="center">
      <font style="color:#00509b">树型显示样例-公司结构</font>
    </td>
</tr>
<tr align="left" valign="top">
    <td bgcolor="#f7f7f7" colspan="5" >
      <div id = "divRoot">
        <img loaded = "yes" name = "ImageRoot" src = "images/plus.gif" align ="absMiddle" style ="cursor:hand"
    onclick = "show_child('Root')" >
   <a href = "javascript:find('Root')"
    style = "text-decoration:none;color:#00509b">xx公司(根节点)</a>
   <img src="images/go_add.gif" alt="新增部门" border="0" align="absMiddle" οnclick="AddDepart('Root')" style="cursor:hand">
   <img src="images/go_mod.gif" alt="修改部门" border="0" align="absMiddle" οnclick="ModDepart('Root')" style="cursor:hand">
      </div>
      <div id = "divSubRoot" style = "display:none">
           正在装载数据.............
      </div>

    </td>
</tr>
</table>
</form>
</body>
</html>

第3个页面 treeNode.html 代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language = "javascript">
//获取上一个html页面传过来的内容
var loc = location.href;
var n1 = loc.length;//地址的总长度
var n2 = loc.indexOf("=");//取得=号的位置
var nodeId = loc.substr(n2+1, n1-n2);//从=号后面的内容
if(nodeId=="Root"){
initNode1();
}
if(nodeId=="Node2"){
initNode2();
}
location.href="";
//构建divsub中需要显示的节点内容。-如果是后台交互页面，后台查数据-进行统一的html代码拼装。
function initNode1(){
divS = eval("parent.frameList.divSub"+"Root");
divS.innerHTML = "<table cellspacing=0 cellpadding=0 border=1 width=\"100%\"><tr><td width=\"25\"> </td><td><img loaded = \"no\" name = \"ImageNode1\" src = \"images/minus.gif\" align = \"absMiddle\"><font style=\"font-size: 10pt\"><a href = \"javascript:find('Node1')\" style = \"text-decoration:none;color:#00509b\">生产平台</a><img src=\"images/go_add.gif\" alt=\"新增部门\" border=\"0\" align=\"absMiddle\" οnclick=\"AddDepart('Node1')\" style=\"cursor:hand\"><img src=\"images/go_mod.gif\" alt=\"修改部门\" border=\"0\" align=\"absMiddle\" οnclick=\"ModDepart('Node1')\" style=\"cursor:hand\"> <br><div id = \"divSubNode1\" style = \"display:none\">正在装载数据.............</div></font></td></tr></table><table cellspacing=0 cellpadding=0 border=1 width=\"100%\"><tr><td width=\"25\"> </td><td><img loaded = \"yes\" name = \"ImageNode2\" src = \"images/plus.gif\" align = \"absMiddle\" style =\"cursor:hand\" onclick = \"show_child('Node2')\"><font style=\"font-size: 10pt\"><a href = \"javascript:find('Node2')\" style = \"text-decoration:none;color:#00509b\">行政平台</a><img src=\"images/go_add.gif\" alt=\"新增部门\" border=\"0\" align=\"absMiddle\" οnclick=\"AddDepart('Node2')\" style=\"cursor:hand\"><img src=\"images/go_mod.gif\" alt=\"修改部门\" border=\"0\" align=\"absMiddle\" οnclick=\"ModDepart('Node2')\" style=\"cursor:hand\"> <br><div id = \"divSubNode2\" style=\"display:none\">正在装载数据.............</div></font></td></tr></table>";
}

//构建divsub中需要显示的内容。
function initNode2(){
divS = eval("parent.frameList.divSub"+"Node2");
divS.innerHTML = "<table cellspacing=0 cellpadding=0 border=1 width=\"100%\"><tr><td width=\"25\"> </td><td><img loaded = \"no\" name = \"ImageNode21\" src = \"images/minus.gif\" align = \"absMiddle\"><font style=\"font-size: 10pt\"><a href = \"javascript:find('Node21')\" style = \"text-decoration:none;color:#00509b\">总裁办</a><img src=\"images/go_add.gif\" alt=\"IT部\" border=\"0\" align=\"absMiddle\" οnclick=\"AddDepart('Node21')\" style=\"cursor:hand\"><img src=\"images/go_mod.gif\" alt=\"修改部门\" border=\"0\" align=\"absMiddle\" οnclick=\"ModDepart('Node21')\" style=\"cursor:hand\"><br><div id = \"divSubNode21\" style = \"display:none\">正在装载数据.............</div></font></td></tr></table><table cellspacing=0 cellpadding=0 border=1 width=\"100%\"><tr><td width=\"25\"> </td><td><img loaded = \"no\" name = \"ImageNode22\" src = \"images/minus.gif\" align = \"absMiddle\" style =\"cursor:hand\" onclick = \"show_child('Node22')\"><font style=\"font-size: 10pt\"><a href = \"javascript:find('Node22')\" style = \"text-decoration:none;color:#00509b\">人力资源</a><img src=\"images/go_add.gif\" alt=\"新增部门\" border=\"0\" align=\"absMiddle\" οnclick=\"AddDepart('Node22')\" style=\"cursor:hand\"><img src=\"images/go_mod.gif\" alt=\"修改部门\" border=\"0\" align=\"absMiddle\" οnclick=\"ModDepart('Node22')\" style=\"cursor:hand\"><br><div id = \"divSubNode22\" style = \"display:none\">正在装载数据.............</div></font></td></tr></table><table cellspacing=0 cellpadding=0 border=1 width=\"100%\"><tr><td width=\"25\"> </td><td><img loaded = \"no\" name = \"ImageNode23\" src = \"images/minus.gif\" align = \"absMiddle\" style =\"cursor:hand\" onclick = \"show_child('Node23')\"><font style=\"font-size: 10pt\"><a href = \"javascript:find('Node23')\" style = \"text-decoration:none;color:#00509b\">计划部</a><img src=\"images/go_add.gif\" alt=\"新增部门\" border=\"0\" align=\"absMiddle\" οnclick=\"AddDepart('Node23')\" style=\"cursor:hand\"><img src=\"images/go_mod.gif\" alt=\"修改部门\" border=\"0\" align=\"absMiddle\" οnclick=\"ModDepart('Node23')\" style=\"cursor:hand\"><br><div id = \"divSubNode23\" style = \"display:none\">正在装载数据.............</div></font></td></tr></table>";
}

</script>

</head>
<body >
</body>
</html>

还有一个图片文件夹 images