最近用到了el-tree控件，主要是數(shù)據的格式，按照官網的數(shù)據格式來就可以顯示節(jié)點的樹形結構了。
代碼參考很多

裕民網站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、自適應網站建設等網站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創(chuàng)新互聯(lián)公司。

這里給出一個比較好的鏈接：https://www.jb51.net/article/181990.htm

代碼說明在注釋里寫的很詳細了已經，這里不再敘述說明。至于為什么抽取成這種格式的數(shù)據，那是因為ElementUI-tree規(guī)定的數(shù)據格式，你想要用這個控件，就必須按照他們規(guī)定的這個格式 來。
數(shù)據格式如下：

Controller代碼

@RequestMapping("/cateList")
  @ResponseBody
  public List<TbCategory> cateList() {

    // 整體思路：
    // 1、取得所有數(shù)據、放入集合List1 （tbCategories）
    // 2、將List1所有數(shù)據都放入到map（treeMap）中：元素id為鍵，元素本身對象為值
    // 3、取得頂層節(jié)點放入集合List2中（resultList）
    // 4、遍歷List1中的所有數(shù)據，通過數(shù)據的parentId為鍵在map中取值
    //   1）如果能取到，則說明該元素有父節(jié)點
    //      1、判斷該父節(jié)點下的childList中是否有已經子節(jié)點
    //       1、若無：則創(chuàng)建一個集合，將子節(jié)點放入
    //       2、若有：則直接將子節(jié)點放入即可
    // 5、把放好的數(shù)據放回到map中
    // 6、返回List2（resultList）

    // 注意：整個過程將所有數(shù)據取出放入list2（resultList）,返回的也是  //list2


    List<TbCategory> tbCategories = categoryService.cateList();

    List<TbCategory> resultList = new ArrayList<TbCategory>(); // 存貯頂層的數(shù)據

    Map<Object ,Object> treeMap = new HashMap();
    Object itemTree;

    for(int i = 0;i<tbCategories.size() && !tbCategories.isEmpty();i++){
      itemTree = tbCategories.get(i);
      treeMap.put(tbCategories.get(i).getNodeId(),tbCategories.get(i));// 把所有的數(shù)據都放到map中


    }


// 這里也可以用另一種方法，就是拿到集合里的每個元素的父id去數(shù)據庫中查詢，但是，這樣與數(shù)據庫的交互次數(shù)就太多了
 // 遍歷map得到頂層節(jié)點（游離節(jié)點也算作頂層節(jié)點）
    for(int i =0;i<tbCategories.size();i++){
      // 優(yōu)點1：整個方法，只查詢了一次數(shù)據庫
      // 優(yōu)點2：不用知道頂層節(jié)點的id
     if(!treeMap.containsKey(tbCategories.get(i).getParentId())){
        // 我們在存儲的時候就是將元素的id為鍵，元素本身為值存入的
        // 以元素的父id為鍵，在map里取值，若取不到則，對應的元素不存在，即沒有父節(jié)點，為頂層節(jié)點或游離節(jié)點
        // 將頂層節(jié)點放入list集合
        resultList.add(tbCategories.get(i));
      }
    }

    // 循環(huán)數(shù)據，將數(shù)據放到該節(jié)點的父節(jié)點的children屬性中
    for(int i =0 ;i<tbCategories.size()&& !tbCategories.isEmpty();i++){
      // 數(shù)據庫中，若一個元素有子節(jié)點，那么，該元素的id為子節(jié)點的父id
      //treeMap.get(tbCategories.get(i).getParentId()); // 從map集合中找到父節(jié)點
      TbCategory category = (TbCategory)treeMap.get(tbCategories.get(i).getParentId());
      if(category!=null ){ // 不等于null，也就意味著有父節(jié)點
        // 有了父節(jié)點，要判斷父節(jié)點下存貯字節(jié)點的集合是否存在，然后將子節(jié)點放入
        if(category.getChildList() == null){
          // 判斷一個集合是否被創(chuàng)建用null：表示結合還沒有被分配內存空間(即還沒有被創(chuàng)建)，內存大小自然為null
          // 用集合的size判斷集合中是否有元素，為0，沒有元素（集合已經被創(chuàng)建），
          category.setChildList(new ArrayList<TbCategory>());
        }
        category.getChildList().add(tbCategories.get(i)); // 添加到父節(jié)點的ChildList集合下

        // 這一步其實可以不要，因為我們修改了數(shù)據（添加了子節(jié)點，然后在將元素放入到map中，
        // 若鍵相同，map會自動覆蓋掉相同的鍵值對，達到更新map集合中的數(shù)據的目的），但是我們
        // 這里只是從map中取值，而并不關心值的子節(jié)點（子節(jié)點是對象本身自己封裝的。這里我們知道
        // 元素從查詢后放入map,父節(jié)點放入list，然后通過鍵來在map中取得對象，之后再將修改過的對象重新放入map當中
        // ,我們并沒有直接操作list,但是在list中對象的值卻是已經修改過了，這就是對象的引用傳遞，同一個引用對象是通過
        // 地址值來操作對象的，即有不同的引用，但是對象中的屬性是已經通過引用的操作而改變的，所以這里一旦修改過后，無論是map中還是list中，再次取值時都已經是更改過后的值了）
        treeMap.put(tbCategories.get(i).getParentId(),category); // 把放好的數(shù)據放回到map中
      }

    }


   return resultList;
  }

文章標題：Element的el-tree控件后臺數(shù)據結構的生成以及方法的抽取-創(chuàng)新互聯(lián)
網站地址：http://sd-ha.com/article42/dedhec.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、網站導航、網站設計公司、App設計、自適應網站、定制網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)