构建简单的json树形菜单
json结构：
var Menu = [{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:"",
func:function(){
alert('what do you want to do?');
}
},{
tit:"二级菜单",
func:function(){
alert('do what?');
},
submenu:[{
tit:"三级菜单",
url:"",
submenu:[{
tit:"四级菜单",
url:""
},{
tit:"四级菜单",
url:""
}]
},{
tit:"三级菜单",
url:""
}]
}]
},{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:""
},{
tit:"二级菜单",
submenu:[{
tit:"三级菜单",
url:""
},{
tit:"三级菜单",
url:""
}]
}]
}];
构建菜单处理函数
/*
* @构建树形菜单
* @arrJson:json数据
* @container:菜单容器
*/
function menuTree(jsonArr,container,treeId){
var oText,oUrl;
var oUl = document.createElement('ul');
for(var i = 0 ;i < jsonArr.length; i++){
var oLi = document.createElement('li');
oUrl = jsonArr[i].url || "javascript:void(0)";
oText = jsonArr[i].tit;
if(jsonArr[i].submenu){
oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>';
menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单
}else{
oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';
}
//自定义函数
if(typeof jsonArr[i].func =="function"){
oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;
oLi.getElementsByTagName('a')[0].onclick=function(){
this.func();
}
}
oUl.appendChild(oLi);
}
//最外层容器事件委托
if(treeId){
document.getElementById(treeId).onclick = function(e){
var event = e || window.event;
var target = event.target||event.srcElement;
var next = target.nextSibling;
if(target.nodeName.toLowerCase() == "a"){
if(next){
if(next.style.display=="" || next.style.display=="block"){
next.style.display="none";
}else{
next.style.display="block";
}
}
}
}
}
container.appendChild(oUl);
}
完整demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json树形菜单</title>
</head>
<body>
<h2>构建json树形菜单</h2>
<div class="tree" id="tree"></div>
<script type="text/javascript">
window.onload = function(){
var Menu = [{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:"",
func:function(){
alert('what do you want to do?');
}
},{
tit:"二级菜单",
func:function(){
alert('do what?');
},
submenu:[{
tit:"三级菜单",
url:"",
submenu:[{
tit:"四级菜单",
url:""
},{
tit:"四级菜单",
url:""
}]
},{
tit:"三级菜单",
url:""
}]
}]
},{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:""
},{
tit:"二级菜单",
submenu:[{
tit:"三级菜单",
url:""
},{
tit:"三级菜单",
url:""
}]
}]
}];
//构建菜单
menuTree(Menu,document.getElementById('tree'),'tree');
} /*
* @构建树形菜单
* @arrJson:json数据
* @container:菜单容器
*/
function menuTree(jsonArr,container,treeId){
var oText,oUrl;
var oUl = document.createElement('ul');
for(var i = 0 ;i < jsonArr.length; i++){
var oLi = document.createElement('li');
oUrl = jsonArr[i].url || "javascript:void(0)";
oText = jsonArr[i].tit;
if(jsonArr[i].submenu){
oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>';
menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单
}else{
oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';
}
//自定义函数
if(typeof jsonArr[i].func =="function"){
oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;
oLi.getElementsByTagName('a')[0].onclick=function(){
this.func();
}
}
oUl.appendChild(oLi);
}
//最外层容器事件委托
if(treeId){
document.getElementById(treeId).onclick = function(e){
var event = e || window.event;
var target = event.target||event.srcElement;
var next = target.nextSibling;
if(target.nodeName.toLowerCase() == "a"){
if(next){
if(next.style.display=="" || next.style.display=="block"){
next.style.display="none";
}else{
next.style.display="block";
}
}
}
}
}
container.appendChild(oUl);
}
</script>
</body>
</html>
效果图：
完整实例：
构建简单的json树形菜单的更多相关文章
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- 使用zTree插件构建树形菜单
zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...
- ExtJS4.2 根据数据库记录构建树形菜单
背景:最近用ExtJS4.2做一个系统,需要在前端展示资源菜单,为树形结构,该树形结构是从数据库动态加载的. ExtJS的树形结构大致有两种情况: 1.静态树形结构,此处不多说,看API就能简单明白: ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- java构建树形菜单递归工具类
1.设计菜单实体 import java.util.List; public class Menu { //菜单id private Long id; //父节点id private Long par ...
- 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 简单的JSON数组转树形结构
function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item ...
随机推荐
- codeforces 955F Cowmpany Cowmpensation 树上DP+多项式插值
给一个树,每个点的权值为正整数,且不能超过自己的父节点,根节点的最高权值不超过D 问一共有多少种分配工资的方式? 题解: A immediate simple observation is that ...
- mysqlfrm初步使用
这个工具也就是读取frm文件生成建表语句默认的模式是再生个实例,使用--basedir选项或指定--server选项来连接到已经安装的实例.这种过程不会改变原始的.frm文件.该模式也需要指定--po ...
- Python学习 --- 列表
list 函数可以将 序列变为列表 列表操作: 1 . 元素赋值, 根据索引,可以直接修改 2 . 删除元素, del x[i] 3 . 分片赋值, name[1:] = list (' '), 可以 ...
- POJ 2115
ax=b (mod n) 该方程有解的充要条件为 gcd(a,n) | b ,即 b% gcd(a,n)==0 令d=gcd(a,n) 有该方程的 最小整数解为 x = e (mod n/d) 其中e ...
- Laravel 怎么在 blade 视图中将带 HTML 字符原样输出
### 感觉这是比较细小的,细节处理问题,很容易就一下子想不起怎么处理 但知道处理方式是那么简单时,真的觉得基础不够扎实 ### 富文本编辑内容: 视图原样输出: 视图模板的标签是这样处理就可以的-- ...
- 【原创】大数据基础之Logstash（3）应用之http（in和out）
一个logstash很容易通过http打断成两个logstash实现跨服务器或者跨平台间数据同步,比如原来的流程是 logstash: nginx log -> kafka 打断成两个是 log ...
- 【原创】大数据基础之Benchmark（4）TPC-DS测试结果（hive/hive on spark/spark sql/impala/presto）
1 测试集群 内存:256GCPU:32Core (Intel(R) Xeon(R) CPU E5-2640 v3 @ 2.60GHz)Disk(系统盘):300GDisk(数据盘):1.5T*1 2 ...
- [转]Java微服务框架选型（Dubbo 和 Spring Cloud？）
转载于 http://www.cnblogs.com/xishuai/p/dubbo-and-spring-cloud.html 微服务(Microservices)是一种架构风格,一个大型复杂软件应 ...
- 通过cmd 使用 InstallUtil.exe 命令 操作 windows服务 Windows Service
要安装windows service 首先要找到 InstallUtil.exe,InstallUtil.exe位置在 C:\Windows\Microsoft.NET\Framework\v4.0. ...
- Confluence 6 自定义管理员联系信息
你可以自定义在 联系站点管理员(Contact Site Administrators)页面中显示的消息. 希望编辑这个管理员联系消息: 在屏幕的右上角单击 控制台按钮 ,然后选择 General C ...