js将json转成树html
来源：互联网 发布：windows截屏快捷键alt 编辑：程序博客网 时间：2024/05/19 17:04
"name": "1级菜单A",
"link": "###",
"isleaf": false,
"level": 0,
"children": [
{
"name": "2级菜单A",
"link": "###",
"isleaf": false,
"level": 1,
"children": [
{
"name": "3级菜单A1",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name": "3级菜单A2",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name": "2级菜单2",
"link": "###",
"isleaf": false,
"level": 1,
"children": [
{
"name": "3级菜单3",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
},
{
"name": "1级菜单B",
"link": "###",
"isleaf": false,
"level": 0,
"children": [
{
"name": "2级菜单B",
"link": "###",
"isleaf": false,
"level": 1,
"children": [
{
"name": "3级菜单B1",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name": "3级菜单B2",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name": "2级菜单2",
"link": "###",
"isleaf": false,
"level": 1,
"children": [
{
"name": "3级菜单3",
"link": "###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
}];
var makeTree = function(parentObj,treeJson){
var ulObj = $("<ul></ul>");
for(var i=0; i<treeJson.length;i++){
var childHtml ="<li>";
var aHtml = "<a href="+treeJson[i].link+">"+treeJson[i].name+"</a>"
childHtml+=aHtml;
childHtml+="</li>";
var childObj = $(childHtml);
if(treeJson[i].children != null && treeJson[i].children.length>0){
makeTree(childObj,treeJson[i].children);
}
$(ulObj).append(childObj);
}
$(parentObj).append($(ulObj));
};
var parentObj = $("#treediv");
makeTree($(parentObj),treeJson);
jsp：
<body>
<div id="treediv">
</div>
</body>
最后的效果：
<html>
<head></head>
<body>
<div id="treediv">
<ul>
<li><a href="###">1级菜单A</a>
<ul>
<li><a href="###">2级菜单A</a>
<ul>
<li><a href="###">3级菜单A1</a></li>
<li><a href="###">3级菜单A2</a></li>
</ul></li>
<li><a href="###">2级菜单2</a>
<ul>
<li><a href="###">3级菜单3</a></li>
</ul></li>
</ul></li>
<li><a href="###">1级菜单B</a>
<ul>
<li><a href="###">2级菜单B</a>
<ul>
<li><a href="###">3级菜单B1</a></li>
<li><a href="###">3级菜单B2</a></li>
</ul></li>
<li><a href="###">2级菜单2</a>
<ul>
<li><a href="###">3级菜单3</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</body>
</html>
- 1级菜单A
- 2级菜单A
- 3级菜单A1
- 3级菜单A2
- 2级菜单2
- 3级菜单3
- 2级菜单A
- 1级菜单B
- 2级菜单B
- 3级菜单B1
- 3级菜单B2
- 2级菜单2
- 3级菜单3
- 2级菜单B
- js将json转成树html
- js将对象转成json格式
- jquery 将 json字符串转成js object
- js 将json对象转成字符串
- [js] js 将字符串xml 转成 json对象
- 将RSS转成json
- 将数据转成JSON
- 将网页转成html
- js字符串转成JSON
- JSON数据转成html表格
- 将字符串转成json对象
- 将JSON转成表格形式
- itext 将html转成pdf
- js 数组转成Json格式
- js 字符串转成json格式
- js实现word转成html
- js将字符转成数字
- js 将日期转成毫秒
- windows环境下安装JDK并配置环境变量
- Java多态
- JQuery UI Layout
- 如何设计一个 iOS 控件?(iOS 控件完全解析)
- 递归
- js将json转成树html
- 如何利用Ffmpeg进行视频截图
- JAVA中有关逆变和协变类型的详解
- C++在类内定义模板函数
- Thymeleaf
- 对于C++ Builder 使用DevPress 控件中的TCXGrid 添加复选框 在勾选时会闪退
- 在tiny6410开发板上运行自己的qt4.7程序,并设置为开机启动
- java.lang.String.isEmpty()的用法
- PHP实现OATH动态口令算法
