js 如何将无限级分类展示出来
这个需要运用递归。
案例:将数据以 ul li ul li形式展现在div中。
<div id="div"></div>
数据格式为json:
var data=[
{id:1, name:"信息1",
children :[{id:1, name:"信息1-1-1"},{id:1, name:"信息1-1-2",
children :[{id:1, name:"信息1-2-1"},{id:1, name:"信息1-2-2",
children :[{id:1, name:"信息1-3-1"},{id:1, name:"信息1-3-2"}]
}]
}]
},
{id:1, name:"信息2",
children :[{id:1, name:"信息2-1-1"},{id:1, name:"信息2-1-2",
children :[{id:1, name:"信息2-2-1"},{id:1, name:"信息2-2-2"}]
}]
}
];
函数:
function nodeHtml(data){
if(data.length > 0){
var _html = '<ul>';
for(var key in data) {
_html += '<li id="'+ data[key]['id'] +'">'+ data[key]['name'] +'</li>';
if(data[key]['children'] != undefined){
_html += nodeHtml(data[key]['children']);
}
}
_html += '</ul>';
return _html;
}
}
最后:
var html = nodeHtml(data);
$('#div').html(html);
显示样式:

js 如何将无限级分类展示出来的更多相关文章
- MVC无限级分类02,增删改查
继上一篇"MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射",本篇开始MVC无限级分类的增删改查部分,源码在github. 显示和查询 使用datagrid显 ...
- php无限级分类实战——评论及回复功能
经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很 ...
- (实用篇)PHP递归实现无限级分类
在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...
- PHP无限级分类-递归(不推荐)
[http://www.helloweba.com/view-blog-204.html] 在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢? ...
- C#无限级分类递归显示示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RoleDemo20150305 ...
- flex 布局 实现电商网页菜单的多级分类展示
用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上 ...
- vue 无限级分类导航
递归组件,实现无限级分类导航 https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84% ...
- PHP递归实现无限级分类
在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...
- ThinkPHP自动填充实现无限级分类的方法
这篇文章主要介绍了ThinkPHP自动填充实现无限级分类的方法,是ThinkPHP项目开发中非常实用的一个技巧,需要的朋友可以参考下 本文实例展示了ThinkPHP自动填充实现无限级分类的方法,是 ...
随机推荐
- linux 用grep匹配横线
file的内容如下: ADSFADSFSDFASDFJKJK----------------------------------------ADSFADSFSDFASDFJKJK----------- ...
- 1316. Electronic Auction(树状数组)
1316 我想说 要不要这么坑 WA了一个小时啊 ,都快交疯了,拿着题解的代码交都WA 最后很无语的觉得题解都错了 重读了N遍题意 发现没读错啊 难道写题解的那个人和我都想错了?? 最后把g++换个C ...
- poj2376
最少区间覆盖问题: 首先我们想到将r排序,则以得出dp方程 f[i]=1 (l[i]=1) =min{f[j]}+1 (r[j]+1>=l[i]) 最后ans是min{f[j]} (r[j]&g ...
- BZOJ3053: The Closest M Points
题解: 我们可以事先在堆里放入插入m个inf然后不断的比较当前值与堆首元素的大小,如果小于的话进入. 估计函数也可以随便写写... query的时候貌似不用保留dir... return 0写在 wh ...
- SHOI2008小约翰的游戏John
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1139 Solved: 701[Submit][ ...
- HAOI2007反素数
1053: [HAOI2007]反素数ant Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1346 Solved: 732[Submit][Sta ...
- vijos1049送给圣诞夜的礼品
这题犯了两个sb错误,写下来,为以后做个警告 一.mul过程中将k作为了循环变量 二.看错了题…… 题目中说是数到k行,而我却以为数k遍…… 做矩阵乘法,只要记住一句话:置换一定可以写成矩阵的形式! ...
- 【转】Cocos2d-x 程序是如何开始运行与结束的
转自:http://blog.leafsoar.com/archives/2013/05-05.html 题记:对于技术,我们大可不必挖得那么深,但一定要具备可以挖得很深的能力 问题的由来 怎么样使用 ...
- JavaEE基本了解
1. 为什么需要JavaEE 我们编写的JSP代码中,由于大量的显示代码和业务逻辑混淆在一起,彼此嵌套,不利于程序的维护和扩展.当业务需求发生变化的时候,对于程序员和美工都是一个很重的负担. 为了程 ...
- 别做操之过急的”无效将军”,做实实在在的”日拱一卒” zz
别做操之过急的”无效将军”,做实实在在的”日拱一卒” 前天在网上看到一句话很不错,拿来和大家分享,同时用我的“大叔”三观来解读这句话. 这句话是:“我们不需要操之过急的”无效将军”,我们需要实实在在的 ...