js 如何将无限级分类展示出来
2015-11-05 10:23
731 查看
这个需要运用递归。
案例:将数据以 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);
显示样式:
案例:将数据以 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 数组的删除与判断是否存在的两个扩展方法
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
- a href="javascript:void(0)" 是什么意思?加不加上有什么区别
- JS实现的新浪微博大厅文字内容滚动效果代码
- javaScript的on方法,动态触发事件
- JavaScript中清空数组的三种方式
- Extjs gridPanel对选中行的操作
- js cookie
- 【Miaov】JS6-作用域
- JS读取XML文件(兼容浏览器)
- JS实现自定义简单网页软键盘效果代码
- javascript中的数组操作
- JavaScript跨域总结与解决办法
- json editor verify online
- JSON.parse()和JSON.stringify()
- JavaScript实现cookie的写入、读取、删除功能
- JS实现slide文字框缩放伸展效果代码
- JSP程序404错误的解决浅谈
- 如何防止JavaScript自动插入分号
- JSP自定义标签实例(二)