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

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

一、介绍

2b78cb8bb40a4d03b702c0a1d7e6224c.png

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

二、实现

1. 后端

1.1 Controller

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

  1. @GetMapping("/treeData")
  2. @ResponseBody
  3. public List<Ztree> treeData()
  4. {
  5.     List<Ztree> ztrees = pmsCategoryService.selectDeptTree(new PmsCategory());
  6.     return ztrees;
  7. }

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

  1. @GetMapping("/selectCategoryTree")
  2. public String selectDeptTree()
  3. {
  4.     return prefix + "/tree";
  5. }

1.2 ServiceImpl

  1. // 查询数据并做回显
  2. // selectDeptList 这个就是查询所有数据 select * from xxx;
  3. @Override
  4. public List<Ztree> selectDeptTree(PmsCategory pmsCategory) {
  5.     List<PmsCategory> list = pmsCategoryMapper.selectCategoryList(pmsCategory);
  6.     List<Ztree> ztrees = initZtree(list);
  7.     return ztrees;
  8. }
  9. // 做回显的
  10. public List<Ztree> initZtree(List<PmsCategory> pmsCategoryList)
  11. {
  12.     return initZtree(pmsCategoryList, null);
  13. }
  14. // 将数据转为树形结构
  15. public List<Ztree> initZtree(List<PmsCategory> deptList)
  16. {
  17.     List<Ztree> ztrees = new ArrayList<Ztree>();
  18.     for (PmsCategory p : deptList)
  19.     {
  20.         Ztree ztree = new Ztree();
  21.         ztree.setId(p.getCatId());
  22.         ztree.setpId(p.getParentCid());
  23.         ztree.setName(p.getName());
  24.         ztree.setTitle(p.getName());
  25.         ztrees.add(ztree);
  26.     }
  27.     return ztrees;
  28. }

2. 前端

2.1 category.html

看里面注释

ad1e7949a21c4553b4676793e669fc4d.png

  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head>
  4.     <th:block th:include="include :: header('商品三级分类列表')" />
  5.     <th:block th:include="include :: layout-latest-css" />
  6.     <th:block th:include="include :: ztree-css" />
  7. </head>
  8. <body class="gray-bg">
  10. ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3830852268794095a39a82d024e2a9f3~tplv-k3u1fbpfcp-watermark.image?)
  11.     <!-- 这里需要创建两个DIV，分别设置class为 ui-layout-west 与 ui-layout-center-->
  12.     <!-- ui-layout-west 这部分DIV直接复制粘贴即可 -->
  13.     <div class="ui-layout-west">
  14.         <div class="box box-main">
  15.             <div class="box-header">
  16.                 <div class="box-title">
  17.                     <i class="fa icon-grid"></i> 三级分类
  18.                 </div>
  19.                 <div class="box-tools pull-right">
  20.                     <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理分类"><i class="fa fa-edit"></i></a>
  21.                     <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
  22.                     <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
  23.                     <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新分类"><i class="fa fa-refresh"></i></button>
  24.                 </div>
  25.             </div>
  26.             <div class="ui-layout-content">
  27.                 <div id="tree" class="ztree"></div>
  28.             </div>
  29.         </div>
  30.     </div>
  32.     <!-- 这里是第二个DIV，这部分DIV就是若依框架代码生成器生产的-->
  33.     <div class="ui-layout-center">
  34.         <div class="container-div">
  35.             <div class="row">
  36.                 <div class="col-sm-12 search-collapse">
  37.                     <form id="formId">
  38.                         <div class="select-list">
  39.                             <ul>
  40.                                 <li>
  41.                                     <label>分类名称：</label>
  42.                                     <input type="text" name="name"/>
  43.                                 </li>
  44.                                 <li>
  45.                                     <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
  46.                                     <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
  47.                                     <!-- 这个是我自己加的按钮，用来测试模态框的 -->
  48.                                     <a class="btn btn-warning btn-rounded btn-sm" onclick="selectCategoryTree()"><i class="fa fa-refresh"></i> 展开数据</a>
  49.                                 </li>
  50.                             </ul>
  51.                         </div>
  52.                     </form>
  53.                 </div>
  55.                 <div class="btn-group-sm" id="toolbar" role="group">
  56.                     <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="pms:category:add">
  57.                         <i class="fa fa-plus"></i> 添加
  58.                     </a>
  59.                     <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="pms:category:edit">
  60.                         <i class="fa fa-edit"></i> 修改
  61.                     </a>
  62.                     <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="pms:category:remove">
  63.                         <i class="fa fa-remove"></i> 删除
  64.                     </a>
  65.                 </div>
  66.                 <div class="col-sm-12 select-table table-striped">
  67.                     <table id="bootstrap-table"></table>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </div>
  73.     <th:block th:include="include :: footer" />
  74.     <th:block th:include="include :: layout-latest-js" />
  75.     <th:block th:include="include :: ztree-js" />
  76.     <script th:inline="javascript">
  77.         var editFlag = [[${@permission.hasPermi('pms:category:edit')}]];
  78.         var removeFlag = [[${@permission.hasPermi('pms:category:remove')}]];
  79.         var prefix = ctx + "pms/category";
  81.         /* 初始化页面，这部分直接复制粘贴即可 */
  82.         $(function() {
  83.             var panehHidden = false;
  84.             if ($(this).width() < 769) {
  85.                 panehHidden = true;
  86.             }
  87.             $('body').layout({ initClosed: panehHidden, west__size: 185 });
  88.             // 回到顶部绑定
  89.             if ($.fn.toTop !== undefined) {
  90.                 var opt = {
  91.                     win:$('.ui-layout-center'),
  92.                     doc:$('.ui-layout-center')
  93.                 };
  94.                 $('#scroll-up').toTop(opt);
  95.             }
  96.             queryCategoryList();
  97.             queryCategoryTree();
  98.         });
  100.         // 这个就是打开模态框列表的方法，绑定上面的按钮
  101.         function selectCategoryTree() {
  102.             var url = ctx + "pms/category/selectCategoryTree";
  103.             var options = {
  104.                 title: '选择分类',
  105.                 width: "380",
  106.                 url: url,
  107.                 callBack: doSubmit
  108.             };
  109.             $.modal.openOptions(options);
  110.         }
  112.         // 这个方法直接复制粘贴即可
  113.         function doSubmit(index, layero){
  114.             var body = $.modal.getChildFrame(index);
  115.             $("#treeId").val(body.find('#treeId').val());
  116.             $("#treeName").val(body.find('#treeName').val());
  117.             $.modal.close(index);
  118.         }
  120.         // 这个就是 若依框架自己生成的方法，不用变
  121.         function queryCategoryList() {
  122.             var options = {
  123.                 url: prefix + "/list",
  124.                 createUrl: prefix + "/add",
  125.                 updateUrl: prefix + "/edit/{id}",
  126.                 removeUrl: prefix + "/remove",
  127.                 exportUrl: prefix + "/export",
  128.                 modalName: "商品三级分类",
  129.                 columns: [{
  130.                     checkbox: true
  131.                 },
  132.                 {
  133.                     field: 'catId',
  134.                     title: '分类id',
  135.                     visible: false
  136.                 },
  137.                 {
  138.                     field: 'name',
  139.                     title: '分类名称'
  140.                 },
  141.                 {
  142.                     field: 'parentCid',
  143.                     title: '父分类id'
  144.                 },
  145.                 {
  146.                     field: 'catLevel',
  147.                     title: '层级'
  148.                 },
  149.                 {
  150.                     field: 'showStatus',
  151.                     title: '是否显示[0-不显示，1显示]'
  152.                 },
  153.                 {
  154.                     field: 'sort',
  155.                     title: '排序'
  156.                 },
  157.                 {
  158.                     field: 'icon',
  159.                     title: '图标地址'
  160.                 },
  161.                 {
  162.                     field: 'productUnit',
  163.                     title: '计量单位'
  164.                 },
  165.                 {
  166.                     field: 'productCount',
  167.                     title: '商品数量'
  168.                 },
  169.                 {
  170.                     title: '操作',
  171.                     align: 'center',
  172.                     formatter: function(value, row, index) {
  173.                         var actions = [];
  174.                         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> ');
  175.                         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>');
  176.                         return actions.join('');
  177.                     }
  178.                 }]
  179.             };
  180.             $.table.init(options);
  181.         }
  183.         // 这个就是查询树形结构数据的方法
  184.         function queryCategoryTree()
  185.         {
  186.             var url = ctx + "pms/category/treeData";
  187.             var options = {
  188.                 url: url,
  189.                 expandLevel: 2,
  190.                 onClick : zOnClick
  191.             };
  192.             $.tree.init(options);
  194.             // 自己改一下 catId parentCid
  195.             function zOnClick(event, treeId, treeNode) {
  196.                 $("#catId").val(treeNode.id);
  197.                 $("#parentCid").val(treeNode.pId);
  198.                 $.table.search();
  199.             }
  200.         }
  201.     </script>
  202. </body>
  203. </html>

