JavaScript遞歸算法生成樹形菜單

更新時間：2017年08月15日 14:55:11 作者：唐一峰

這篇文章主要介紹了JavaScript遞歸算法生成樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js生成樹形菜單的具體代碼，供大家參考，具體內容如下

1、最終效果圖（這里僅為實現(xiàn)算法，并加載至頁面，不做任何css界面優(yōu)化）

注釋：本示例包含三級目錄菜單，但實際上可支持N級（可使用該代碼自行測試）

2、數(shù)據(jù)源

菜單信息一般來源于數(shù)據(jù)庫中數(shù)據(jù)表，且為自連接表，其中包含主要字段（主鍵，菜單名稱，父級id）；

本示例在前端頁面中使用對象數(shù)組模擬從數(shù)據(jù)庫獲取菜單信息；

var menuArry = [
{ id: 1, name: "辦公管理", pid: 0 },
{ id: 2, name: "請假申請", pid: 1 },
{ id: 3, name: "出差申請", pid: 1 },
{ id: 4, name: "請假記錄", pid: 2 },
{ id: 5, name: "系統(tǒng)設置", pid: 0 },
{ id: 6, name: "權限管理", pid: 5 },
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置", pid: 6 },
];

注釋：id——菜單主鍵id；name——菜單名稱；pid——父級id

3、程序設計

菜單信息一般來源

//菜單列表html
    var menus = '';
 
    //根據(jù)菜單主鍵id生成菜單列表html
    //id：菜單主鍵id
    //arry：菜單數(shù)組信息
    function GetData(id, arry) {
      var childArry = GetParentArry(id, arry);
      if (childArry.length > 0) {
        menus += '<ul>';
        for (var i in childArry) {
          menus += '<li>' + childArry[i].name;
          GetData(childArry[i].id, arry);
          menus += '</li>';
        }
        menus += '</ul>';
      }
    }
 
    //根據(jù)菜單主鍵id獲取下級菜單
    //id：菜單主鍵id
    //arry：菜單數(shù)組信息
    function GetParentArry(id, arry) {
      var newArry = new Array();
      for (var i in arry) {
        if (arry[i].pid == id)
          newArry.push(arry[i]);
      }
      return newArry;
    }

注釋：本示例菜單使用ul無序列表演示，menus變量為最終生成的菜單html

4、運行

GetData(0, menuArry)
$("body").append(menus);

注釋：GetData(0, menuArry)，0——頂級菜單主鍵

5、完整代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
 
  <script type="text/javascript">
    $(function () {
      var menuArry = [
      { id: 1, name: "辦公管理", pid: 0 },
      { id: 2, name: "請假申請", pid: 1 },
      { id: 3, name: "出差申請", pid: 1 },
      { id: 4, name: "請假記錄", pid: 2 },
      { id: 5, name: "系統(tǒng)設置", pid: 0 },
      { id: 6, name: "權限管理", pid: 5 },
      { id: 7, name: "用戶角色", pid: 6 },
      { id: 8, name: "菜單設置", pid: 6 },
      ];
 
      GetData(0, menuArry)
      $("body").append(menus);
    });
 
    //菜單列表html
    var menus = '';
 
    //根據(jù)菜單主鍵id生成菜單列表html
    //id：菜單主鍵id
    //arry：菜單數(shù)組信息
    function GetData(id, arry) {
      var childArry = GetParentArry(id, arry);
      if (childArry.length > 0) {
        menus += '<ul>';
        for (var i in childArry) {
          menus += '<li>' + childArry[i].name;
          GetData(childArry[i].id, arry);
          menus += '</li>';
        }
        menus += '</ul>';
      }
    }
 
    //根據(jù)菜單主鍵id獲取下級菜單
    //id：菜單主鍵id
    //arry：菜單數(shù)組信息
    function GetParentArry(id, arry) {
      var newArry = new Array();
      for (var i in arry) {
        if (arry[i].pid == id)
          newArry.push(arry[i]);
      }
      return newArry;
    }
  </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: