java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果
效果如图:
大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可。有两个需要关注的点:
1.官方事例的数据结构是一个对象里面包含着集合,而不是一个集合对象 2.递归算法
上代码:
前端:html+js
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;
}
{{ item.name }}
[{{ isOpen ? '-' : '+' }}]
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)"
>
+
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();
},
})
后台: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 EwTreeVOs = dao.selectList("selectAllMenuTree");
List> menus = this.getMenusList(EwTreeVOs);
Map map = new HashMap();
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>
*/
public List> getMenusList(List EwTreeVOs){
List> menus = new ArrayList>();
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 map = new HashMap();
map.put("id", id);
map.put("name", name);
map.put("pId", pId);
Map 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
*/
public Map digui(String id,List EwTreeVOs2,Map mapResult){
List> lists = new ArrayList>();
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 map2 = new HashMap();
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 tempMap = lists.get(i);
String id1 = (String) tempMap.get("id");
this.digui(id1,EwTreeVOs2,tempMap);
}
return mapResult;
}
总结
以上所述是小编给大家介绍的vue+ java 实现多级菜单递归效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文标题: vue+ java 实现多级菜单递归效果
本文地址: http://www.cppcns.com/ruanjian/java/292425.html
java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果相关推荐
- mysql vue 菜谱_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
- 并发编程-02并发基础CPU多级缓存和Java内存模型JMM
文章目录 CPU多级缓存 CPU多级缓存概述 CPU 多级缓存-缓存一致性协议MESI CPU 多级缓存-乱序执行优化-重排序 JAVA内存模型 (JMM) 计算机硬件架构简易图示 JAVA内存模型与 ...
- java 什么时候用递归_如果要用Java实现算法,一定慎用递归
现象 : 递归是我们很经典的一种算法实现,可以很好的描述一个算法的原理!对于算法的描述.表现和代码结构理解上,递归都是不错的选择! 但是本文想说的是java实现一个递归算法的时候尽量不要用递归实现,而 ...
- java实现递归算法_如何在Java中实现二进制搜索算法而无需递归
java实现递归算法 by javinpaul 由javinpaul 流行的二进制搜索算法的迭代实现,用于在排序数组中查找元素. (An Iterative implementation of the ...
- [Leetcode][第889题][JAVA][根据前序和后序遍历构造二叉树][分治][递归]
[问题描述][中等] [解答思路] copyOfRange class Solution {public TreeNode constructFromPrePost(int[] pre, int[] ...
- java ztree json_java 树形转换JSON 工具类 / 树形子父级菜单递归 JSON 格式
实体类: package tree; import java.util.List; /** * *2018-11-30 */ public class Menu { // 菜单id private S ...
- 【java学习之路】(数据结构篇)004.递归和二叉搜索树
递归 递归的概念 递归的方式求1-100的和 public class DGDemo {public static int sum(int n){//递归到底的情况if(n==1){return 1; ...
- Java算法--第二章--查找与排序(2)递归基础--佩波那契最大公约数插入排序汉诺塔
Java算法–第二章–查找与排序(2)递归基础 一.找重复 1.找到一种划分方法 2.找到递推公式或者等价转换 都是父问题转化为求解子问题 二.找变化的量 变化的量通常要作为参数 三.找出出口 代码: ...
- 常见数据结构和算法实现(排序/查找/数组/链表/栈/队列/树/递归/海量数据处理/图/位图/Java版数据结构)
常见数据结构和算法实现(排序/查找/数组/链表/栈/队列/树/递归/海量数据处理/图/位图/Java版数据结构) 数据结构和算法作为程序员的基本功,一定得稳扎稳打的学习,我们常见的框架底层就是各类数据 ...
最新文章
- [CareerCup] 17.7 English Phrase Describe Integer 英文单词表示数字
- 白领学python_大学生应该早早自学Python,Ps,Pr,office三件套,还是等到要用的时候再学?...
- memmove()/mmecpy()
- Linux学习总结(十六)系统用户及用户组管理
- 华为Mate 30系列将升级25W无线快充:充电方面无对手
- 跑酷游戏的一些bug总结(滥用FixedUpdate的坑)
- 安全测试SQL注入与XSS攻击
- STM32实战总结:HAL之数码管
- 拉普拉斯矩阵(Laplacian matrix)及其变体
- 从零学习游戏服务器开发(一) 从一款多人联机实时对战游戏开始
- 【AIS学习】08:6比特ASCII码表
- Python爬取15万条《我是余欢水》弹幕,还原一个丧到极致的中年人生
- sql 统计常用的sql
- ​AD设置丝印到阻焊的间距,并分析丝印重叠对阻焊的影响
- 桌面云计算机有没有处理器,云桌面延伸成云电脑,电脑是否真的要被淘汰?
- Java编程思想-并发
- websocket连接
- 人生原理 之 学习论
- 六 计算机故障分析及处理,计算机系统故障分析与处理
- F4V怎么转换MP4,F4V在线转MP4
热门文章
- java 网页正文抽取算法_网页正文抽取算法 ContentExtractor
- stackexchange.mysql_.net core使用redis基于StackExchange.Redis
- mysql 优化not null_mysql 优化之11:尽可能的使用 NOT NULL
- IAR STM32报错Error[Pe147]:declaration is incompatible with“__nounwind __interwork __softfp unsigned
- python压缩文件
- 安卓逆向_24( 一 ) --- Hook 框架 frida( Hook Java层 和 so层) )
- Java8 Stream详解~聚合(max/min/count)
- mysql插入实现存在更新_mysql 记录不存在时插入 记录存在则更新的实现方法
- php查询字段前30个字符,php/json我的字段名被截断为30个字符。我能停下来吗?
- php curl跨域cookie_php使用curl带cookie访问一直失败求助