分享一个我自己写的JS目录树

最新推荐文章于 2022-11-21 21:29:38 发布

大葫芦肚子

最新推荐文章于 2022-11-21 21:29:38 发布

阅读量7.4k

点赞数

文章标签： null function html tree javascript c

本文链接：https://blog.csdn.net/lanisa/article/details/6269387

版权

<select name="selTree" id="selTree"></select>
<script language="javascript">
/*
* CTree V1.1 jacky lanisa@163.com
* 本目录树的实现算法
* 目录树都由若干节点组成，每个节点都有自己的节点编号-DID，父节点编号-PID，以及节点文本这三个最基本的属性，其他都属于扩展属性
* 每个节点都有父节点和子节点，目录树的第一个节点称为根节点，同属于一个父节点的一批子节点之间称为兄弟节点，对于父节点这些都可
* 称为叶（子）节点，第一个叶子节点称为首叶节点，最后一个子节点称为末叶节点。每个叶节点在目录树中都呈现出一定的层次关系，通过
* 这种层次关系才可以直观的看出这些节点之间的关系，决定这种层次关系的最重要的两个要素是：
* 1、该叶节点在整个目录树中的层级深度，2、该叶节点是否属于末叶节点
* 对于这种层次关系，层次符号是最好的表现形式，层次符号可以用图片表示，也可以用文本表示，本目录树默认用文本层次符表示，主要的
* 符号有：├ │ └ 这三种，这三种符号也可由类似的图片代替
* 对于非末叶节点，其层次字符一定是"├" 或 N("│")+"├"，对于末叶节点，其层次字符一定是└开始
* 从以下示例目录树中可以看出一定规律：

├网站管理系统
├用户管理
│ ├A组用户管理
│ ├B组用户管理
│ └C组用户管理
├栏目管理
│ ├A组栏目管理
│ ├B组栏目管理
│ │ ├集团用户管理
│ │ ├公司用户管理
│ │ │ ├员工管理
│ │ │ ├制度管理
│ │ │ └工资管理
│ │ └私人用户管理
│ │     ├金牌用户
│ │     ├银牌用户
│ │     ├铜牌用户
│ │     └一般用户
│ └C组栏目管理
└论坛管理
    ├A分论坛管理
│ ├精华帖管理
│ ├一般贴管理
│ │ ├管理员
│ │ ├二级会员
│ │ ├三级会员
│ │ └普通会员
│ └垃圾帖管理
│    ├过滤字符
│    ├过滤地名
│    ├过滤人名
│    └过滤网址
    ├B分论坛管理
    └C分论坛管理

调用说明
var tree=new CTree();
tree.add(1,0,'网站管理系统','#',null);
tree.add(2,0,'用户管理','#',null);
tree.add(5,2,'A组用户管理','#',null);
tree.add(6,2,'B组用户管理','#',null);
tree.add(7,2,'C组用户管理','#',null);
tree.add(3,0,'栏目管理','#',null);
tree.add(8,3,'A组栏目管理','#',null);
tree.show();
即可显示整个目录树
*/

