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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
javascript实现雪花飘落效果
Aug 19 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相关资料
2006/10/09 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
喝酒检查书范文
2014/02/23 职场文书
社会实践活动总结
2015/02/05 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python