java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果

效果如图:

2019121284721149.png?2019111284738

大概思路:树形视图使用的是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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 等值线图_python – matplotlib等值线图:对数刻度的比例色度级

我建议生成一个伪色条如下(见解释说明)&#xff1a;import matplotlib.pyplot as pltimport numpy as npfrom matplotlib.colors import LogNormimport matplotlib.gridspec as gridspecdelta 0.025x y np.arange(0, 3.01, delta)X, Y np.meshgrid(x, y)Z1 plt.mlab.bivar…

php链接本地mysql数据库配置文件_php连接 mysql 数据库如何添加一个公共的配置文件...

展开全部php面向对象文件名DB.class.php<?php header("content-type:text/html;charsetutf-8");class DB{public $db_host;//localhostpublic $db_user;//用户名public $db_pwd;//密码public $db_name;//数据库名public $links;//链接名称//构造方法e69da5e887aa…

mfc打开一个.txt文件并进行处理_文件处理方法Python

你好&#xff0c;我是goldsunC让我们一起进步吧&#xff01;1. 文件说明文件是存储在存储器上的数据序列&#xff0c;在计算机中&#xff0c;所有文件都是以二进制的方式进行存储的&#xff0c;而文件的展示形式一般分为两种&#xff1a;文本形式和二进制形式。文本文件由单一特…

navicat mysql 远程_Navicat for mysql 连接远程数据库

错误码1130&#xff1a;更改mysql数据库里的usermysql>use mysql;mysql>select host from user where userroot;mysql>update user set host % where user root;mysql>flush privileges;mysql>select host from user where userroot;错误码2003&#xff1a;1.m…

qt的如何调整显示不为科学记数法_Excel操作技巧:如何将信息快速准确的录入Excel?...

前面几篇文章中&#xff0c;给大家介绍了一些excel的基本操作技巧&#xff0c;以及如何高效地浏览表格。相信大家多少都会获得一点收获&#xff0c;希望能够为大家提供一些工作上的帮助。工作中&#xff0c;老板经常会安排我们手动输入一些数据&#xff0c;考虑到我们要不停的手…

如何给mysql表添加百万条数据_给mysql一百万条数据的表添加索引

直接alter table add index 添加索引&#xff0c;执行一个小时没反应&#xff0c;并且会导致锁表&#xff1b;故放弃该办法&#xff0c;最终解决办法如下&#xff1a;一.打开mysql 命令行客户端这里我们那可以看到导出的数据文件所存放的默认位置 C:\ProgramData\MySQL\MySQL …

qchart画完以后删除_冬天的夜晚很难画?老师分步骤教你画,简单易学,收藏起来临摹...

今日绘画主题&#xff1a;冬天的夜晚冬天是美好的&#xff0c;也是很多画家喜欢创作的题材之一&#xff0c;但是&#xff0c;冬天的夜晚却是很难画&#xff0c;今天分步骤图解教大家画冬天的夜晚&#xff0c;快收藏起来临摹吧。>>>【第一步】&#xff1a;先来画线稿&a…

mysql scws_apache+mysql+php+scws+myft_scws编译安装全程记录

1.首先编译安装apache&#xff0c;这里是下载的最新版apache 2.2.22版本[rootb2b soft]#tar zxvf httpd-2.2.22.tar.gz[rootb2b soft]#cd http-2.2.17[rootb2b http-2.2.22]#./configure --prefix/home/apache2.2.22 --enable-so --enable-rewrite --enable-ssl --enable-mods-…

python写前端和js_Python之路【第十二篇】前端之jsdomejQuery

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。1、存在方式functionfunc() {alert("Hello Shuaige")}2、javascrip…

mysql降级导入_mysql 升级和降级

1 官方推荐的两种升级方式&#xff1a;in-place upgradelogical upgrade2 升级之前&#xff1a;备份所有数据库&#xff0c;包括系统库mysql[rootDarren1 ~]# mysqldump -uroot -p147258 -A -B -F --master-data2 --events --single-transaction>/tmp/mysqlall.bak下载5.7.…

python process_Python Process/Thread 概念整理

进程与线程 并发与并行进程与线程首先要理解的是&#xff0c;我们的软件都是运行在操作系统之上&#xff0c;操作系统再控制硬件&#xff0c;比如 处理器、内存、IO设备等。操作系统为了向上层应用程序提供 简单一致 的机制来控制复杂而又大相径庭的低级硬件设备 抽象出 进程 的…

mysql技术内幕sampdb_MySQL技术内幕汇总

MySql技术内幕之MySQL入门(1)检查系统中是否已经安装了MySQLsudo netstat -tap | grep mysql若没有显示已安装结果&#xff0c;则没有安装。否则表示已经安装。sudo apt-get install mysql-server mysql-client安装过程中会让输入密码&#xff0c;记得把密码记住。登录mysql -u…

lrtemplate如何导入pr_PR模板使用套路讲解 视频剪辑教程

​pr模板在使用的时候需要注意的事项以及如何正确操作https://www.zhihu.com/video/1237765482302226432pr模板在使用的时候需要【注意的事项】1、下载的模板必须解压后使用2、下载模板的时候网站上页面都会有介绍模版所支持的版本3、弹出不同版本的提示窗口&#xff0c;点击确…

linux没有usr目录_了解linux系统目录,sys,tmp,usr,var!

linux小白到大神的成长之路&#xff1a;了解linux系统目录&#xff0c;sys,tmp,usr,var&#xff01;本经验由宗龙龙原创,全文共600多字&#xff0c;阅读需要14分钟&#xff0c;如果文中存在错误&#xff0c;还请大家多多指点&#xff0c;我会积极改进的&#xff01;​这篇文章将…

effective python目录_Effective python(七):协作开发

一&#xff0c;文档字符串1&#xff0c; 在函数&#xff0c;类&#xff0c;模块(顶端编写)下使用三个"""括起来内容即可2&#xff0c; 文档被关联到__doc__属性中&#xff0c;应尽量充分的描述其用法&#xff0c;作用&#xff0c;异常等等二&#xff0c;使用包来…

实用卷积神经网络 运用python pdf_解析卷积神经网络—深度学习实践手册 中文pdf高清版...

解析卷积神经网络—深度学习实践手册从实用角度着重解析了深度学习中的一类神经网络模型——卷积神经网络&#xff0c;向读者剖析了卷积神经网络的基本部件与工作机理&#xff0c;更重要的是系统性的介绍了深度卷积神经网络在实践应用方面的细节配置与工程经验。笔者希望本书“…

mysql语言和php语言_MySQL如何与PHP编程语言一起使用?

MySQL与PERL&#xff0c;C&#xff0c;C &#xff0c;JAVA和PHP等各种编程语言结合使用时效果很好。在这些语言中&#xff0c;PHP因其Web应用程序开发功能而成为最受欢迎的语言。PHP提供了各种功能来访问MySQL数据库并处理MySQL数据库内部的数据记录。您将需要以与调用其他任何…

svd奇异值分解_奇异值分解SVD

点击上方蓝字关注我们奇异值分解(SVD)在计算机视觉中有着广泛的应用&#xff0c;如数据降维、推荐系统、自然语言处理等。本文是介绍SVD的数学计算过程&#xff0c;并从SVD的性质说明其应用的原理。01特征值与特征向量奇异值分解(SVD)与特征分解类似&#xff0c;是将矩阵分解为…

python turtle画房子详细解释_[宜配屋]听图阁

我就废话不多说了&#xff0c;直接上代码吧&#xff01;import turtletturtle.Turtle()turtle.Turtle().screen.delay(0)tleftturtle.Turtle()#第一部分t.penup()t.goto(0,0)t.pendown()t.left(20)t.forward(110)t.left(25)t.forward(40)t.left(100)t.circle(180,20)t.right(12…

简易航空订票系统_四川航空APP全新升级改版,三大亮点提升订票体验

成都2015年10月23日电 /美通社/ -- 四川航空发布手机APP全新的3.0版本&#xff0c;不仅针对界面风格做了全新改变&#xff0c;在iOS9、安卓系统上的展示更加炫丽&#xff1b;而且在机票预订、航班动态、特价机票方面均做了大幅升级&#xff0c;会员服务也更加贴心。对于有机票需…