//定义树形节点对象
//--------------------------------------------------------------
function Node(did,pid,nodeText,nodeLink,linkTarget){
this.did=did||0;
this.pid=pid||0;
this.nodeText=nodeText||null;
this.nodeLink=nodeLink||null;
this.linkTarget=linkTarget||null;
}
//--------------------------------------------------------------
//定义目录树对象
function CTree(){
this.nodeList=[];//节点集合
this.sortedList=[];//顺序调整之后的节点列表
this.nodeHTMList=[];//节点HTML集合
}
//添加节点
CTree.prototype.add = function(did,pid,nodeText,nodeLink,linkTarget){
var node=new Node(did,pid,nodeText,nodeLink,linkTarget);
this.nodeList[this.nodeList.length]=node;
}
//输出格式化之后的目录树
CTree.prototype.getTreeHTML = function(){
return this.nodeHTMList;
}
//获取顺序调整之后的节点列表
CTree.prototype.getSortedList = function(){
return this.sortedList;
}
//输出目录树主要方法
CTree.prototype.draw = function(){
document.write(this.getNodeHTML(new Node()));
}
//求出某个叶节点是否属于末叶节点
CTree.prototype.isLastChild = function(node){
if(!this.isValidNode(node)) return false;

var pNode=this.getNode(node.pid);
if(pNode==null) pNode=new Node();//表示父节点为根节点

var tmpNodeList=this.getChildNodes(pNode);
if(tmpNodeList==null||tmpNodeList.length==0) return false;

var isLast=true;
for(var i=0;i<tmpNodeList.length;i++){
  if(tmpNodeList[i].did>node.did){
   isLast=false;
   break;
  }
}

return isLast;
}
//获取某个节点
CTree.prototype.getNode = function(did){
if(did<=0) return null;

return true;
}
//获取层次符号采用递归
CTree.prototype.getRankDesc = function(node){
if(!this.isValidNode(node)) return '';

var pNode=this.getNode(node.pid);
if(pNode==null) return '';

var rankDesc='';
var isLast=this.isLastChild(pNode);
if(isLast){
rankDesc='　　'+rankDesc;
}else{
rankDesc='│　'+rankDesc;
}
rankDesc=this.getRankDesc(pNode)+rankDesc;

return rankDesc;
}
CTree.prototype.sort =function(tmpNodeList){
if(tmpNodeList==null||tmpNodeList.length==0) return tmpNodeList;

var tmpDID=0;
for(var i=0;i<tmpNodeList.length;i++){
tmpDID=tmpNodeList[i].did;
}
}
//输出目录树采用递归
CTree.prototype.getNodeHTML = function(node){
var tmpNodeList=this.getChildNodes(node);
if(tmpNodeList.length==0) return '';

//-------------------------------------------------

var tree=new CTree();
tree.add(1,0,'网站管理系统','#',null);
tree.add(2,0,'用户管理','#',null);
tree.add(5,2,'A组用户管理','#',null);
tree.add(6,2,'B组用户管理','#',null);
tree.add(7,2,'C组用户管理','#',null);
tree.add(3,0,'栏目管理','#',null);
tree.add(8,3,'A组栏目管理','#',null);
tree.add(9,3,'B组栏目管理','#',null);
tree.add(10,9,'集团用户管理','#',null);
tree.add(11,9,'公司用户管理','#',null);
tree.add(20,11,'员工管理','#',null);
tree.add(21,11,'制度管理','#',null);
tree.add(22,11,'工资管理','#',null);
tree.add(12,9,'私人用户管理','#',null);
tree.add(23,12,'金牌用户','#',null);
tree.add(24,12,'银牌用户','#',null);
tree.add(42,24,'过滤网址','#',null);
tree.add(43,24,'过滤网址','#',null);
tree.add(25,12,'铜牌用户','#',null);
tree.add(26,12,'一般用户','#',null);
tree.add(13,3,'C组栏目管理','#',null);
tree.add(4,0,'论坛管理','#',null);
tree.add(14,4,'A分论坛管理','#',null);
tree.add(17,14,'精华帖管理','#',null);
tree.add(18,14,'一般贴管理','#',null);
tree.add(27,18,'管理员','#',null);
tree.add(28,18,'二级会员','#',null);
tree.add(29,18,'三级会员','#',null);
tree.add(30,18,'普通会员','#',null);
tree.add(19,14,'垃圾帖管理','#',null);
tree.add(31,19,'过滤字符','#',null);
tree.add(32,19,'过滤地名','#',null);
tree.add(33,19,'过滤人名','#',null);
tree.add(34,19,'过滤网址','#',null);
tree.add(35,34,'过滤网址','#',null);
tree.add(36,34,'过滤网址','#',null);
tree.add(38,36,'过滤网址','#',null);
tree.add(39,36,'过滤网址','#',null);
tree.add(37,34,'过滤网址','#',null);
tree.add(40,37,'过滤网址','#',null);
tree.add(41,37,'过滤网址','#',null);
tree.add(15,4,'B分论坛管理','#',null);
tree.add(16,4,'C分论坛管理','#',null);
tree.add(44,16,'过滤网址','#',null);
tree.add(45,16,'过滤网址','#',null);
tree.draw();

//
var optionList=tree.getTreeHTML();
var sortedList=tree.getSortedList();
//var treeControl=document.getElementById("selTree");
for(var i=0;i<optionList.length;i++){
var op=new Option();
selTree.options.add(op);
op.innerText=optionList[i];
op.value=sortedList[i].did;
if(i==10){
op.selected=true;
}
}
selTree.οnchange=function(){
//alert(this.options[this.selectedIndex].value);
}
</script>