根据数组生成联动菜单树

转载 2016年08月31日 16:01:20

根据数组生成联动菜单树

一级Id为负数、parentId为空,二级parentId等于一级id,三级parentId等于二级id:

[{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}]

  • javacript:
<div id="result"></div>
<script>
  var result = document.getElementById('result')
  var arr = [
    {"name": "广东","Id": -1,"parentId": null},
    {"name": "湖北","Id": -2,"parentId": null},
    {"name": "广州","Id": 44,"parentId": -1},
    {"name": "武汉","Id": 58,"parentId": -2},
    {"name": "深圳","Id": 12,"parentId":-1 },
    {"name": "白云","Id": 741,"parentId": 44}
  ]
  var tree = {}
  var count = 0
  array2Object(arr, tree, null)
  function array2Object (array, node, id) {
    var storage = []
    var newArray = []
    var newNode, newId
    for (var i = 0; i < array.length; i++) {
      if (array[i].parentId === id) {
        node[array[i].name] = {}
        storage.push(i)
        count++
      } else {
        newArray.push(array[i])
      }
    }
    if (count !== arr.length) {
      for (var i = 0; i < storage.length; i++) {
        array2Object(newArray, node[array[storage[i]].name], array[storage[i]].Id)
      }
    } else {
      object2Html(result, tree)
    }
  }
  function object2Html (node, obj) {
    var storage = []
    var tpl = node.innerHTML + '<ul>'
    for (var key in obj) {
      tpl = tpl + '<li data-name="' + key + '">' + key + '</li>'
      if (!isEmptyObject(obj[key])) {
        storage.push({
          name: key,
          obj: obj[key]
        })
      }
    }
    tpl += '</ul>'
    node.innerHTML = tpl
    if (storage.length !== 0) {
      for (var i = 0; i < storage.length; i++) {
        object2Html(document.querySelector('li[data-name="' + storage[i].name + '"]'), storage[i].obj)
      }
    }
  }
  function isEmptyObject (obj) {
    for (var key in obj) {
      return false
    }
    return true
  }
</script>

效果图:
这里写图片描述

  • javascript(无限级)
    var districts = [
        {"name": "广东", "Id": 1, "parentId": 0},
        {"name": "湖北", "Id": 2, "parentId": 0},
        {"name": "广州", "Id": 3, "parentId": 1},
        {"name": "武汉", "Id": 4, "parentId": 2},
        {"name": "深圳", "Id": 5, "parentId": 0},
        {"name": "白云", "Id": 6, "parentId": 3},
        {"name": "江夏", "Id": 7, "parentId": 4},
        {"name": "景云路", "Id": 8, "parentId": 6}
    ];

    function arrayToTree(parentId) {
        var temp = [];
        for (var index in districts) {
            if (districts[index].parentId == parentId) {
                temp.push({
                    data: districts[index],
                    children: arrayToTree(districts[index].Id)
                });
            }
        }
        return temp;
    }

    function outputTree(items, depth) {
        var str = '';
        for (var index in items) {
            /* repeat() 特性属于 ECMAScript 2015(ES6)规范 */
            str += ' - - '.repeat(depth) + items[index].data.name + '<br/>';
            if (items[index].children.length) {
                str += outputTree(items[index].children, depth + 1);
            }
        }
        return str;
    }

    var result = outputTree(arrayToTree(0), 0);
    document.write(result);

效果如下:

广东
- - 广州
- - - - 白云
- - - - - - 景云路
湖北
- - 武汉
- - - - 江夏
深圳
  • 数据库版
    建表语句:
create table TP_CITY
(
  Id      NUMBER ,
  name    VARCHAR2(255),
  parentId    NUMBER
);

insert into tp_city values(-1,'广东', null);
insert into tp_city values(-2,'湖北', null);
insert into tp_city values(44,'广州', -1);
insert into tp_city values(58,'武汉', -2);
insert into tp_city values(12,'深圳', -1);
insert into tp_city values(741,'白云', 44);

比如使用oracle的层级查询

select lpad(' ', (level-1)*2, ' ')||name name
from tp_city
start with id<0 connect by parentId=prior Id;

返回结果如下:
这里写图片描述

也可以这样写:

select sys_connect_by_path(name, '-') path
from tp_city
start with id<0 connect by parentId=prior id;

