亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue+ java 實現(xiàn)多級菜單遞歸效果

 更新時間:2019年12月12日 08:47:02   作者:buyaopingbixiazai  
這篇文章主要介紹了vue+ java 實現(xiàn)多級菜單遞歸效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下

效果如圖:

大概思路:樹形視圖使用的是vue官方事例代碼,java負(fù)責(zé)封裝數(shù)據(jù),按照vue官方事例的數(shù)據(jù)結(jié)構(gòu)封裝數(shù)據(jù)即可。有兩個需要關(guān)注的點:

1.官方事例的數(shù)據(jù)結(jié)構(gòu)是一個對象里面包含著集合,而不是一個集合對象 2.遞歸算法

上代碼:

前端:html+js

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
 <!-- 引入樣式 -->
 <link rel="stylesheet"  rel="external nofollow" >
 <!-- 引入組件庫 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="${ctx}/core-plugins/ew/depend/jquery/jquery.min.js" type="text/javascript"></script>
<style>
 body {
 font-family: Menlo, Consolas, monospace;
 color: #444;
}
.item {
 cursor: pointer;
}
.bold {
 font-weight: bold;
}
ul {
 padding-left: 1em;
 line-height: 1.5em;
 list-style-type: dot;
}
</style>
<script type="text/x-template" id="item-template">
 <li>
 <div :class="{bold: isFolder}" @click="toggle" @dblclick="makeFolder">
  {{ item.name }}
 
  <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
 </div>
 <ul v-show="isOpen" v-if="isFolder">
  <tree-item
  class="item"
  v-for="(child, index) in item.children"
  :key="index"
  :item="child"
  @make-folder="$emit('make-folder', $event)"
  @add-item="$emit('add-item', $event)"
  ></tree-item>
  <li class="add" @click="$emit('add-item', item)">+</li>
 </ul>
 </li>
</script>
</head>
<body>
 
 <div id="demo">
 <ul >
 <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"> </tree-item>
 </ul>
 </div>
</body>
</html>
<script>
 Vue.component('tree-item', {
 template: '#item-template',
 props: {
  item: Object 
 },
 data: function () {
  return {
  isOpen: false
  }
 },
 computed: {
  isFolder: function () {
  return this.item.children &&
   this.item.children.length
  }
 },
 methods: {
  toggle: function () {
  if (this.isFolder) {
   this.isOpen = !this.isOpen
  };
  },
  makeFolder: function () {
  if (!this.isFolder) {
   this.$emit('make-folder', this.item)
   this.isOpen = true
  }
  }
 }
 })
 var demo = new Vue({
 el: '#demo',
 data: {
  treeData: {}
 },
 methods: {
  makeFolder: function (item) {
  Vue.set(item, 'children', [])
  this.addItem(item)
  },
  addItem: function (item) {
  item.children.push({
   name: 'new stuff'
  })
  },
  searchData:function(){
  debugger;
 axios.get('menuRoleLimitBLH_searchMenus.do?pageType=1')
 .then(response => (
  this.treeData = response.data.json.menuMaps
  ))
 .catch(error => console.log(error));
 }
 },
 created() {
 this.searchData();
  },
 
 
 })
</script>

后臺:java +mysql,一共三個方法,分別是:1.獲取請求 2獲取所有菜單 3遞歸菜單的父子關(guān)系

/**
 * Purpose:菜單列表頁面
 * @author JaxWan
 * @param req
 * @return IZrarResponse
 */
 public IZrarResponse searchMenus(IZrarRequest req){
 IZrarResponse res = new ZrarResponse();
 String pageType = req.getParameter("pageType");
 if(StringUtil.isNotNull(pageType)){
 List<EwTreeVO> EwTreeVOs = dao.selectList("selectAllMenuTree");
 List<Map<String, Object>> menus = this.getMenusList(EwTreeVOs);
 Map<String, Object> map = new HashMap<String, Object>();
 map.put("id", 1);
 map.put("name", 2);
 map.put("children", menus);
 res.addJson("menuMaps", map);
 }else {
 res.addPage("pages/ewsys/dept/menu_role_limit.jsp").addJSTL("isExtForm", false).addJSTL("isEmptyForm", false);
 }
 return res;
 }
