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自动填充实现无限级分类的方法,是 ...
随机推荐
- ubuntu终端颜色配置
对于刚接触ubuntu的同学们,打开终端(ctrl+alt+T),会发现里面都是一个颜色,不管是用户名.主机名还是命令都是白色,当然,用 ls 列出文件的时候是会多一种颜色的.即使这样,对开发人员来说 ...
- linux 上下文切换带来的影响
1.保存CPU寄存器中的内容 2.CPU高速缓存中的内容失效 3.重新装载页表,用于给线程程安装一个新的虚拟地址空间,页表缓存失效
- UVa 1151 (枚举 + MST) Buy or Build
题意: 平面上有n个点,现在要把它们全部连通起来.现在有q个套餐,如果购买了第i个套餐,则这个套餐中的点全部连通起来.也可以自己单独地建一条边,费用为两点欧几里得距离的平方.求使所有点连通的最小费用. ...
- MenuInflater用法
MenuInflater是用来加载menu布局文件的. 与LayoutInflater类似,应用程序运行时会预先加载资源中的布局文件,如果Menu布局中的资源比较多,会影响性能,所以可以选择MenuI ...
- SharePoint 2010 master page 控件介绍(1)
转:http://blog.csdn.net/lgm97/article/details/6409204 以下所有的内容都是根据Randy Drisgill (MVP SharePoint Serve ...
- Java序列化 如何把多个对象存储在一个文件中
/** * 用于保存模板文件,内容包括: * 1,标志位,1 int * 2,版本 1 int * 3,数据头长度 1 int * 4,预留数据头空间 5120 byte * 5,后续数据长度 ...
- HDU 5701 中位数计数 暴力
老题了,附上黄学长链接一发,直接改改就AC了,http://hzwer.com/1216.html #include <cstdio> #include <iostream> ...
- OWC控件的使用
环境:SQL Server 2005 Analysis Services + OWC 1.1 +Win 7 准备: 1.在SQL Server 2005 Analysis Services建好ola ...
- leetcode@ [127] Word Ladder (BFS / Graph)
https://leetcode.com/problems/word-ladder/ Given two words (beginWord and endWord), and a dictionary ...
- IP查找工具——angry IP Scanner
作用] 若树莓派没有屏幕可通过该工具查找树莓派的IP地址.例如下图的树莓派IP地址可能为192.168.1.107. 图1 IP scan查找树莓派IP地址