根据若干条路径把它构造成能生成JQuery的Tree的json数据 本帖最后由 fun913510024 于 2013-06-28 19:55:21 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 实现了你的需求, 不过有了一点点改变——用的是 zTree : http://www.ztree.me/v3/demo.php#_102zTree算是最简易好用的树吧。此外用的是里面的 [最简单的树 -- 简单 JSON 数据] —— 只需要 id, pId, name 就好, 没有你搞得那么复杂。下面的Demo加多了一行数据, 便于测试不规则数据情况。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="zTree3.5/js/jquery.ztree.core-3.5.min.js"></script> <link href="zTree3.5/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script type="text/javascript"> var arr = [ "/sys", "/sys/aaa", "/sys/bbb", "/sys/aaa/ccc", "/sys/aaa/ddd", "/sys/bbb/ccc", "/sys/bbb/ddd", "/sys/bbb/ccc/eee", "/sys/aaa/ggg" ]; var oldArr = []; //1. 将所有数据以父名称、自己名称、深度3个属性加入到数组 for (var i=0, len=arr.length;i<len;i++) { var nodeArr = arr[i].split("/"); var obj = { pname: nodeArr[nodeArr.length - 2], name: nodeArr[nodeArr.length - 1], depth: nodeArr.length-1 }; oldArr.push(obj); } //排序. //下面的不行, 哪位高手帮忙改改. 不过不排序也没有关系吧。 //oldArr.sort(function (a, b) { // a.depth > b.depth?1:-1; //}); //for (var i = 0, len = oldArr.length; i < len; i++) { // document.write(oldArr[i].name+""+oldArr[i].depth+"<br>"); //} //2. 依次将所有元素赋上id var depth = 0; for (var i = 0, len = oldArr.length; i < len; i++) { depth++; for (var k = 0; k < oldArr.length; k++) { if (oldArr[k].depth == depth && typeof (oldArr[k].isFlag) == "undefined") { //查找所有同深度的元素,加1为其id值(前面还要加上深度) var sum = 1; for (var j = 0; j < oldArr.length; j++) { if (oldArr[j].depth == oldArr[k].depth && oldArr[j].isFlag === true) { sum++; } } oldArr[k].id = depth + "_" + sum; oldArr[k].isFlag = true; } } } //3. 依次给元素赋上父id for (var i = 0, len = oldArr.length; i < len; i++) { if (oldArr[i].depth == 1) { oldArr[i].pId = "00"; continue; } for (var j = 0; j < oldArr.length; j++) { if (oldArr[j].depth+1 == oldArr[i].depth && oldArr[j].name == oldArr[i].pname) { oldArr[i].pId = oldArr[j].id; } } } //---------------------- zTree 设置与初始化 -------------------------- var setting = { data: { simpleData: { enable: true } } }; $(function () { $.fn.zTree.init($("#treeDemo"), setting, oldArr); }); </script></head><body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div></body></html>效果图: @ #1,请问ztree可以增加和删除节点(可以删除非叶子节点么)么,可以加入checkbox么?谢谢 我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右! 我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右!刚刚在网上看到了,试着用了下,确实方便好用,功能也是很强大,感谢 yenange 我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右!刚刚在网上看到了,试着用了下,确实方便好用,功能也是很强大,感谢 yenange 那就给分结贴吧, 呵呵,我刚也去看了下也确实觉得蛮不错的,以后再用tree 也选择这个了,基本上的需求都能够满足。 怎么设置outlook啊? 图片加载的脚步函数为什么不能运行? 添加方法问题 javascript右下角弹窗,弹窗数量无上限问题。 高分求:判断数字尾数是否为3,4的正则表达式 隐藏问题 请大虾帮我看看 能不能用js写一个类似于word的公式编辑器? 请问 DHTML 对象模型是什么 急、急啊!请各位大虾快快帮助解决!!!! 在线等,请高手给个正则. extjs4的define方法中怎么实现load事件,请进
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="zTree3.5/js/jquery.ztree.core-3.5.min.js"></script>
<link href="zTree3.5/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script type="text/javascript">
var arr = [
"/sys",
"/sys/aaa",
"/sys/bbb",
"/sys/aaa/ccc",
"/sys/aaa/ddd",
"/sys/bbb/ccc",
"/sys/bbb/ddd",
"/sys/bbb/ccc/eee",
"/sys/aaa/ggg"
];
var oldArr = [];
//1. 将所有数据以父名称、自己名称、深度3个属性加入到数组
for (var i=0, len=arr.length;i<len;i++) {
var nodeArr = arr[i].split("/");
var obj = { pname: nodeArr[nodeArr.length - 2], name: nodeArr[nodeArr.length - 1], depth: nodeArr.length-1 };
oldArr.push(obj);
}
//排序.
//下面的不行, 哪位高手帮忙改改. 不过不排序也没有关系吧。
//oldArr.sort(function (a, b) {
// a.depth > b.depth?1:-1;
//});
//for (var i = 0, len = oldArr.length; i < len; i++) {
// document.write(oldArr[i].name+""+oldArr[i].depth+"<br>");
//}
//2. 依次将所有元素赋上id
var depth = 0;
for (var i = 0, len = oldArr.length; i < len; i++) {
depth++;
for (var k = 0; k < oldArr.length; k++) {
if (oldArr[k].depth == depth && typeof (oldArr[k].isFlag) == "undefined") {
//查找所有同深度的元素,加1为其id值(前面还要加上深度)
var sum = 1;
for (var j = 0; j < oldArr.length; j++) {
if (oldArr[j].depth == oldArr[k].depth && oldArr[j].isFlag === true) {
sum++;
}
}
oldArr[k].id = depth + "_" + sum;
oldArr[k].isFlag = true;
}
}
}
//3. 依次给元素赋上父id
for (var i = 0, len = oldArr.length; i < len; i++) {
if (oldArr[i].depth == 1) {
oldArr[i].pId = "00";
continue;
}
for (var j = 0; j < oldArr.length; j++) {
if (oldArr[j].depth+1 == oldArr[i].depth && oldArr[j].name == oldArr[i].pname) {
oldArr[i].pId = oldArr[j].id;
}
}
}
//---------------------- zTree 设置与初始化 --------------------------
var setting = {
data: {
simpleData: {
enable: true
}
}
};
$(function () {
$.fn.zTree.init($("#treeDemo"), setting, oldArr);
});
</script>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
效果图:
我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右!
我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右!刚刚在网上看到了,试着用了下,确实方便好用,功能也是很强大,感谢 yenange
我给你的地址: http://www.ztree.me/v3/demo.php#_102你都没有仔细看吧? 增加节点、checkbox树这都是最简单的功能而已, 还有异步加载、radio树、拖拽等强大好用的功能, 远远超过了一般树插件zTree 的功能,其强大丰富与简单好用, 我敢说国内国外还没有哪个能出其右!刚刚在网上看到了,试着用了下,确实方便好用,功能也是很强大,感谢 yenange
那就给分结贴吧,