js根据json数据，递归拼接htm代码问题!

马肠河 2012-10-26 04:33:22
数据结构如下：
var zNodes=[

{id:1,pId:0;name:"A"},

{id:11,pId:1;name:"A1"},

{id:12,pId:1;name:"A2"},

{id:13,pId:1;name:"A3"}，

{id:2,pId:0;name:"B"},

{id:21,pId:2;name:"B1"},

{id:22,pId:2;name:"B2"},

{id:23,pId:2;name:"B3"},

{id:3,pId:0;name:"C"},

{id:31,pId:3;name:"C1"},

{id:32,pId:3;name:"C2"},

{id:33,pId:3;name:"C3"}  

]
，pID如果等于id，那么前者就是后者的子节点；
我想要利用这些数据的结构拼接成如下的html字符串：


<ul>

<li><a href="#">A</a>

 <ul>

 <li><a href="#">A</a></li>

 <li><a href="#">A</a></li>

 <li><a href="#">A</a></li>

 </ul>

</li>

<li><a href="#">B</a>

 <ul>

 <li><a href="#">B</a></li>

 <li><a href="#">B</a></li>

 <li><a href="#">B</a></li>

 </ul>

</li>

<li><a href="#">C</a>

 <ul>

 <li><a href="#">C</a></li>

 <li><a href="#">C</a></li>

 <li><a href="#">C</a></li>

 </ul>

</li>

</ul>
，每个节点都要不确定的子孙节点，各位哥哥，怎么用js实现？
...全文
569 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
s2_2014_2s 2015-04-20
  • 打赏
  • 举报
 回复
有treeMenu，需要导入什么js文件吗？
gywyb 2012-10-26
  • 打赏
  • 举报
 回复
解决多级的问题，以下是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title></title>
<script type="text/javascript">
window.onload = loadMenu;
function loadMenu() {
var zNodes = [
{ id: 1, pId: 0, name: "A" },
{ id: 11, pId: 1, name: "A1" },
{ id: 12, pId: 1, name: "A2" },
{ id: 13, pId: 1, name: "A3" },
{ id: 111, pId: 11, name: "A111" },
{ id: 1112, pId: 111, name: "A1112" },
{ id: 121, pId: 12, name: "A21" },
{ id: 2, pId: 0, name: "B" },
{ id: 21, pId: 2, name: "B1" },
{ id: 3, pId: 0, name: "C" },
{ id: 31, pId: 3, name: "C1" },
{ id: 32, pId: 3, name: "C2" }
];

var menuStr = '';
menuStr = menuFunction(zNodes, 0, menuStr, 0);
if (menuStr != '') {
menuStr = '<ul>' + menuStr + '</ul>';
document.getElementById('menu').innerHTML = menuStr;
}
}
//递归生成菜单
var menuFunction = function (zNodes, num, menuStr, pid) {
if (num == (zNodes.length)) {
return menuStr;
} else {
var codeStr = '';
for (var i = num; i < zNodes.length; i++) {
if (pid == zNodes[i].pId) {
codeStr += '<li><a href="#">';
codeStr += zNodes[i].name;
codeStr += '</a>';
if (IsChild(zNodes[i].id, zNodes)) {
codeStr += '<ul>' + menuFunction(zNodes, (i + 1), '', zNodes[i].id) + '</ul>';
}
codeStr += '</li>';
}
}
return menuStr += codeStr;
}
};
//验证是否存在子项
var IsChild = function (id, zNodes) {
var isPass = false;
for (var i = 0; i < zNodes.length; i++) {
if (id == zNodes[i].pId && !isPass) {
isPass = true;
break;
}
}
return isPass;
}
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
我还需要多多学习，day day up!谢谢老哥哥了！[Quote=引用 15 楼 的回复:]

