若依框架------树形菜单

亦凉 2023-09-24 00:00 59阅读 0赞

# 一、介绍 #

![2b78cb8bb40a4d03b702c0a1d7e6224c.png][]

这是最后做好的效果，若依框架两个地方用到了这个这个树形菜单，一个是`部门表`，一个是`员工表编辑页面的选择部门框`，这里只做一个模态框的实现，具体数据回弹可以自己去看源码实现。

# 二、实现 #

## 1. 后端 ##

### 1.1 Controller ###

这个方法是用来返回树形数据的

@GetMapping("/treeData")
    @ResponseBody
    public List<Ztree> treeData()
    {
        List<Ztree> ztrees = pmsCategoryService.selectDeptTree(new PmsCategory());
        return ztrees;
    }

这个是用来展示模态框页面的

@GetMapping("/selectCategoryTree")
    public String selectDeptTree()
    {
        return prefix + "/tree";
    }

### 1.2 ServiceImpl ###

// 查询数据并做回显
    // selectDeptList 这个就是查询所有数据 select * from xxx;
    @Override
    public List<Ztree> selectDeptTree(PmsCategory pmsCategory) {
        List<PmsCategory> list = pmsCategoryMapper.selectCategoryList(pmsCategory);
        List<Ztree> ztrees = initZtree(list);
        return ztrees;
    }
    // 做回显的
    public List<Ztree> initZtree(List<PmsCategory> pmsCategoryList)
    {
        return initZtree(pmsCategoryList, null);
    }
    // 将数据转为树形结构
    public List<Ztree> initZtree(List<PmsCategory> deptList)
    {
        List<Ztree> ztrees = new ArrayList<Ztree>();
        for (PmsCategory p : deptList)
        {
            Ztree ztree = new Ztree();
            ztree.setId(p.getCatId());
            ztree.setpId(p.getParentCid());
            ztree.setName(p.getName());
            ztree.setTitle(p.getName());
            ztrees.add(ztree);
        }
        return ztrees;
    }

## 2. 前端 ##

### 2.1 category.html ###

看里面注释

