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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
js实现导航吸顶效果
Feb 24 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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 mysql数据库操作类
2008/06/04 PHP
第五章 php数组操作
2011/12/30 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
应聘美工求职信
2013/11/07 职场文书
求职推荐信范文
2013/12/01 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
普通话演讲稿
2014/09/03 职场文书
会计人员演讲稿
2014/09/11 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
委托书英文
2015/01/28 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书