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自动填充实现无限级分类的方法,是 ...
随机推荐
- Innodb引擎 long semaphore waits
上一篇介绍了因为子表过多,导致innodb crash的情况,但crash的原因是long semaphore waits.long semaphore waits又为何物? 背景:Innodb使用了 ...
- js 动态计算折扣后总价格
<script type="text/javascript"> <!---计算折扣后的总价格---> function outtotalprice(i) { ...
- 用VisualSVN做项目版本控制
一.SVN服务端 1.VisualSVN Server下载: http://download.csdn.net/detail/jiminull/4448874 或 http://www.visuals ...
- android布局ui
LinearLayout和RelativeLayout 属性对比 共有属性:java代码中通过btn1关联次控件android:id=”@+id/btn1″ 控件宽度android:layout_wi ...
- POJ 3186 Treats for the Cows 一个简单DP
DP[i][j]表示现在开头是i物品,结尾是j物品的最大值,最后扫一遍dp[1][1]-dp[n][n]就可得到答案了 稍微想一下,就可以, #include<iostream> #inc ...
- Android UI -- 布局介绍(布局包括FrameLayout, LinearLayout, RelativeLayout, GridLayout)
首先介绍常用布局类 FrameLayout 最简单的布局管理器. 这个布局管理类有几个特性: 添加组件默认在左上角的. 如果添加多个组件会叠加到一起,并且都在左上角.(可以通过一gravity属性改变 ...
- 时间管理(GTD)
今天中午看了30分钟老王讲战胜拖延症和时间管理 视频地址:多呗课堂 贴两个总结的图在此: 计划中使用的四象限法和十八分钟法很好. 今年多研究研究,实践一下Geting Things Done.
- 判断A树是否包含B树结构
题目:输入两棵二叉树A和B,判断B是不是A的子结构 分析:根据数的遍历方法,首先想到的是采用递归的方式要更简单些,树A从根节点进行遍历,首先判断与B的根节点值是否相等,如果相等则进行递归遍历验证,否则 ...
- uvalive 5031 Graph and Queries 名次树+Treap
题意:给你个点m条边的无向图,每个节点都有一个整数权值.你的任务是执行一系列操作.操作分为3种... 思路:本题一点要逆向来做,正向每次如果删边,复杂度太高.逆向到一定顺序的时候添加一条边更容易.详见 ...
- HW6.3
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...