分组方法可以写得稍简化些，效果是一样的
JScript code
group:function(){
for(var i=0;i<this.tree.length;i++){
this.groups[this.tree[i].pId]=this.groups[this.tree[i].pId]||[];
this.groups[……
[/Quote]
泡泡鱼_ 2012-10-26
  • 打赏
  • 举报
 回复
分组方法可以写得稍简化些，效果是一样的
group:function(){

        for(var i=0;i<this.tree.length;i++){

            this.groups[this.tree[i].pId]=this.groups[this.tree[i].pId]||[];

            this.groups[this.tree[i].pId].push(this.tree[i]);

        }

},
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
哈哈，I want you!老哥哥出马，一个顶俩！[Quote=引用 12 楼 的回复:]

JScript code
var zNodes=[
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
……
[/Quote]
泡泡鱼_ 2012-10-26
  • 打赏
  • 举报
 回复
修正一下，这样效率高点，省得N次去遍历原节点数组，先一次遍历将其归类好，然后直接调用就可以了


var zNodes=[

    {id:1,pId:0,name:"A"},

    {id:11,pId:1,name:"A1"},

    {id:12,pId:1,name:"A2"},

    {id:13,pId:1,name:"A3"},

    {id:2,pId:0,name:"B"},

    {id:21,pId:2,name:"B1"},

    {id:22,pId:2,name:"B2"},

    {id:23,pId:2,name:"B3"},

    {id:3,pId:0,name:"C"},

    {id:31,pId:3,name:"C1"},

    {id:32,pId:3,name:"C2"},

    {id:33,pId:3,name:"C3"},

    {id:34,pId:31,name:"x"},

    {id:35,pId:31,name:"y"},  

    {id:36,pId:31,name:"z"}    

];

function treeMenu(a){

    this.tree=a||[];

    this.groups={};

};

treeMenu.prototype={

    init:function(pid){

        this.group();

        return this.getDom(this.groups[pid]);

    },

    group:function(){

        for(var i=0;i<this.tree.length;i++){

            if(this.groups[this.tree[i].pId]){

                this.groups[this.tree[i].pId].push(this.tree[i]);

            }else{

                this.groups[this.tree[i].pId]=[];

                this.groups[this.tree[i].pId].push(this.tree[i]);

            }

        }

    },

    getDom:function(a){

        if(!a){return ''}

        var html='\n<ul>\n';

        for(var i=0;i<a.length;i++){

            html+='<li><a href="#">'+a[i].name+'</a>';

            html+=this.getDom(this.groups[a[i].id]);

            html+='</li>\n';

        };

        html+='</ul>\n';

        return html;

    }

};

var html=new treeMenu(zNodes).init(0);

alert(html);
泡泡鱼_ 2012-10-26
  • 打赏
  • 举报
 回复 
var zNodes=[

    {id:1,pId:0,name:"A"},

    {id:11,pId:1,name:"A1"},

    {id:12,pId:1,name:"A2"},

    {id:13,pId:1,name:"A3"},

    {id:2,pId:0,name:"B"},

    {id:21,pId:2,name:"B1"},

    {id:22,pId:2,name:"B2"},

    {id:23,pId:2,name:"B3"},

    {id:3,pId:0,name:"C"},

    {id:31,pId:3,name:"C1"},

    {id:32,pId:3,name:"C2"},

    {id:33,pId:3,name:"C3"},

    {id:34,pId:31,name:"x"},

    {id:35,pId:31,name:"y"},  

    {id:36,pId:31,name:"z"}    

];

function treeMenu(a){

    this.tree=a||[];

};

treeMenu.prototype={

    init:function(pid){

        return this.getDom(this.grep(pid));

    },

    grep:function(pid){

        if(this.tree.length==0){return []}

        var arr=[];

        for(var i=0;i<this.tree.length;i++){

            if(this.tree[i].pId==pid){

                arr.push(this.tree[i]);

            }

        };

        return arr;

    },

    getDom:function(a){

        if(a.length==0){return ''}

        var html='\n<ul>\n';

        for(var i=0;i<a.length;i++){

            html+='<li><a href="#">'+a[i].name+'</a>';

            html+=this.getDom(this.grep(a[i].id));

            html+='</li>\n';

        };

        html+='</ul>\n';

        return html;

    }

};



var html=new treeMenu(zNodes).init(0);

alert(html);
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
是啊。上面的几个哥们都不符合要求，帮忙弄一个吧？我搞了半天没弄出来啊！[Quote=引用 8 楼 的回复:]

递归 方法，可以解决！
[/Quote]
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
就是要这个递归方法啊。我写了半天，还是没写出来。哥哥帮忙给你弄一个？上面的几个哥哥都不符合要求哦！[Quote=引用 9 楼 的回复:]

+1如果要多层，那就写一个递归的方法吧。引用 5 楼 的回复:

上HTML代码 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8" />
<meta http-equiv="x-ua-compat……
[/Quote]
licip 2012-10-26
  • 打赏
  • 举报
 回复
+1如果要多层，那就写一个递归的方法吧。[Quote=引用 5 楼 的回复:]

上HTML代码 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
……
[/Quote]
fwacky 2012-10-26
  • 打赏
  • 举报
 回复
递归 方法，可以解决！
我就是个打字的 2012-10-26
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

上HTML代码 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
……
[/Quote]
不错，学习了
gywyb 2012-10-26
  • 打赏
  • 举报
 回复
上HTML代码 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html,charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title></title>
<script type="text/javascript">
window.onload = loadMenu;
function loadMenu() {
var zNodes = [{ id: 1, pId: 0, name: "A" },
{ id: 11, pId: 1, name: "A1" },
{ id: 12, pId: 1, name: "A2" },
{ id: 13, pId: 1, name: "A3" },
{ id: 2, pId: 0, name: "B" },
{ id: 21, pId: 2, name: "B1" },
{ id: 22, pId: 2, name: "B2" },
{ id: 23, pId: 2, name: "B3" },
{ id: 3, pId: 0, name: "C" },
{ id: 31, pId: 3, name: "C1" },
{ id: 32, pId: 3, name: "C2" },
{ id: 33, pId: 3, name: "C3"}];
var menuStr = '';
for (var i = 0; i < zNodes.length; i++) {
if (zNodes[i].pId == 0) {
menuStr += '<li><a href="#">';
menuStr += zNodes[i].name;
menuStr += '</a>';
var childrenStr = '';
for (var j = 0; j < zNodes.length; j++) {
if (zNodes[j].pId == zNodes[i].id) {
childrenStr += '<li><a href="#">';
childrenStr += zNodes[j].name;
childrenStr += '</a>';
childrenStr += '</li>';
}
}

if (childrenStr != '') {
menuStr += '<ul>';
menuStr += childrenStr;
menuStr += '</ul>';
}
menuStr += '</li>';
}
}

if (menuStr != '') {
menuStr = '<ul>' + menuStr + '</ul>';
document.getElementById('menu').innerHTML = menuStr;
}
}
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
如果有三级呢？子节点里面还有子节点？不是固定的！[Quote=引用 2 楼 的回复:]

你的json格式错了，{id:1,pId:0;name:"A"}=>{id:1,pId:0,name:"A"}

案例如下：
HTML code

<ul id="result"></ul>


JScript code

window.onload = function () {
var zNodes = [{ id: 1, pId: 0, name: "A……
[/Quote]
w290601645 2012-10-26
  • 打赏
  • 举报
 回复
你的json格式错了，{id:1,pId:0;name:"A"}=>{id:1,pId:0,name:"A"}

案例如下：


<ul id="result"></ul>





window.onload = function () {

            var zNodes = [{ id: 1, pId: 0, name: "A" }, { id: 11, pId: 1, name: "A1" }, { id: 12, pId: 1, name: "A2" }, { id: 13, pId: 1, name: "A3" },

            { id: 2, pId: 0, name: "B" }, { id: 21, pId: 2, name: "B1" }, { id: 22, pId: 2, name: "B2" }, { id: 23, pId: 2, name: "B3" },

            { id: 3, pId: 0, name: "C" }, { id: 31, pId: 3, name: "C1" }, { id: 32, pId: 3, name: "C2" }, { id: 33, pId: 3, name: "C3"}];



            var j = eval(zNodes);



            var cNode = "";

            for (var i = 0, len = j.length; i < len; i++) {

                if (j[i].pId == "0") {  //追加根节点

                    if (cNode.length > 0) {

                        $("#" + j[i-1].pId).append('<ul>' + cNode + '</ul>');

                        cNode = "";

                    }

                    $("#result").append('<li id=' + j[i].id + '><a href="#">' + j[i].name + '</a>');

                }

                else { //追加子节点

                    cNode += '<li><a href="#">' + j[i].name + '</a></li>';

                }

            }

        }
马肠河 2012-10-26
  • 打赏
  • 举报
 回复
上面给的json数据有一个‘，’用成中文的了，小心！
java递归查询分类及分类下所有子分类
该案例是实际开发中运用，java递归查询分类及分类下所有子分类。代码走起：1.jsp页面布局样式这里不再介绍，js业务逻辑展示分类树形结构如下：/** * 商品分类操作 */ /** * 初始化 */ $(function(){ //加载树 reloadTree(); }); }); /** * 加载树 */ function reloadTree(){ ...
MeterSphere接口测试响应提取：JSONPath与正则表达式全指南
在现代接口自动化测试中，响应数据提取是实现流程自动化的核心环节。你是否曾面临以下挑战： - 从复杂JSON响应中精准定位嵌套字段 - 处理动态变化的响应结构导致提取规则失效 - 正则表达式调试耗时且容易出错 - 跨请求参数传递时的格式转换问题 MeterSphere作为一站式开源持续测试平台，提供了JSONPath与正则表达式两种强大的响应提取机制。本文将深入剖析这两种技术的实现原理、使用场景与...
创建Maven分布式前台系统架构，写出京动态导航，跨域返Json数据
前台系统架构 分层的架构有什么好处： 有利于系统的维护，扩展。 分层的结构是按照功能细化，细化之后就能够分布式的部署。 灵活性 前台系统与服务层可以分离 开发团队可以分开，提高开发效率 缺点： 服务器之间需要使用接口进行通信，开发的工作量提高 前台系统可以分为两部分： 服务层的web工程 功能就是发布服务 表现层：负责展现页面，没有业务逻辑，所有的业务就是调用服务层的服务 搭建服务p...
爬虫：Ajax数据爬取
目录 1、什么是Ajax 1.1 实例的引入 1.2 基本原理 2、Ajax分析方法 1、查看请求 2、过滤请求 3、Ajax结果提取 1、分析请求 2、分析响应 3、例子 我们在用 requests 抓取页面的时候，得到的结果可能和在浏览器中看到的不一样：在浏览器中可以看到正常显示的页面数据，但是使用 requests 得到的结果并没有， 这是因为 requests 获取的 都是原始的 HTML 文档，而浏览器中的页面则是经过 JavaScript 处理数据后生成的结果，这些数据的.
JavaScript、jQuery与Ajax的关系
原文链接 简单总结： javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）,Ajax是利用了一系列相关的技术其中就包括javascript。一个是语言,一个是技术,两者有本质区别 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页
JavaScript

87,992

社区成员

224,685

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章