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方法)

private MarkclassMapper markclassMapper;
//这个是在你写的Impl层中的那个类里,你的selectById方法在哪里就引用哪个

public int insertMarkclass(Markclass markclass)
    {
       Markclass mar=
       markclassMapper.selectMarkclassByMarkClassId(markclass.getParentid());
       //依据传入的markclass对象的父分类id查找具体的分类

       markclass.setAncestors(mar.getAncestors()+","+markclass.getParentid());
       //调用set方法。按照字符串拼接的方法,获取父分类所包含的祖分类id,并加上父分类id。

       return markclassMapper.insertMarkclass(markclass);

    }

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

(1)创建适配el-tree数据类型的类

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

package com.blhq.wjs.domain;
import java.io.Serializable;
import java.util.List;
import java.util.stream.Collectors;

import com.blhq.common.core.domain.entity.SysMenu;
import com.fasterxml.jackson.annotation.JsonInclude;
//引入需要的你定义到的实体类

/**
 * Treeselect树结构实体类
 * 数据类型依据el-tree数据需求进行定义,即为:id、label、children,
 * @author blhq
 */
public class TreeSelect implements Serializable
{
    private static final long serialVersionUID = 1L;

    /** 节点ID */
    private Long id;

    /** 节点名称 */
    private String label;

    /** 子节点 */
    //    @JsonInclude(JsonInclude.Include.NON_EMPTY)

    private List<TreeSelect> children;

    public TreeSelect(Class aclass) {
        this.id = aclass.getClassid();
        this.label = aclass.getClassname();
        // 检查此处是否正确设置了 class_children 属性
        this.children = aclass.getClass_children().
        stream().map(TreeSelect::new).collect(Collectors.toList());
    }
    //写了多个TreeSelect构造类,以满足后续其它类型对象的调用,
    public TreeSelect(Markclass markclass){
        this.id=markclass.getMarkClassId();
        this.label=markclass.getClassname();
        this.children=markclass.getMarkChildren().
        stream().map(TreeSelect::new).collect(Collectors.toList());
    }

    public TreeSelect(SysMenu menu)
    {
        this.id = menu.getMenuId();
        this.label = menu.getMenuName();
        this.children = menu.getChildren().
        stream().map(TreeSelect::new).collect(Collectors.toList());
    }


    public Long getId()
    {
        return id;
    }

    public void setId(Long id)
    {
        this.id = id;
    }

    public String getLabel()
    {
        return label;
    }

    public void setLabel(String label)
    {
        this.label = label;
    }

    public List<TreeSelect> getChildren()
    {
        return children;
    }

    public void setChildren(List<TreeSelect> children)
    {
        this.children = children;
    }
}


补充:Markclass类

private List<Markclass> markChildren=new ArrayList<Markclass>();
//必须实例化,不然会报错java.lang.NullPointerException: null
//同时设置getter、setter方法
public List<Markclass> getMarkChildren() {
        return markChildren;
}

public void setMarkChildren(List<Markclass> markChildren) {
        this.markChildren = markChildren;
 }

(2)service层:

在你的service类中创建方法:(如果没有service层,则无视,直接看实现层操作即可)

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

    public List<TreeSelect> selectMarkClassTreeList(Markclass markclass);
    //接收用户传入的分类,即为当前操作的分类

    public List<Markclass> buildMarkClassTree(List<Markclass> markclassList);
    //构建树的核心方法
    
    public List<TreeSelect> buildMarkClassTreeSelect(List<Markclass> classes);
    
//注意返回值类型为刚刚定义的TreeSelect的列表。

(3)Impl实现层:

