• java实现分类下拉树，点击时对应搜索---后端逻辑

    一直想做分类下拉，然后选择后搜索的页面，正好做项目有了明确的需求，查找后发现el-tree的构件可满足需求，数据要求为：{ id:1,  label:name,  childer:[……]  }形式的，于是乎，开搞！

    一、效果预览

    点击后

    二、实现步骤

    1、数据库设计层面：

    在设计数据库的分类表时，需要设置为层级结构的样式，指明父分类id和祖分类id，如此才可满足分类需求。

    具体如下，比如我的书签分类表：markClass（以下只写出主要三列）

    属性数据类型字段说明举例
    markClassIdint书签分类的id1001
    parentidint该分类的上级分类id（父id）1000
    ancestorsstring该分类所有上属分类id（祖id）0,10,100,1000

    2、后端基础的构建

    依据表格完成对后端基础增删改的设置，可以用Ruoyi一键生成。以下主要说明插入时，ancestors的设置：

    插入时需要依据父分类id来完成对ancestors的设置。（注意设置ancestors的getter、setter方法）

    1. private MarkclassMapper markclassMapper;
    2. //这个是在你写的Impl层中的那个类里，你的selectById方法在哪里就引用哪个
    3.  
    4. public int insertMarkclass(Markclass markclass)
    5.     {
    6.        Markclass mar=
    7.        markclassMapper.selectMarkclassByMarkClassId(markclass.getParentid());
    8.        //依据传入的markclass对象的父分类id查找具体的分类
    9.  
    10.        markclass.setAncestors(mar.getAncestors()+","+markclass.getParentid());
    11.        //调用set方法。按照字符串拼接的方法，获取父分类所包含的祖分类id，并加上父分类id。
    12.  
    13.        return markclassMapper.insertMarkclass(markclass);
    14.  
    15.     }

    3、主代码——构建树相关

    （1）创建适配el-tree数据类型的类

    el-tree的构件数据要求为：{ id:1,  label:name,  childer:[……]  }形式，于是可定义一个“TreeSelect”类（类名称随意）

    1. package com.blhq.wjs.domain;
    2. import java.io.Serializable;
    3. import java.util.List;
    4. import java.util.stream.Collectors;
    5.  
    6. import com.blhq.common.core.domain.entity.SysMenu;
    7. import com.fasterxml.jackson.annotation.JsonInclude;
    8. //引入需要的你定义到的实体类
    9.  
    10. /**
    11.  * Treeselect树结构实体类
    12.  * 数据类型依据el-tree数据需求进行定义，即为：id、label、children，
    13.  * @author blhq
    14.  */
    15. public class TreeSelect implements Serializable
    16. {
    17.     private static final long serialVersionUID = 1L;
    18.  
    19.     /** 节点ID */
    20.     private Long id;
    21.  
    22.     /** 节点名称 */
    23.     private String label;
    24.  
    25.     /** 子节点 */
    26.     //    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    27.  
    28.     private List children;
    29.  
    30.     public TreeSelect(Class aclass) {
    31.         this.id = aclass.getClassid();
    32.         this.label = aclass.getClassname();
    33.         // 检查此处是否正确设置了 class_children 属性
    34.         this.children = aclass.getClass_children().
    35.         stream().map(TreeSelect::new).collect(Collectors.toList());
    36.     }
    37.     //写了多个TreeSelect构造类，以满足后续其它类型对象的调用，
    38.     public TreeSelect(Markclass markclass){
    39.         this.id=markclass.getMarkClassId();
    40.         this.label=markclass.getClassname();
    41.         this.children=markclass.getMarkChildren().
    42.         stream().map(TreeSelect::new).collect(Collectors.toList());
    43.     }
    44.  
    45.     public TreeSelect(SysMenu menu)
    46.     {
    47.         this.id = menu.getMenuId();
    48.         this.label = menu.getMenuName();
    49.         this.children = menu.getChildren().
    50.         stream().map(TreeSelect::new).collect(Collectors.toList());
    51.     }
    52.  
    53.  
    54.     public Long getId()
    55.     {
    56.         return id;
    57.     }
    58.  
    59.     public void setId(Long id)
    60.     {
    61.         this.id = id;
    62.     }
    63.  
    64.     public String getLabel()
    65.     {
    66.         return label;
    67.     }
    68.  
    69.     public void setLabel(String label)
    70.     {
    71.         this.label = label;
    72.     }
    73.  
    74.     public List getChildren()
    75.     {
    76.         return children;
    77.     }
    78.  
    79.     public void setChildren(List children)
    80.     {
    81.         this.children = children;
    82.     }
    83. }
    84.  
    85.

    补充：Markclass类

    1. private List markChildren=new ArrayList();
    2. //必须实例化，不然会报错java.lang.NullPointerException: null
    3. //同时设置getter、setter方法
    4. public List getMarkChildren() {
    5.         return markChildren;
    6. }
    7.  
    8. public void setMarkChildren(List markChildren) {
    9.         this.markChildren = markChildren;
    10.  }

    （2）service层：

    在你的service类中创建方法：（如果没有service层，则无视，直接看实现层操作即可）

    注意：部分返回值类型为刚刚定义的TreeSelect的列表。

    1.     public List selectMarkClassTreeList(Markclass markclass);
    2.     //接收用户传入的分类，即为当前操作的分类
    3.  
    4.     public List buildMarkClassTree(List markclassList);
    5.     //构建树的核心方法
    6.     
    7.     public List buildMarkClassTreeSelect(List classes);
    8.     
    9. //注意返回值类型为刚刚定义的TreeSelect的列表。

    （3）Impl实现层：

    核心代码：
    1.     @Override
    2.     public List selectMarkClassTreeList(Markclass markclass) {
    3.         //传入用户操作的分类，获取筛选后的书签分类列表
    4.         List markClasses = this.selectMarkclassList(markclass);
    5.         //selectMarkclassList()为查找分类列表用的方法，返回值为List类型
    6.         return buildMarkClassTreeSelect(markClasses);
    7.         //构建树
    8.     }
    9.  
    10.     @Override
    11.     public List buildMarkClassTreeSelect(List classes) {
    12.         List markClasses = buildMarkClassTree(classes);
    13.  
    14.         return markClasses.stream().map(TreeSelect::new).collect(Collectors.toList());
    15.     }
    16.     /**
    17.      * 构建前端所需要树结构
    18.      */
    19.     @Override
    20.     public List buildMarkClassTree(List markclassList) {
    21.         List returnList=new ArrayList();
    22.         存储当前分类出现的节点
    23.         List tempList = markclassList.stream().map(Markclass::getMarkClassId).collect(Collectors.toList());
    24.         for (Markclass markclass : markclassList) {
    25.             if(!tempList.contains(markclass.getParentid())){
    26.                 // 如果是顶级节点, 遍历该父节点的所有子节点
    27.                 recursionFn(markclassList, markclass);
    28.                 returnList.add(markclass);
    29.                 //不存在的加入进去，从而完成一整个树的遍历
    30.             }
    31.         }
    32.         if (returnList.isEmpty()) {
    33.             returnList = markclassList;
    34.         }
    35.         return returnList;
    36.  
    37.     }
    38.  
    39.     private void recursionFn(List list, Markclass t) {
    40.         // 递归。得到子节点列表
    41.         List childList = getChildList(list, t);
    42.         t.setMarkChildren(childList);
    43.         for (Markclass tChild : childList) {
    44.             if (hasChild(list, tChild)) {
    45.                 recursionFn(list, tChild);
    46.             }
    47.         }
    48.     }
    49.     /**
    50.      * 得到子节点列表
    51.      */
    52.     private List getChildList(List list, Markclass t) {
    53.         List tlist = new ArrayList();
    54.         for (Markclass n : list) {
    55.             if (StringUtils.isNotNull(n.getParentid()) && n.getParentid().longValue() == t.getMarkClassId().longValue()) {
    56.                 tlist.add(n);
    57.             }
    58.         }
    59.         return tlist;
    60.     }
    61.  
    62.     private boolean hasChild(List list, Markclass t) {
    63.         return getChildList(list, t).size() > 0;
    64.     }
    完整Impl层代码：
    1. package com.blhq.wjs.service.impl;
    2.  
    3. import java.util.ArrayList;
    4. import java.util.List;
    5. import java.util.stream.Collectors;
    6.  
    7. import com.blhq.common.utils.StringUtils;
    8. import com.blhq.wjs.domain.TreeSelect;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Service;
    11. import com.blhq.wjs.mapper.MarkclassMapper;
    12. import com.blhq.wjs.domain.Markclass;
    13. import com.blhq.wjs.service.IMarkclassService;
    14.  
    15. /**
    16.  * 书签分类Service业务层处理
    17.  * 
    18.  * @author blhq
    19.  * @date  2024-06-19
    20.  */
    21. @Service
    22. public class MarkclassServiceImpl implements IMarkclassService 
    23. {
    24.  
    25.     @Autowired
    26.     private MarkclassMapper markclassMapper;
    27.  
    28.     /**
    29.      * 查询书签分类
    30.      * 
    31.      * @param markClassId 书签分类主键
    32.      * @return 书签分类
    33.      */
    34.     @Override
    35.     public Markclass selectMarkclassByMarkClassId(Long markClassId)
    36.     {
    37.         return markclassMapper.selectMarkclassByMarkClassId(markClassId);
    38.     }
    39.  
    40.     /**
    41.      * 查询书签分类列表
    42.      * 
    43.      * @param markclass 书签分类
    44.      * @return 书签分类
    45.      */
    46.     @Override
    47.     public List selectMarkclassList(Markclass markclass)
    48.     {
    49.         return markclassMapper.selectMarkclassList(markclass);
    50.     }
    51.  
    52.     /**
    53.      * 新增书签分类
    54.      * 
    55.      * @param markclass 书签分类
    56.      * @return 结果
    57.      */
    58.     @Override
    59.     public int insertMarkclass(Markclass markclass)
    60.     {
    61.         if (markclass.getMarkClassId() == null) {
    62.             return markclassMapper.insertMarkclass(markclass);
    63.         }else {
    64.             Markclass mar=markclassMapper.selectMarkclassByMarkClassId(markclass.getParentid());
    65.             markclass.setAncestors(mar.getAncestors()+","+markclass.getParentid());
    66.             return markclassMapper.insertMarkclass(markclass);
    67.         }
    68.     }
    69.     /**
    70.      * 修改书签分类
    71.      * 
    72.      * @param markclass 书签分类
    73.      * @return 结果
    74.      */
    75.     @Override
    76.     public int updateMarkclass(Markclass markclass)
    77.     {
    78.         return markclassMapper.updateMarkclass(markclass);
    79.     }
    80.  
    81.     /**
    82.      * 批量删除书签分类
    83.      * 
    84.      * @param markClassIds 需要删除的书签分类主键
    85.      * @return 结果
    86.      */
    87.     @Override
    88.     public int deleteMarkclassByMarkClassIds(Long[] markClassIds)
    89.     {
    90.         return markclassMapper.deleteMarkclassByMarkClassIds(markClassIds);
    91.     }
    92.  
    93.     /**
    94.      * 删除书签分类信息
    95.      * 
    96.      * @param markClassId 书签分类主键
    97.      * @return 结果
    98.      */
    99.     @Override
    100.     public int deleteMarkclassByMarkClassId(Long markClassId)
    101.     {
    102.         return markclassMapper.deleteMarkclassByMarkClassId(markClassId);
    103.     }
    104.  
    105.  
    106.     @Override
    107.     public List selectMarkClassTreeList(Markclass markclass) {
    108.         //传入用户操作的分类，获取筛选后的书签分类列表
    109.         List markClasses = this.selectMarkclassList(markclass);
    110.         //selectMarkclassList()为查找分类列表用的方法，返回值为List类型
    111.         return buildMarkClassTreeSelect(markClasses);
    112.         //构建树
    113.     }
    114.  
    115.     @Override
    116.     public List buildMarkClassTreeSelect(List classes) {
    117.         List markClasses = buildMarkClassTree(classes);
    118.  
    119.         return markClasses.stream().map(TreeSelect::new).collect(Collectors.toList());
    120.     }
    121.     /**
    122.      * 构建前端所需要树结构
    123.      */
    124.     @Override
    125.     public List buildMarkClassTree(List markclassList) {
    126.         List returnList=new ArrayList();
    127.         存储当前分类出现的节点
    128.         List tempList = markclassList.stream().map(Markclass::getMarkClassId).collect(Collectors.toList());
    129.         for (Markclass markclass : markclassList) {
    130.             if(!tempList.contains(markclass.getParentid())){
    131.                 // 如果是顶级节点, 遍历该父节点的所有子节点
    132.                 recursionFn(markclassList, markclass);
    133.                 returnList.add(markclass);
    134.                 //不存在的加入进去，从而完成一整个树的遍历
    135.             }
    136.         }
    137.         if (returnList.isEmpty()) {
    138.             returnList = markclassList;
    139.         }
    140.         return returnList;
    141.  
    142.     }
    143.  
    144.     private void recursionFn(List list, Markclass t) {
    145.         // 递归。得到子节点列表
    146.         List childList = getChildList(list, t);
    147.         t.setMarkChildren(childList);
    148.         for (Markclass tChild : childList) {
    149.             if (hasChild(list, tChild)) {
    150.                 recursionFn(list, tChild);
    151.             }
    152.         }
    153.     }
    154.     /**
    155.      * 得到子节点列表
    156.      */
    157.     private List getChildList(List list, Markclass t) {
    158.         List tlist = new ArrayList();
    159.         for (Markclass n : list) {
    160.             if (StringUtils.isNotNull(n.getParentid()) && n.getParentid().longValue() == t.getMarkClassId().longValue()) {
    161.                 tlist.add(n);
    162.             }
    163.         }
    164.         return tlist;
    165.     }
    166.  
    167.     private boolean hasChild(List list, Markclass t) {
    168.         return getChildList(list, t).size() > 0;
    169.     }
    170.  
    171. }

    （4）controller层：

    这时候，我们直接添加即可：推荐把它放到对应需要分类显示的文件中，比如我的是在书签的controller中。

    1. @GetMapping("/deptTree")
    2.     public AjaxResult deptTree(Markclass markclass)
    3.     {
    4.         List list = markclassService.selectMarkClassTreeList(markclass);
    5.         return success(list);
    6.     }

    （5）xml文件：

    修改查找逻辑的语句：将分类的查询改为，从markclas表的ancestors查：

    1.     <select id="selectBookmarkList" parameterType="Bookmark" resultMap="BookmarkResult">
    2.         select b.markId, b.markName, b.markClassId, b.website, b.`desc`, b.createTime, b.editTime, b.icon, b.statue, b.commonGrade, b.allGrade, b.markPlot, b.likes, b.markExtend, c.classname, c.ancestors from bookmark b
    3.         left join markclass c on b.markClassId = c.markClassId
    4.         where 1=1
    5.             <if test="markId != null "> and markId = #{markId}</if>
    6.             <if test="markName != null  and markName != ''"> and markName like concat('%', #{markName}, '%')</if>
    7.             <if test="markClassId != null ">
    8.                 AND (b.markClassId = #{markClassId} OR b.markClassId IN ( SELECT c.markClassId FROM class c WHERE find_in_set(#{markClassId}, ancestors) ))
    9.             </if>
    10.             <if test="website != null  and website != ''"> and website like concat('%', #{website}, '%')</if>
    11.             <if test="desc != null  and desc != ''"> and b.`desc` like concat('%', #{desc}, '%')</if>
    12.             <if test="createTime != null "> and b.createTime &gt;= #{createTime}</if>
    13.             <if test="editTime != null "> and b.editTime &lt;= #{editTime}</if>
    14.             <if test="icon != null  and icon != ''"> and icon like concat('%', #{icon}, '%')</if>
    15.             <if test="statue != null "> and statue = #{statue}</if>
    16.             <if test="commonGrade != null "> and commonGrade = #{commonGrade}</if>
    17.             <if test="allGrade != null "> and allGrade like concat('%', #{allGrade}, '%')</if>
    18.             <if test="markPlot != null  and markPlot != ''"> and markPlot = #{markPlot}</if>
    19.             <if test="likes != null "> and likes like concat('%', #{likes}, '%')</if>
    20.             <if test="markExtend != null "> and markExtend like concat('%', #{markExtend}, '%')</if>
    21.     </select>

    4、前端应用：

    整体思路就是引用它，把它调过来使用就行。下面按我的思路来演示：

    （1）引入api：

    1. // 查询书签分类列表--tree
    2. export function markClassTreeSelect(query) {
    3.   return request({
    4.     url: '/markclass/markclass/deptTree',
    5.     method: 'get',
    6.     params: query
    7.   })
    8. }

    （2）页面导入

    注意将v-model中的值，改为你自己的。

    1. <template>
    2.    <el-row :gutter="20">
    3.       <el-col :span="4" :xs="24">
    4.         <div class="head-container">
    5.           <el-input
    6.             v-model="markName"
    7.             placeholder="请输入书签分类名称"
    8.             clearable
    9.             size="small"
    10.             prefix-icon="el-icon-search"
    11.             style="margin-bottom: 20px"
    12.           />
    13.         div>
    14.         <el-tree
    15.           :data="markOptions"
    16.           :props="defaultProps"
    17.           :expand-on-click-node="false"
    18.           :filter-node-method="filterNode"
    19.           ref="tree"
    20.           node-key="id"
    21.           default-expand-all
    22.           highlight-current
    23.           @node-click="handleNodeClick"
    24.         />
    25.         
    26.       el-col>
    27.  
    28.      <el-col :span="20" :xs="24">
    29.         …………
    30.      el-col>
    31.  el-row>
    32.  
    33.         …………//你的其它页面布局代码，上文gutter表示左侧分类栏占比大小。
    34.         
    35.  
    36. template>

    内需要添加的：

    1.    data() {
    2.     return {
    3.       //data内需要添加的数据：
    4.     
    5.       // 书签分类名称
    6.       markName:undefined,
    7.       // 书签分类选项
    8.       markOptions: undefined,
    9.       //设置分类数据样式：
    10.       defaultProps: {
    11.         children: "children",
    12.         //children：就是告诉el-tree，
    13.             //它需要的children，在你这里的数据，叫啥名，比如我的为children
    14.         //就是TreeSelect类中定义的children
    15.         label: "label"
    16.       },
    17. },
    18. },
    19.  
    20. watch: {
    21.     //在watch内，添加如下内容，没watch就自己加，在data(){},后面。
    22.     // 根据名称筛选树
    23.     markName(val) {
    24.       this.$refs.tree.filter(val);
    25.     }
    26.   },
    27.  
    28. created() {
    29.     //调用方法
    30.     this.getMarkTree();
    31.   },
    32.  
    33. methods: {
    34.  
    35.     // 获取书签分类树
    36.     getMarkTree() {
    37.       markClassTreeSelect().then(response => {
    38.         this.markOptions = response.data;
    39.         console.log(response.data);
    40.         // console.log(response);
    41.       });
    42.     },
    43.     // 筛选节点
    44.     filterNode(value, data) {
    45.       if (!value) return true;
    46.       return data.label.indexOf(value) !== -1;
    47.     },
    48.     // 节点单击事件
    49.     handleNodeClick(data) {
    50.       this.queryParams.markClassId = data.id;
    51.       this.handleQuery();
    52.     },
    53.  
    54. },

    5、成果展示：

    点击游戏类后：

    三、我遇到的问题

    （1）：无法自动装配。找不到'MarkclassMapper’类型的 Bean。

     方案：在MarkclassMapper中，最前面加入@Mapper注解即可

    （2）Failed to instantiate: Factory method 'sqlSessionFactory' threw exception; TypeException: The alias 'TreeSelect' is already mapped to the value 'com.blhq.wjs.domain.TreeSelect'.

    方案：如果提示这个，请把我们刚才定义的TreeSelect类，重构一下，改个名就行。

    更详细说明请看下文：

    分类树实现时遇见的bug：如XXXController

    EnhancerBySpringCGLIB" role="presentation" style="text-align: center; position: relative;">EnhancerBySpringCGLIB
    c8ca0a15 cannot be cast to XXX……-CSDN博客文章浏览阅读2次。实现分类树实现时遇见的bughttps://blog.csdn.net/qq_64595427/article/details/139843770?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22139843770%22%2C%22source%22%3A%22qq_64595427%22%7D

    如有问题，欢迎留言讨论哦~

  • 相关阅读:
    SqlServer中的集合运算符
    matlab之数组排序的方法和函数
    避免代价高昂的 ECM 集成错误的 3 个技巧
    世界环境日 | 周大福用心服务推动减碳环保
    《WEB安全渗透测试》（29）记一次HOST头投毒漏洞
    Elasticsearch：在 Elastic 中访问机器学习模型
    文字悬停效果
    算法通关村第六村-白银挑战树的层序遍历
    Flink1.15源码阅读——执行图executiongraph
    80C51单片机指令寻址方式
  • 原文地址：https://blog.csdn.net/qq_64595427/article/details/139810563