JS无限树状列表实现代码


Posted in Javascript onJanuary 11, 2011

tree.js

/******************************** 
树形组织框架列表 
v1.0 
2011年1月6日 
作者:flycrosscloud 
********************************/ 
//初始化框架 
var allImages = { 
HasNodeClose: "<img src='image/ftv2pnode.gif'/>", //包含子节点,闭合状态(不是最后一个) 
HasNodeOpen: "<img src='image/ftv2mnode.gif'/>", //包含子节点,打开状态(不是最后一个) 
LastHasNodeClose: "<img src='image/ftv2plastnode.gif'/>", //包含子节点,闭合状态(最后一个) 
LastHasNodeOpen: "<img src='image/ftv2mlastnode.gif'/>", //包含子节点,打开状态(最后一个) 
CommonNode: "<img src='image/ftv2node.gif'/>", //不包含子节点,普通节点(不是最后一个) 
LastCommonNode: "<img src='image/ftv2lastnode.gif'/>", //不包含子节点,普通节点(最后一个) 
NodeLine: "<img src='image/ftv2vertline.gif'/>", //节点间连线 
NodeClose: "<img src='image/department.gif'/>", //节点关闭状态 
NodeOpen: "<img src='image/departmentopen.gif'/>", //节点打开状态 
NodeBlank: "<img src='image/ftv2vertlineblank.gif'/>"//空白连线 
}; 
$(function () 
{ 
$.post("http://localhost/system/asmx/wsTree.asmx/HelloWorld", function (data) { InitTree(data); }); 
}); 
function InitTree(org_data) 
{ 
var org = eval("(" + org_data + ")"); 
drawtree(org, 1, "", "#nodeTree"); 
$("#nodeTree img").bind("click", function (event) 
{ 
$(this).parent().find("ul").toggle(); }); 
} 
function drawtree(org, s, pPreLine, ulname) 
{ 
var orgLength = org.length; 
var PreLine; 
var count = s; 
for (var i = 0; i < orgLength; i++) 
{ 
var NodeImg = allImages.NodeClose; //项目前图标 
var PreNodeLine; //项目图标前连线 
//确定项目前图标 
if (org[i].ChildUnits != null)//如果包含子节点 
{ 
NodeImg = allImages.NodeOpen; 
} 
//确定图形前连线 
if ((org[i].ChildUnits != null) && (i == orgLength - 1)) 
{ 
//包含子节点并且是本层最后一个节点 
PreNodeLine = allImages.LastHasNodeOpen; 
} 
if ((org[i].ChildUnits == null) && (i == orgLength - 1)) 
{ 
//不包含子节点并且是本层最后一个节点 
PreNodeLine = allImages.LastCommonNode; 
} 
if ((org[i].ChildUnits != null) && (i != orgLength - 1)) 
{ 
//包含子节点并且不是本层最后一个节点 
PreNodeLine = allImages.HasNodeOpen; 
} 
if ((org[i].ChildUnits == null) && (i != orgLength - 1)) 
{ 
//不包含子节点并且不是本层最后一个节点 
PreNodeLine = allImages.CommonNode; 
} 
if (i == orgLength - 1) 
{ 
PreLine = pPreLine + allImages.NodeBlank; 
} 
else 
{ 
PreLine = pPreLine + allImages.NodeLine; 
} 
var temp = $("<li>" + pPreLine + PreNodeLine + NodeImg + "<a href='#'>" + org[i].unit_name + "</a></li>"); 
$(ulname).append(temp); 
if (org[i].ChildUnits != null) 
{ 
temp.append("<ul></ul>"); 
var content = temp.find("ul"); 
drawtree(org[i].ChildUnits, count + 1, PreLine,content ); 
} 
} 
}

tree.css
li 
{ 
vertical-align: middle; 
font-size: 16px; 
display: block;line-height: 22px;list-style-type: none;height: 22px;padding: 0px; margin:0px; 
} 
ul a 
{ 
height:22px; 
line-height:22px; 
color:#123231; 
text-decoration:none; 
} 
ul 
{ 
list-style-type:none; 
padding:0px; 
margin:0px; 
} 
img 
{ 
vertical-align:middle; 
cursor:pointer; 
} 
* 
{ 
padding:0px; 
margin:0px; 
}

test.htm
<html> 
<head> 
<link href="tree.css" rel="stylesheet" type="text/css" /> 
<script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="tree.js" type="text/javascript"></script> 
</head> 
<body> 
<ul id="nodeTree"> 
</ul> 
</body> 
</html>

测试数据格式(json)
[{"unit_id":1,"unit_name":"一级","father_unit_id":0,"ChildUnits":[{"unit_id":2,"unit_name":"二级","father_unit_id":1,"ChildUnits":[{"unit_id":3,"unit_name":"三级1","father_unit_id":2,"ChildUnits":[{"unit_id":6,"unit_name":"四级1","father_unit_id":3,"ChildUnits":null},{"unit_id":7,"unit_name":"四级2","father_unit_id":3,"ChildUnits":null}]},{"unit_id":4,"unit_name":"三级2","father_unit_id":2,"ChildUnits":[{"unit_id":8,"unit_name":"四级3","father_unit_id":4,"ChildUnits":null},{"unit_id":9,"unit_name":"四级4","father_unit_id":4,"ChildUnits":null}]},{"unit_id":5,"unit_name":"三级3","father_unit_id":2,"ChildUnits":[{"unit_id":10,"unit_name":"四级5","father_unit_id":5,"ChildUnits":null},{"unit_id":11,"unit_name":"四级6","father_unit_id":5,"ChildUnits":null}]}]},{"unit_id":12,"unit_name":"二级2","father_unit_id":1,"ChildUnits":null}]}]

本人水平有限,这么个东东想了好几天才弄出来个半成品,还有一些问题没有解决,先放上来存着备忘,也望高手指点一二。
思路:
使用嵌套<ul>标签实现,每一级用一个<ul>,有下级节点的用<li>嵌套<ul>,递归实现。刚开始全部都用<li>做成了,可发现要实现隐显实在是太麻烦。
问题:
1、在IE下显示连线有断续,CSS不熟,没搞定,我自己感觉还凑合,就懒得再搞了,呵呵。
2、隐显时前置图片要变换,还没实现,不过我感觉问题不大。
后台代码就不放了,需要的请留言,其实也很简单,就是节点的递归排序麻烦点。
显示效果:

JS无限树状列表实现代码

Javascript 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 #Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 #Javascript
Jquery中获取iframe的代码
Jan 11 #Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 #Javascript
基于jquery的cookie的用法
Jan 10 #Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 #Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 #Javascript
You might like
php adodb介绍
2009/03/19 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
解析strtr函数的效率问题
2013/06/26 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php字符串截取函数用法分析
2014/11/25 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
销售实习自我鉴定
2013/12/07 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
优秀小学生家长评语
2014/01/30 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
犯错检讨书
2014/02/21 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