核心代码:
    @Override
    public List<TreeSelect> selectMarkClassTreeList(Markclass markclass) {
        //传入用户操作的分类,获取筛选后的书签分类列表
        List<Markclass> markClasses = this.selectMarkclassList(markclass);
        //selectMarkclassList()为查找分类列表用的方法,返回值为List<Markclass>类型
        return buildMarkClassTreeSelect(markClasses);
        //构建树
    }

    @Override
    public List<TreeSelect> buildMarkClassTreeSelect(List<Markclass> classes) {
        List<Markclass> markClasses = buildMarkClassTree(classes);

        return markClasses.stream().map(TreeSelect::new).collect(Collectors.toList());
    }
    /**
     * 构建前端所需要树结构
     */
    @Override
    public List<Markclass> buildMarkClassTree(List<Markclass> markclassList) {
        List<Markclass> returnList=new ArrayList<Markclass>();
        存储当前分类出现的节点
        List<Long> tempList = markclassList.stream().map(Markclass::getMarkClassId).collect(Collectors.toList());
        for (Markclass markclass : markclassList) {
            if(!tempList.contains(markclass.getParentid())){
                // 如果是顶级节点, 遍历该父节点的所有子节点
                recursionFn(markclassList, markclass);
                returnList.add(markclass);
                //不存在的加入进去,从而完成一整个树的遍历
            }
        }
        if (returnList.isEmpty()) {
            returnList = markclassList;
        }
        return returnList;

    }

    private void recursionFn(List<Markclass> list, Markclass t) {
        // 递归。得到子节点列表
        List<Markclass> childList = getChildList(list, t);
        t.setMarkChildren(childList);
        for (Markclass tChild : childList) {
            if (hasChild(list, tChild)) {
                recursionFn(list, tChild);
            }
        }
    }
    /**
     * 得到子节点列表
     */
    private List<Markclass> getChildList(List<Markclass> list, Markclass t) {
        List<Markclass> tlist = new ArrayList<Markclass>();
        for (Markclass n : list) {
            if (StringUtils.isNotNull(n.getParentid()) && n.getParentid().longValue() == t.getMarkClassId().longValue()) {
                tlist.add(n);
            }
        }
        return tlist;
    }

    private boolean hasChild(List<Markclass> list, Markclass t) {
        return getChildList(list, t).size() > 0;
    }
完整Impl层代码:
package com.blhq.wjs.service.impl;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

import com.blhq.common.utils.StringUtils;
import com.blhq.wjs.domain.TreeSelect;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.blhq.wjs.mapper.MarkclassMapper;
import com.blhq.wjs.domain.Markclass;
import com.blhq.wjs.service.IMarkclassService;

/**
 * 书签分类Service业务层处理
 * 
 * @author blhq
 * &#064;date  2024-06-19
 */
@Service
public class MarkclassServiceImpl implements IMarkclassService 
{

    @Autowired
    private MarkclassMapper markclassMapper;

    /**
     * 查询书签分类
     * 
     * @param markClassId 书签分类主键
     * @return 书签分类
     */
    @Override
    public Markclass selectMarkclassByMarkClassId(Long markClassId)
    {
        return markclassMapper.selectMarkclassByMarkClassId(markClassId);
    }

    /**
     * 查询书签分类列表
     * 
     * @param markclass 书签分类
     * @return 书签分类
     */
    @Override
    public List<Markclass> selectMarkclassList(Markclass markclass)
    {
        return markclassMapper.selectMarkclassList(markclass);
    }

    /**
     * 新增书签分类
     * 
     * @param markclass 书签分类
     * @return 结果
     */
    @Override
    public int insertMarkclass(Markclass markclass)
    {
        if (markclass.getMarkClassId() == null) {
            return markclassMapper.insertMarkclass(markclass);
        }else {
            Markclass mar=markclassMapper.selectMarkclassByMarkClassId(markclass.getParentid());
            markclass.setAncestors(mar.getAncestors()+","+markclass.getParentid());
            return markclassMapper.insertMarkclass(markclass);
        }
    }
    /**
     * 修改书签分类
     * 
     * @param markclass 书签分类
     * @return 结果
     */
    @Override
    public int updateMarkclass(Markclass markclass)
    {
        return markclassMapper.updateMarkclass(markclass);
    }

    /**
     * 批量删除书签分类
     * 
     * @param markClassIds 需要删除的书签分类主键
     * @return 结果
     */
    @Override
    public int deleteMarkclassByMarkClassIds(Long[] markClassIds)
    {
        return markclassMapper.deleteMarkclassByMarkClassIds(markClassIds);
    }

    /**
     * 删除书签分类信息
     * 
     * @param markClassId 书签分类主键
     * @return 结果
     */
    @Override
    public int deleteMarkclassByMarkClassId(Long markClassId)
    {
        return markclassMapper.deleteMarkclassByMarkClassId(markClassId);
    }


    @Override
    public List<TreeSelect> selectMarkClassTreeList(Markclass markclass) {
        //传入用户操作的分类,获取筛选后的书签分类列表
        List<Markclass> markClasses = this.selectMarkclassList(markclass);
        //selectMarkclassList()为查找分类列表用的方法,返回值为List<Markclass>类型
        return buildMarkClassTreeSelect(markClasses);
        //构建树
    }

    @Override
    public List<TreeSelect> buildMarkClassTreeSelect(List<Markclass> classes) {
        List<Markclass> markClasses = buildMarkClassTree(classes);

        return markClasses.stream().map(TreeSelect::new).collect(Collectors.toList());
    }
    /**
     * 构建前端所需要树结构
     */
    @Override
    public List<Markclass> buildMarkClassTree(List<Markclass> markclassList) {
        List<Markclass> returnList=new ArrayList<Markclass>();
        存储当前分类出现的节点
        List<Long> tempList = markclassList.stream().map(Markclass::getMarkClassId).collect(Collectors.toList());
        for (Markclass markclass : markclassList) {
            if(!tempList.contains(markclass.getParentid())){
                // 如果是顶级节点, 遍历该父节点的所有子节点
                recursionFn(markclassList, markclass);
                returnList.add(markclass);
                //不存在的加入进去,从而完成一整个树的遍历
            }
        }
        if (returnList.isEmpty()) {
            returnList = markclassList;
        }
        return returnList;

    }

