鏁堟灉濡傚浘锛?/p>
澶ф鎬濊矾锛氭爲褰㈣鍥句娇鐢ㄧ殑鏄痸ue瀹樻柟浜嬩緥浠ｇ爜锛宩ava璐熻矗灏佽鏁版嵁锛屾寜鐓ue瀹樻柟浜嬩緥鐨勬暟鎹粨鏋勫皝瑁呮暟鎹嵆鍙€傛湁涓や釜闇€瑕佸叧娉ㄧ殑鐐癸細
1.瀹樻柟浜嬩緥鐨勬暟鎹粨鏋勬槸涓€涓璞￠噷闈㈠寘鍚潃闆嗗悎锛岃€屼笉鏄竴涓泦鍚堝璞?2.閫掑綊绠楁硶
涓婁唬鐮侊細
鍓嶇锛歨tml+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" 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> <p :class="{bold: isFolder}" @click="toggle" @dblclick="makeFolder"> {{ item.name }} <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span> </p> <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> <p id="demo"> <ul > <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"> </tree-item> </ul> </p></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>
鍚庡彴锛歫ava +mysql锛屼竴鍏变笁涓柟娉曪紝鍒嗗埆鏄細1.鑾峰彇璇锋眰 2鑾峰彇鎵€鏈夎彍鍗?3閫掑綊鑿滃崟鐨勭埗瀛愬叧绯?/p>
/** * 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:閫掑綊鐖跺瓙鍏崇郴 * @author JaxWan * @param id 鐖惰妭鐐筰d * @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 瀹炵幇澶氱骇鑿滃崟閫掑綊鏁堟灉锛屽笇鏈涘澶у鏈夋墍甯姪锛屽鏋滃ぇ瀹舵湁浠讳綍鐤戦棶璇风粰鎴戠暀瑷€锛屽皬缂栦細鍙婃椂鍥炲澶у鐨勩€傚湪姝や篃闈炲父鎰熻阿澶у瀵规垜浠綉绔欑殑鏀寔锛?br />濡傛灉浣犺寰楁湰鏂囧浣犳湁甯姪锛屾杩庤浆杞斤紝鐑﹁娉ㄦ槑鍑哄锛岃阿璋紒
鏈枃鏍囬: vue+ java 瀹炵幇澶氱骇鑿滃崟閫掑綊鏁堟灉
鏈枃鍦板潃: http://www.xuebuyuan.com/ruanjian/java/292425.html
以上就上有关vue+java瀹炵幇澶氱骇鑿滃崟閫掑綊鏁堟灉的相关介绍，要了解更多java,澶氱骇鑿滃崟閫掑綊,vue,閫掑綊鑿滃崟内容请登录学步园。