返回结果
这里写图片描述

  • PHP
<?php
header('Content-Type: text/plain; charset=utf-8');
$arr = array(
    array('name' => '广东', 'id' => -1,  'pid' => null),
    array('name' => '湖北', 'id' => -2,  'pid' => null),
    array('name' => '广州', 'id' => 44,  'pid' => -1),
    array('name' => '武汉', 'id' => 58,  'pid' => -2),
    array('name' => '深圳', 'id' => 12,  'pid' => -1),
    array('name' => '白云', 'id' => 741, 'pid' => 44),
);
function tree(array $arr, $pid = null, $i = '') {
    foreach ($arr as $ele) {
        if ($ele['pid'] === $pid) { //递归条件
            $indent = ($ele['pid'] === null) ? $i : '__'.$i;
            echo $indent.$ele['name']."\n";
            tree($arr, $ele['id'], $indent); //递归,把当前ID当做父ID传参,还有缩进
        }
    }
}
tree($arr); //输出
广东
__广州
____白云
__深圳
湖北
__武汉

文章来自SF社区,本人只是做笔记:

答案来源 链接
aryu
游梦惊园
凌晨消失の夏日
eechen

csdn的blog后台程序的导航菜单的实现

研究了一下csdn的 blog后台程序的导航菜单的实现,其特点是每个导航菜单项的宽度不一样,所以,被用作导航条背景的图片不能是一个单一固定长度的图片,所以,csdn采用了一种称之为滑动门的技术,每个菜...
  • zhangxiaoxiang
  • zhangxiaoxiang
  • 2007年10月10日 22:52
  • 7627

DISCUZ后台添加导航栏和左侧菜单栏

discuz后台不存在模板文件,所以我们无法通过追源码的方式来添加导航栏,下面介绍下discuz后台添加导航栏的方法: 需要用到的文件就两个: (1)\source\admincp\admincp_m...
  • qiangqiang_blog
  • qiangqiang_blog
  • 2015年05月28日 19:32
  • 2802

权限管理系统中的根据用户角色动态生成用户权限菜单树

权限管理系统中的根据用户角色动态生成用户权限菜单树        暑假在工作室学习了基于RBAC的权限管理系统,学的比较浅显,记录下方便以后学习可以看。         一、首先讲讲我对RBA...
  • dabai_cai
  • dabai_cai
  • 2017年10月03日 15:46
  • 473

将Json数组转换为树形结构生成菜单列表

/*将Json数组转换为树形结构*/ function transDate(list,idstr,pidstr){ var result = [],temp = {}; for(i =...
  • NPower_Zhang
  • NPower_Zhang
  • 2017年03月31日 14:13
  • 2422

discuz X3二次开发后台添加导航栏(后台菜单)

1.  新建文件 文件/source/admincp/menu/menu_test.php 将以下代码粘入该文件    
  • zgmu
  • zgmu
  • 2015年11月09日 22:15
  • 446

Jquery--遍历后台返回的数组

$.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的...
  • democreen
  • democreen
  • 2013年06月03日 09:55
  • 10328

easyui tree异步树菜单联动

JS: tree.css'/>" rel="stylesheet" type="text/css"> ">
  • hjxgood
  • hjxgood
  • 2014年04月10日 14:48
  • 5079

根据数组创建二叉树

class TreeNode { int val; TreeNode left; TreeNode right; TreeNode (int val) { this.val=val; }...
  • YzlSmile
  • YzlSmile
  • 2016年11月11日 14:35
  • 150

js中从后台向前台调用数据(数组)后 如何遍历这个数组?

问大家个问题,我做个网页。用vs2005,我在后台Default.aspx.vb文件中定义个结构体数组为public类型,定义如下:public structure struct1  dim str1...
  • zhangdongxu119520
  • zhangdongxu119520
  • 2008年05月14日 14:02
  • 2067

Discuz!开发之后台二级导航栏生成函数showsubmenu()介绍

showsubmenu()二级导航栏显示 参数: $title - 二级导航的当前栏标题 $menus - 多个子导航 使用方法举例: 后台-用户-会员管理 showsubmenu('n...
  • lih062624
  • lih062624
  • 2017年04月28日 13:24
  • 2723
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:根据数组生成联动菜单树
举报原因:
原因补充:

(最多只允许输入30个字)