    private void recursionFn(List<Markclass> list, Markclass t) {
        // 递归。得到子节点列表
        List<Markclass> childList = getChildList(list, t);
        t.setMarkChildren(childList);
        for (Markclass tChild : childList) {
            if (hasChild(list, tChild)) {
                recursionFn(list, tChild);
            }
        }
    }
    /**
     * 得到子节点列表
     */
    private List<Markclass> getChildList(List<Markclass> list, Markclass t) {
        List<Markclass> tlist = new ArrayList<Markclass>();
        for (Markclass n : list) {
            if (StringUtils.isNotNull(n.getParentid()) && n.getParentid().longValue() == t.getMarkClassId().longValue()) {
                tlist.add(n);
            }
        }
        return tlist;
    }

    private boolean hasChild(List<Markclass> list, Markclass t) {
        return getChildList(list, t).size() > 0;
    }

}

(4)controller层:

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

@GetMapping("/deptTree")
    public AjaxResult deptTree(Markclass markclass)
    {
        List<TreeSelect> list = markclassService.selectMarkClassTreeList(markclass);
        return success(list);
    }

(5)xml文件:

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

    <select id="selectBookmarkList" parameterType="Bookmark" resultMap="BookmarkResult">
        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
        left join markclass c on b.markClassId = c.markClassId
        where 1=1
            <if test="markId != null "> and markId = #{markId}</if>
            <if test="markName != null  and markName != ''"> and markName like concat('%', #{markName}, '%')</if>
            <if test="markClassId != null ">
                AND (b.markClassId = #{markClassId} OR b.markClassId IN ( SELECT c.markClassId FROM class c WHERE find_in_set(#{markClassId}, ancestors) ))
            </if>
            <if test="website != null  and website != ''"> and website like concat('%', #{website}, '%')</if>
            <if test="desc != null  and desc != ''"> and b.`desc` like concat('%', #{desc}, '%')</if>
            <if test="createTime != null "> and b.createTime &gt;= #{createTime}</if>
            <if test="editTime != null "> and b.editTime &lt;= #{editTime}</if>
            <if test="icon != null  and icon != ''"> and icon like concat('%', #{icon}, '%')</if>
            <if test="statue != null "> and statue = #{statue}</if>
            <if test="commonGrade != null "> and commonGrade = #{commonGrade}</if>
            <if test="allGrade != null "> and allGrade like concat('%', #{allGrade}, '%')</if>
            <if test="markPlot != null  and markPlot != ''"> and markPlot = #{markPlot}</if>
            <if test="likes != null "> and likes like concat('%', #{likes}, '%')</if>
            <if test="markExtend != null "> and markExtend like concat('%', #{markExtend}, '%')</if>
    </select>

4、前端应用:

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

(1)引入api:

// 查询书签分类列表--tree
export function markClassTreeSelect(query) {
  return request({
    url: '/markclass/markclass/deptTree',
    method: 'get',
    params: query
  })
}

(2)页面导入

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

<template>
   <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="markName"
            placeholder="请输入书签分类名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <el-tree
          :data="markOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
        <!--        </div>-->
      </el-col>

     <el-col :span="20" :xs="24">
        …………
     </el-col>
 </el-row>

        …………//你的其它页面布局代码,上文gutter表示左侧分类栏占比大小。
        

</template>

<script></script>内需要添加的:

   data() {
    return {
      //data内需要添加的数据:
    
      // 书签分类名称
      markName:undefined,
      // 书签分类选项
      markOptions: undefined,
      //设置分类数据样式:
      defaultProps: {
        children: "children",
        //children:就是告诉el-tree,
            //它需要的children,在你这里的数据,叫啥名,比如我的为children
        //就是TreeSelect类中定义的children
        label: "label"
      },
},
},

watch: {
    //在watch内,添加如下内容,没watch就自己加,在data(){},后面。
    // 根据名称筛选树
    markName(val) {
      this.$refs.tree.filter(val);
    }
  },

created() {
    //调用方法
    this.getMarkTree();
  },

methods: {

    // 获取书签分类树
    getMarkTree() {
      markClassTreeSelect().then(response => {
        this.markOptions = response.data;
        console.log(response.data);
        // console.log(response);
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.markClassId = data.id;
      this.handleQuery();
    },

},

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$$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

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

  • 29
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值