/**
 * Purpose:獲取菜單集合
 * @author JaxWan
 * @param EwTreeVOs
 * @return List<Map<String,Object>>
 */
 public List<Map<String, Object>> getMenusList(List<EwTreeVO> EwTreeVOs){
 List<Map<String, Object>> menus = new ArrayList<Map<String,Object>>();
 for (int i = 0; i < EwTreeVOs.size(); i++) {
 EwTreeVO ewTreeVO = EwTreeVOs.get(i);
 String id = ewTreeVO.getId();
 String name = ewTreeVO.getName();
 String pId = ewTreeVO.getpId();
 Map<String, Object> map = new HashMap<String, Object>();
 map.put("id", id);
 map.put("name", name);
 map.put("pId", pId);
 Map<String, Object> map2 = this.digui(id, EwTreeVOs,map);
 menus.add(map2);
 }
 return menus;
 }
 
 /**
 * Purpose:遞歸父子關(guān)系
 * @author JaxWan
 * @param id 父節(jié)點id
 * @param EwTreeVOs2 菜單集合
 * @param mapResult 結(jié)果集
 * @param lists 孩子集合
 * @return Map<String,Object>
 */
 public Map<String, Object> digui(String id,List<EwTreeVO> EwTreeVOs2,Map<String, Object> mapResult){
 List<Map<String, Object>> lists = new ArrayList<Map<String,Object>>();
 for (int j = 0; j < EwTreeVOs2.size(); j++) {
 EwTreeVO ewTreeVO2 = EwTreeVOs2.get(j);
 String id2 = ewTreeVO2.getId();
 String name2 = ewTreeVO2.getName();
 String pId2 = ewTreeVO2.getpId();
 if(id.equals(pId2)){
 Map<String, Object> map2 = new HashMap<String, Object>();
 map2.put("id", id2);
 map2.put("name", name2);
 map2.put("pId", pId2);
 lists.add(map2);
 EwTreeVOs2.remove(j);
 j--;
 }
 }
 mapResult.put("children", lists);
 for (int i = 0; i < lists.size(); i++) {
 Map<String , Object> tempMap = lists.get(i);
 String id1 = (String) tempMap.get("id");
 this.digui(id1,EwTreeVOs2,tempMap);
 }
 return mapResult;
 }

總結(jié)

以上所述是小編給大家介紹的vue+ java 實現(xiàn)多級菜單遞歸效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • java常見log日志的使用方法解析

    java常見log日志的使用方法解析

    本文主要介紹了java常見log日志的使用方法解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • Java程序包不存在的3種解決方法總結(jié)

    Java程序包不存在的3種解決方法總結(jié)

    包存在的,但是啟動項目的時候提示包不存在,所以解決下,這篇文章主要給大家介紹了關(guān)于Java程序包不存在的3種解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • Java中統(tǒng)計字符個數(shù)以及反序非相同字符的方法詳解

    Java中統(tǒng)計字符個數(shù)以及反序非相同字符的方法詳解

    本篇文章是對Java中統(tǒng)計字符個數(shù)以及反序非相同字符的方法進行了詳細(xì)的分析介紹,需要的朋友參考下
    2013-05-05
  • Spring Boot啟動過程全面解析(三)

    Spring Boot啟動過程全面解析(三)

    這篇文章主要介紹了Spring Boot啟動過程全面解析(三)的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • SpringBoot項目部署到阿里云服務(wù)器的實現(xiàn)步驟

    SpringBoot項目部署到阿里云服務(wù)器的實現(xiàn)步驟

    本文主要介紹了SpringBoot項目部署到阿里云服務(wù)器的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • java 中enum的使用方法詳解

    java 中enum的使用方法詳解

    這篇文章主要介紹了java 中enum的使用方法詳解的相關(guān)資料,希望通過本文能幫助到大家,理解掌握java 中enum的使用方法,需要的朋友可以參考下
    2017-09-09
  • Java多線程之徹底搞懂線程池

    Java多線程之徹底搞懂線程池

    熟悉 Java 多線程編程的同學(xué)都知道,當(dāng)我們線程創(chuàng)建過多時,容易引發(fā)內(nèi)存溢出,因此我們就有必要使用線程池的技術(shù)了。想要詳細(xì)了解的同學(xué)可以參考閱讀本文
    2023-03-03
  • Java之使用POI教你玩轉(zhuǎn)Excel導(dǎo)入與導(dǎo)出

    Java之使用POI教你玩轉(zhuǎn)Excel導(dǎo)入與導(dǎo)出

    這篇文章主要介紹了Java之使用POI教你玩轉(zhuǎn)Excel導(dǎo)入與導(dǎo)出,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 基于JPA查詢部分字段的相關(guān)事項

    基于JPA查詢部分字段的相關(guān)事項

    這篇文章主要介紹了JPA查詢部分字段的相關(guān)事項說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-08-08
  • SpringBoot+Vue+Axios+BootStrap實現(xiàn)圖書的增刪改查功能示例

    SpringBoot+Vue+Axios+BootStrap實現(xiàn)圖書的增刪改查功能示例

    本文主要介紹了SpringBoot+Vue+Axios+BootStrap實現(xiàn)圖書的增刪改查功能,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12

最新評論