Extjs动态树形菜单
来源:互联网 发布:java引用文件 编辑:程序博客网 时间:2024/05/17 17:16
Extjs动态树形菜单
树形菜单在各种管理系统使用非常广泛,同时市面上也有很多框架提供了动态树形菜单的生成,正好最近有项目用到Extjs所以下面介绍基于Extjs的动态树形菜单。
程序环境:extjs 4.2+spring-boot 后续版本的应该差距不大
模块设计
菜单分为三级菜单
secondleve(1)->(n)thirdlevel(1)->(n)fourthlevel彼此分别是一对多的关系
public class SecondlevelEntity { private String code; private String name; } public class ThirdlevelEntity { private String code; private String name; private String secondcode; } public class FourthlevelEntity { private String code; private String name; private String thirdcode; }
这是菜单需要展示三个具体的菜单信息,因此需要设计一个菜单类TreeMenu来封装前面定义的三种实体
public class TreeMenu { private String id;//菜单id号 private String text;//菜单名称 private boolean leaf;//是否叶子节点 private String url;//菜单绑定的url /** * 生成一级菜单 * * @param secondlevelEntities 需要封装的实体 * @param from 菜单使用场景 * @return */ public static List<TreeMenu> treeMenuSecond(List<SecondlevelEntity> secondlevelEntities, String from) { List<TreeMenu> treeMenus = new ArrayList<>(); if (secondlevelEntities != null && !secondlevelEntities.isEmpty()) { for (SecondlevelEntity second : secondlevelEntities ) { TreeMenu treeMenu = new TreeMenu(); treeMenu.setId(second.getCode()); treeMenu.setText(second.getName()); treeMenu.setLeaf(false); treeMenu.setUrl(Mids.getThirdTreeNodeUrl(from)); treeMenus.add(treeMenu); } } return treeMenus; } /** * 生成二级菜单 * * @param thirdlevelEntities * @return */ public static List<TreeMenu> treeMenuThird(List<ThirdlevelEntity> thirdlevelEntities, String from) { List<TreeMenu> treeMenus = new ArrayList<>(); if (thirdlevelEntities != null && !thirdlevelEntities.isEmpty()) { for (ThirdlevelEntity third : thirdlevelEntities ) { TreeMenu treeMenu = new TreeMenu(); treeMenu.setId(third.getCode()); treeMenu.setText(third.getName()); treeMenu.setLeaf(false); treeMenu.setUrl(Mids.getFourthTreeNodeUrl(from)); treeMenus.add(treeMenu); } } return treeMenus; } /** * 生成三级菜单 * * @param fourthlevelEntities * @return */ public static List<TreeMenu> treeMenuFourth(List<FourthlevelEntity> fourthlevelEntities, String from) { List<TreeMenu> treeMenus = new ArrayList<>(); for (FourthlevelEntity fourth : fourthlevelEntities ) { TreeMenu treeMenu = new TreeMenu(); treeMenu.setId(fourth.getCode()); treeMenu.setText(fourth.getName()); treeMenu.setLeaf(true); treeMenu.setUrl(Mids.getFourthTreeNodeUrl(from)); treeMenus.add(treeMenu); } return treeMenus; }}
Controller编写
因为是动态加载树形菜单,因此服务端需要接收前端传递过来的需要加载下级菜单的父菜单编号,并且耀指明动态树形菜单的加载场景,具体代码如下所示
/** * 生成树形菜单数据 * @param id * @param from * @return */ @RequestMapping("treeNode") @ResponseBody public List<TreeMenu> treeNode(@RequestParam(required = false) String id, @RequestParam(required = false) String from) { if (id == null || "".equalsIgnoreCase(id)) { try { //一级菜单默认加载全部 return TreeMenu.treeMenuSecond(secondlevelService.findAll(), from); } catch (Exception e) { e.printStackTrace(); } } else if (id.length() == 2) { //二级菜单加载指定一级菜单下属的二级菜单 return TreeMenu.treeMenuThird(thirdlevelService.findBySecondcode(id), from); } else if (id.length() == 4) { //三级菜单加载指定二级菜单下属的三级菜单 return TreeMenu.treeMenuFourth(fourthlevelService.findByThirdcode(id), from); } return null; }
Extjs设计
下面就是核心的Extjs界面设计了,首先需要设计用来包装菜单的Model,与服务端的TreeMenu类对应
/** * 菜单model */Ext.define('Menu', { extend: 'Ext.data.Model', fields: [{ name: 'id', type: 'string' }, { name: 'text', type: 'string' }, { name: 'url', type: 'string' }, { name: 'leaf', type: 'boolean' }]});
定义好了model就需要完成具体的树形菜单代码
/** * * @param from from:0、1;1代表材料体系管理 * @returns {Ext.tree.Pane} */function material_cltxTree(from) { return Ext.create('Ext.tree.Panel', { region: 'west', id: 'plWest', title: '树形菜单结构', width: 300, split: true, minWidth: 200, rootVisible: true, useArrows: true, collapsible: true, store: Ext.create('Ext.data.TreeStore', { nodeParam: 'id',//指定传递的参数名为id,后台通过id获取传递的值 model: 'Menu', root: {//根节点 id: '',//必须指定根节点的id值为''不然后台无法获取到id值 text: '树形菜单', leaf: false, expanded: false }, proxy: { type: 'ajax', url: '/m/cltx/treeNode?from=' + from, } }), listeners: {//菜单点击事件 'itemclick': function (view, record, item, index, e) { var id = record.get('id'); var text = record.get('text'); var url = record.get('url'); json_base.SelectedNodeId = id; json_base.url = url; material_LoadItems({id: id, text: text, url: url});//通过获取到点击的菜单数据获取想加载的数据 }, //单击节点展开之前的事件 'beforeitemclick': function (view, record, item, index, e) { return; } } });}
至此完成了动态树形菜单的生成
示例数据
request信息
GET /m/cltx/treeNode?from=1&_dc=1502247257389&id= HTTP/1.1Host: localhost:8080Connection: keep-aliveX-Requested-With: XMLHttpRequestUser-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36
response信息
[{"id":"01","text":"一级菜单1","leaf":false,"url":"/m/cltx/zl"},{"id":"02","text":"一级菜单2","leaf":false,"url":"/m/cltx/zl"},{"id":"03","text":"一级菜单3","leaf":false,"url":"/m/cltx/zl"},{"id":"04","text":"一级菜单4","leaf":false,"url":"/m/cltx/zl"},{"id":"05","text":"一级菜单5","leaf":false,"url":"/m/cltx/zl"}]
阅读全文
0 0
- Extjs动态树形菜单
- extjs springMVC实现动态树形菜单
- extjs制作树形菜单
- ExtJs定义树形菜单
- 又一个动态树形菜单
- 三级动态树形菜单
- 动态创建树形菜单
- extjs简单左边树形菜单布局
- ExtJs Treepanel 实现整个树形菜单刷新
- dtree实现动态加载树形菜单,动态插入树形菜单
- 动态生成javascript树形菜单
- 如何实现动态树形菜单
- JSP 实现动态树形菜单
- 动态树形菜单的实现
- extjs desktop 菜单动态生成
- Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单
- 树形菜单右键如何动态配置
- JavaScript动态生成树形菜单创建表格
- kotlin学习过程中的一些常识(持续更新中)
- 数值优化
- python的pandas学习笔记
- 用集合模拟栈,队列的基本操作
- Kafka 基本原理
- Extjs动态树形菜单
- 【SSM+highcharts】使用highcharts表格
- spring boot中统一异常处理
- js数组的常见操作( push、pop、unshift、shift、splice、concat、 join)的用法
- 时间格式化工具类,非常好用
- 算法导论 单源最短路径 Dijkstra
- (四)Android数据结构学习之栈
- unity中C#跟随和射线
- 事务不回滚