2.2 tree.html

看注释

cb19d32e2608445c9189c8f017712582.png

  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4.    <th:block th:include="include :: header('部门树选择')" />
  5.    <th:block th:include="include :: ztree-css" />
  6. </head>
  7. <style>
  8.    body{height:auto;font-family: "Microsoft YaHei";}
  9.    button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
  10. </style>
  11. <!-- body 部分直接复制粘贴 -->
  12. <body class="hold-transition box box-main">
  13.    <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
  14.       <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
  15.       <label id="btnHide" title="隐藏搜索">︽</label>
  16.    </div>
  17.    <div class="treeSearchInput" id="search">
  18.       <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
  19.       <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>
  20.    </div>
  21.    <div class="treeExpandCollapse">
  22.       <a href="#" onclick="$.tree.expand()">展开</a> /
  23.       <a href="#" onclick="$.tree.collapse()">折叠</a>
  24.    </div>
  25.    <div id="tree" class="ztree treeselect"></div>
  26.    </div>
  27.    <th:block th:include="include :: footer" />
  28.    <th:block th:include="include :: ztree-js" />
  29.    <script th:inline="javascript">
  30.        var prefix = ctx + "pms/category"
  31.       // 展示列表的，自己改一下地址
  32.       $(function() {
  33.          var url = prefix + "/treeData";
  34.          var options = {
  35.               url: url,
  36.               expandLevel: 2,
  37.               onClick : zOnClick
  38.           };
  39.          $.tree.init(options);
  40.       });
  42.       // 不用动，直接复制粘贴
  43.       function zOnClick(event, treeId, treeNode) {
  44.           var treeId = treeNode.id;
  45.           var treeName = treeNode.name;
  46.           $("#treeId").val(treeId);
  47.           $("#treeName").val(treeName);
  48.       }
  49.    </script>
  50. </body>
  51. </html>

发表评论

表情：
评论列表 （有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读