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 相关文章推荐
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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实现的二分查找算法实例分析
2017/12/19 PHP
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python小白垃圾回收机制入门
2020/06/09 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
运动会跳远广播稿5篇
2014/09/17 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
收费员岗位职责
2015/02/14 职场文书
捐款通知怎么写
2015/04/24 职场文书
六五普法学习心得体会
2016/01/21 职场文书
小学教师教学反思
2016/02/24 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Python爬虫实战之爬取携程评论
2021/06/02 Python