vue+ java 實現多級選單遞迴效果
阿新 • • 發佈:2020-01-07
效果如圖:
大概思路:樹形檢視使用的是vue官方事例程式碼,java負責封裝資料,按照vue官方事例的資料結構封裝資料即可。有兩個需要關注的點:
1.官方事例的資料結構是一個物件裡面包含著集合,而不是一個集合物件 2.遞迴演算法
上程式碼:
前端:html+js
<html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" 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遞迴選單的父子關係
/** * 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,id); map.put("name",name); map.put("pId",pId); Map<String,Object> map2 = this.digui(id,EwTreeVOs,map); menus.add(map2); } return menus; } /** * Purpose:遞迴父子關係 * @author JaxWan * @param id 父節點id * @param EwTreeVOs2 選單集合 * @param mapResult 結果集 * @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; }
總結
以上所述是小編給大家介紹的vue+ java 實現多級選單遞迴效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!