JavaScript遞歸算法生成樹形菜單

發(fā)布時(shí)間：2020-09-01 04:44:47 來源：腳本之家閱讀：294 作者：唐一峰欄目：web開發(fā)

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

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

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

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

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

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

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

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

3、程序設(shè)計(jì)

菜單信息一般來源

//菜單列表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獲取下級(jí)菜單
    //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、運(yùn)行

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

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

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: "請(qǐng)假申請(qǐng)", pid: 1 },
      { id: 3, name: "出差申請(qǐng)", pid: 1 },
      { id: 4, name: "請(qǐng)假記錄", pid: 2 },
      { id: 5, name: "系統(tǒng)設(shè)置", pid: 0 },
      { id: 6, name: "權(quán)限管理", pid: 5 },
      { id: 7, name: "用戶角色", pid: 6 },
      { id: 8, name: "菜單設(shè)置", 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獲取下級(jí)菜單
    //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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

JavaScript遞歸算法生成樹形菜單

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