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自动填充实现无限级分类的方法,是 ...
随机推荐
- Hive 接口介绍(Web UI/JDBC)
Hive 接口介绍(Web UI/JDBC) 实验简介 本次实验学习 Hive 的两种接口:Web UI 以及 JDBC. 一.实验环境说明 1. 环境登录 无需密码自动登录,系统用户名shiyanl ...
- js控制元素的显示与隐藏
<body class="easyui-layout"> <div id = "centerId" data-options="re ...
- hdu4638Group
http://acm.hdu.edu.cn/showproblem.php?pid=4638 求某一区间所包含的连续的段 对于乱序的数 到了i这个数所包含的段数 首先把这个数看作单独的段 再看一下前面 ...
- Nginx SPDY缓冲区溢出漏洞
漏洞版本: nginx 1.3.15 nginx 1.5.x 漏洞描述: CVE ID:CVE-2014-0133 Nginx是HTTP及反向代理服务器,同时也用作邮件代理服务器,由Igor Syso ...
- Android UI设计系统---LayoutParams[转]
LayoutParams继承于Android.View.ViewGroup.LayoutParams. LayoutParams相当于一个Layout的信息包,它封装了Layout的位置. ...
- 剑指Offer:第一个只出现一次的字符
题目:在字符串中找出第一个只出现一次的字符.如输入"abaccdeff",这输出'b' // 第一个只出现一次的字符 #include <stdio.h> char f ...
- js返回上一页并刷新的多种方法
js返回上一页并刷新的几种方法.参考链接:http://www.jbxue.com/article/11230.html <a href="javascript:history.go( ...
- 使用SVN小结
自从加入团队后,开始使用SVN,以下是个人对SVN的一些认识和小结. 一.SVN是什么? SVN是版本管理工具,譬如团队进行项目开发,项目代码都储存在服务器上,成员可用SVN在本地获得并更新代码. 二 ...
- NopCommerce架构分析之四----插件机制
NopCommerce支持灵活的插件机制,所谓Web系统插件,其实也就是可以像原系统的一部分一样使用. Web系统的使用方式就是客户端发送一个请求,服务端进行解析.在asp.net MVC中对客户请求 ...
- 《深入Java虚拟机学习笔记》- 第8章 连接模型
Java虚拟机学习笔记(八)连接模型