<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          原生js實現樹級遞歸,通過js生成tree樹形菜單(遞歸算法)

          時間:?2017-12-11閱讀:?7611標簽:?遞歸

          1、效果圖


          需求:首先這是一個數據集—js的類型,我們需要把生成一個tree形式的對象 :

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

           id,與pid之間的對應關系,當pid不存在,或pid:0的時候,這一項,應該為樹的頂端,那么我們需要去重新建一次索引,怎么建呢,,,以原數據集的id的值,重新生成一個數據如下:

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

          js轉換為上面數據集,實現數樹級遞歸方法:

          <script>
              function toTree(data) {
                  // 刪除 所有 children,以防止多次調用
                  data.forEach(function (item) {
                      delete item.children;
                  });
          
                  // 將數據存儲為 以 id 為 KEY 的 map 索引數據列
                  var map = {};
                  data.forEach(function (item) {
                      map[item.id] = item;
                  });
          //        console.log(map);
                  var val = [];
                  data.forEach(function (item) {
                      // 以當前遍歷項,的pid,去map對象中找到索引的id
                      var parent = map[item.pid];
                      // 好繞啊,如果找到索引,那么說明此項不在頂級當中,那么需要把此項添加到,他對應的父級中
                      if (parent) {
                          (parent.children || ( parent.children = [] )).push(item);
                      } else {
                          //如果沒有在map中找到對應的索引ID,那么直接把 當前的item添加到 val結果集中,作為頂級
                          val.push(item);
                      }
                  });
                  return val;
              }
              console.log(toTree(data))
          </script>


          使用jquery,生成上述效果圖的完整實例:

          <!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 data = [
                      { id: 1, name: "辦公管理", pid: 0 },
                      { id: 2, name: "請假申請", pid: 1 },
                      { id: 3, name: "出差申請", pid: 1 },
                      { id: 4, name: "請假記錄", pid: 2 },
                      { id: 5, name: "系統設置", pid: 0 },
                      { id: 6, name: "權限管理", pid: 5 },
                      { id: 7, name: "用戶角色", pid: 6 },
                      { id: 8, name: "菜單設置", pid: 6 },
                      ];
          
                      GetData(0, data);
                      $("body").append(menus);
                  });
           
                  //菜單列表html
                  var menus = '';
           
                  //根據菜單主鍵id生成菜單列表html
                  //id:菜單主鍵id
                  //arry:菜單數組信息
                  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>';
                      }
                  }
           
                  //根據菜單主鍵id獲取下級菜單
                  //id:菜單主鍵id
                  //arry:菜單數組信息
                  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>



          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/237

          vue依賴注入、遞歸組件的用法

          在組件上面使用 ref 這個屬性綁定,屬性值自取,然后就可以通過 $refs.屬性名 這種方式去獲取到指定組件的實例了。其實不僅僅是組件能夠使用 ref ,標簽元素也能使用。

          Js遞歸

          傳統的遞歸思想:自已調用自已,但是調用棧里面的執行上下文會越來越多,容易暴棧。采用尾遞歸可以規避這個問題:每次入棧出棧再入棧

          Vue 和遞歸組件

          有人說遞歸很難理解,也有人不這么認為。遞歸函數簡單的定義是:一個自調用函數,這意味著它將在執行的某個時刻調用自己。從理論上講,遞歸是一種需要兩個屬性的行為:

          淺談javascript中的遞歸和閉包

          遞歸和閉包作為js中很重要的一環,幾乎在前端的面試中都會涉及,特別閉包。今天前端組的組長冷不丁的問了我一下,粗略的回答了一下,感覺不太滿足,于是重新學習了一下,寫下本篇。

          遞歸思想與實戰

          遞歸算法對于一個程序員應該算是最經典的算法之一,而且它越想越亂,很多復雜算法的實現也都用到了遞歸,例如深度優先搜索,二叉樹遍歷等。面試中常常會問遞歸相關的內容(深拷貝,對象格式化,數組拍平,走臺階問題等)

          js遞歸實現方式

          遞歸函數就是在函數體內調用本函數;遞歸函數的使用要注意函數終止條件避免死循環;遞歸實現形式:1.聲明一個具名函數,通過函數名調用,2. 使用arguments.callee代替函數名

          遞歸算法的理解

          所謂遞歸,就是既有傳遞,又有回歸,與其說是傳遞與回歸,初學不如理解是一種 “循序遞進”與“規律約束”。為什么這樣說,因為遞歸算法相比較于循環在代碼結構方面個人認為更加簡潔清晰,清晰易懂,遞歸注重的是一種有序的規律

          js利用遞歸與promise 按順序請求數據

          項目中有一個需求,一個tabBar下面如果沒有內容就不讓該tabBar顯示,當然至于有沒有內容,需要我們通過請求的來判斷,但是由于請求是異步的,如何讓請求按照tabBar的順序進行?

          JS遞歸及二叉搜索樹的移除節點

          遞歸含義:在某時某刻某個條件下調用包含自己的函數;注意點:⑴遞歸過程中一定要加限制條件,要不然會陷入死循環:遞歸有個過程,不是一步到位的,這一點尤其重要

          遞歸獲取頁面元素的真實offsetLeft和offsetTop

          由于父元素的定位屬性, 導致子元素及其孫元素等的offsetLeft和offsetTop變得和預期不一致(預期上都是到屏幕左邊和上邊的位置), 由于需要做鼠標拖動旋轉和鼠標框選

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网