![ad1e7949a21c4553b4676793e669fc4d.png][]

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <th:block th:include="include :: header('商品三级分类列表')" />
        <th:block th:include="include :: layout-latest-css" />
        <th:block th:include="include :: ztree-css" />
    </head>
    <body class="gray-bg">
    
    ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3830852268794095a39a82d024e2a9f3~tplv-k3u1fbpfcp-watermark.image?)
        
        
        <div class="ui-layout-west">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-grid"></i> 三级分类
                    </div>
                    <div class="box-tools pull-right">
                        <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理分类"><i class="fa fa-edit"></i></a>
                        <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                        <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                        <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新分类"><i class="fa fa-refresh"></i></button>
                    </div>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>
    
        
        <div class="ui-layout-center">
            <div class="container-div">
                <div class="row">
                    <div class="col-sm-12 search-collapse">
                        <form id="formId">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <label>分类名称：</label>
                                        <input type="text" name="name"/>
                                    </li>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
                                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
                                        
                                        <a class="btn btn-warning btn-rounded btn-sm" onclick="selectCategoryTree()"><i class="fa fa-refresh"></i> 展开数据</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
    
                    <div class="btn-group-sm" id="toolbar" role="group">
                        <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="pms:category:add">
                            <i class="fa fa-plus"></i> 添加
                        </a>
                        <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="pms:category:edit">
                            <i class="fa fa-edit"></i> 修改
                        </a>
                        <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="pms:category:remove">
                            <i class="fa fa-remove"></i> 删除
                        </a>
                    </div>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </div>
    
        <th:block th:include="include :: footer" />
        <th:block th:include="include :: layout-latest-js" />
        <th:block th:include="include :: ztree-js" />
        <script th:inline="javascript">
            var editFlag = [[${@permission.hasPermi('pms:category:edit')}]];
            var removeFlag = [[${@permission.hasPermi('pms:category:remove')}]];
            var prefix = ctx + "pms/category";
    
            /* 初始化页面，这部分直接复制粘贴即可 */
            $(function() {
                var panehHidden = false;
                if ($(this).width() < 769) {
                    panehHidden = true;
                }
                $('body').layout({ initClosed: panehHidden, west__size: 185 });
                // 回到顶部绑定
                if ($.fn.toTop !== undefined) {
                    var opt = {
                        win:$('.ui-layout-center'),
                        doc:$('.ui-layout-center')
                    };
                    $('#scroll-up').toTop(opt);
                }
                queryCategoryList();
                queryCategoryTree();
            });
    
            // 这个就是打开模态框列表的方法，绑定上面的按钮
            function selectCategoryTree() {
                var url = ctx + "pms/category/selectCategoryTree";
                var options = {
                    title: '选择分类',
                    width: "380",
                    url: url,
                    callBack: doSubmit
                };
                $.modal.openOptions(options);
            }
    
            // 这个方法直接复制粘贴即可
            function doSubmit(index, layero){
                var body = $.modal.getChildFrame(index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                $.modal.close(index);
            }
    
            // 这个就是 若依框架自己生成的方法，不用变
            function queryCategoryList() {
                var options = {
                    url: prefix + "/list",
                    createUrl: prefix + "/add",
                    updateUrl: prefix + "/edit/{id}",
                    removeUrl: prefix + "/remove",
                    exportUrl: prefix + "/export",
                    modalName: "商品三级分类",
                    columns: [{
                        checkbox: true
                    },
                    {
                        field: 'catId',
                        title: '分类id',
                        visible: false
                    },
                    {
                        field: 'name',
                        title: '分类名称'
                    },
                    {
                        field: 'parentCid',
                        title: '父分类id'
                    },
                    {
                        field: 'catLevel',
                        title: '层级'
                    },
                    {
                        field: 'showStatus',
                        title: '是否显示[0-不显示，1显示]'
                    },
                    {
                        field: 'sort',
                        title: '排序'
                    },
                    {
                        field: 'icon',
                        title: '图标地址'
                    },
                    {
                        field: 'productUnit',
                        title: '计量单位'
                    },
                    {
                        field: 'productCount',
                        title: '商品数量'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit('' + row.catId + '')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove('' + row.catId + '')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
                };
                $.table.init(options);
            }
    
            // 这个就是查询树形结构数据的方法
            function queryCategoryTree()
            {
                var url = ctx + "pms/category/treeData";
                var options = {
                    url: url,
                    expandLevel: 2,
                    onClick : zOnClick
                };
                $.tree.init(options);
    
                // 自己改一下 catId parentCid
                function zOnClick(event, treeId, treeNode) {
                    $("#catId").val(treeNode.id);
                    $("#parentCid").val(treeNode.pId);
                    $.table.search();
                }
            }
        </script>
    </body>
    </html>

## 2.2 tree.html ##

看注释

![cb19d32e2608445c9189c8f017712582.png][]

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    <head>
       <th:block th:include="include :: header('部门树选择')" />
       <th:block th:include="include :: ztree-css" />
    </head>
    <style>
       body{height:auto;font-family: "Microsoft YaHei";}
       button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
    </style>
    
    <body class="hold-transition box box-main">
       <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
          <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
          <label id="btnHide" title="隐藏搜索">︽</label>
       </div>
       <div class="treeSearchInput" id="search">
          <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
          <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>
       </div>
       <div class="treeExpandCollapse">
          <a href="#" onclick="$.tree.expand()">展开</a> /
          <a href="#" onclick="$.tree.collapse()">折叠</a>
       </div>
       <div id="tree" class="ztree treeselect"></div>
       </div>
       <th:block th:include="include :: footer" />
       <th:block th:include="include :: ztree-js" />
       <script th:inline="javascript">
           var prefix = ctx + "pms/category"
          // 展示列表的，自己改一下地址
          $(function() {
             var url = prefix + "/treeData";
             var options = {
                  url: url,
                  expandLevel: 2,
                  onClick : zOnClick
              };
             $.tree.init(options);
          });
          
          // 不用动，直接复制粘贴
          function zOnClick(event, treeId, treeNode) {
              var treeId = treeNode.id;
              var treeName = treeNode.name;
              $("#treeId").val(treeId);
              $("#treeName").val(treeName);
          }
       </script>
    </body>
    </html>

[2b78cb8bb40a4d03b702c0a1d7e6224c.png]: https://img-blog.csdnimg.cn/2b78cb8bb40a4d03b702c0a1d7e6224c.png
[ad1e7949a21c4553b4676793e669fc4d.png]: https://img-blog.csdnimg.cn/ad1e7949a21c4553b4676793e669fc4d.png
[cb19d32e2608445c9189c8f017712582.png]: https://img-blog.csdnimg.cn/cb19d32e2608445c9189c8f017712582.png