Extjs动态树形菜单

「爱情、让人受尽委屈。」 2022-06-10 03:25 227阅读 0赞

# 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.1
    Host: localhost:8080
    Connection: keep-alive
    X-Requested-With: XMLHttpRequest
    User-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"}]