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实现？
...全文
564 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递归查询分类及分类下所有子分类
代码走起：1.jsp页面布局样式这里不再介绍，js业务逻辑展示分类树形结构如下：/** * 商品分类操作 */ /** * 初始化 */ $(function(){ //加载树 reloadTree(); }); }); /** * 加载树 */ function ...
MeterSphere接口测试响应提取：JSONPath与正则表达式全指南
在现代接口自动化测试中，响应数据提取是实现流程自动化的核心环节。你是否曾面临以下挑战： - 从复杂JSON响应中精准定位嵌套字段 - 处理动态变化的响应结构导致提取规则失效 - 正则表达式调试耗时且容易出错 - 跨...
创建Maven分布式前台系统架构，写出京动态导航，跨域返Json数据
如果我们要从protal-front里面获取json数据是没有问题，但是我们现在要从protal-rest中获取json数据。所以我们就可以使用ajax请求去调用服务器的数据。 这样就会出现跨域访问的问题 Failed to load ...
爬虫：Ajax数据爬取
目录 1、什么是Ajax 1.1 实例的引入 1.2 基本原理 2、Ajax分析方法 1、查看请求 ...我们在用 requests 抓取页面的时候，得到的结果可能和在浏览器中看到的不一样：在...JavaScript 处理数据后生成的结果，这些数据的.
JavaScript、jQuery与Ajax的关系
原文链接 简单总结： javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供...2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页
JavaScript

87,991

社区成员

224,687

社区内容

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

加载中

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

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

+ 用AI写文章