EasyUI之生成动态异步菜单栏

网友投稿 847 2022-11-02

EasyUI之生成动态异步菜单栏

EasyUI之生成动态异步菜单栏

在项目开发中,对于整体的页面布局中对于菜单导航栏我们一般设计为根据不同的用户权限展示不同的菜单选项,同时菜单显示也会做异步加载处理。本文就来介绍下基于EasyUI的tree插件来实现导航栏的异步加载实现。

EasyUI中tree的异步加载

1.实现效果

首先我们来看下最终的实现效果,具体如下。

2.表结构设计

因为在tree插件显示数据的时候对应查询的json数据的字段有要求,具体参考官网:​​,所以为了避免查询的数据和需要显示的数据不一致而造成的数据的转换,所以在设计表结构的时候可以注意下。菜单的结构如下:

测试数据

3.服务端处理

通过mybatis的逆向工程生成相关的接口,映射文件和pojo文件等。然后在controller中定义处理请求的方法,接收查询菜单的id。返回JSON数据,如下:

/** * 异步查询菜单【node】信息 * @param id * @return */@RequestMapping("/getNode")@ResponseBodypublic List

getNode(Integer id){ Menu menu = new Menu(); if(id !=null && id > 0){ menu.setParentId(id); }else{ menu.setParentId(0); } return menuService.query(menu);}

然后在控制器中具体处理请求

public List

query(Menu menu) { MenuExample example = new MenuExample(); MenuExample.Criteria criteria = example.createCriteria(); if(menu!=null){ if(menu.getParentId()!=null ){ // 根据父菜单编号查询 criteria.andParentIdEqualTo(menu.getParentId()); }else{ criteria.andParentIdEqualTo(0); } } return menuMapper.selectByExample(example);}

4.页面js代码实现

home界面的主要代码如下:

欢迎光临

加载导航菜单的核心代码:

因为我们的表结构设计的tree默认的字段是一致的所以省略掉了转换的过程,如果不一致还需要将查询的数据转换为满足tree展示的数据要求。至于根据账号的权限来查询不同的菜单仅仅只需要在业务逻辑层加上账号的条件即可了。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Leaf - 一个开发友好、功能完备的开源微信商城框架
下一篇:Spring Cloud源码分析之Eureka第四章:服务注册是如何发起的
相关文章

 发表评论

暂时没有评论,来抢沙发吧~