elementui后台对于树结构的数据封装问题

1.我们需要像前台展示数据为(需求分析)

 

 后台的数据为这种模式,

 在elementui中我们看到了他的展示方式为这种方式

我们的想法为:返回一个list集合,然后这个集合中只带有父节点,把子元素装入父节点,这样就形成了我们需要的结构形式了

2.实现方式

2.1,通过select直接把我们需要的结构查询出来(如果数据库过大,查询效率低下)

controller

 /**
    * 拿到数结构中的数据
     * 对于这个树结构我们只需要拿到父节点即可
    */
    @RequestMapping(value = "/treeData",method = RequestMethod.GET)
    @ResponseBody
    public List<CourseType> treeData()
    {
        return courseTypeService.getTopParent();
    }

因为我们直接从数据库把所有结构查询出来,所以我们不使用

在在Java类型中添加一个list集合

    /**
     * 自连接,我们查询出来的数据需要使用有子节点,
     * 并且符合前端的需求用于做数的前台展示
     */
    private List<CourseType> children;

其他的没什么区别

mapper中的

分为两步

1.查询所有的父节点

2.通过查询的父节点id找到所有的子元素

  <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="cn.jiedada.hrm.domain.CourseType">
        <id column="id" property="id" />
        <result column="createTime" property="createTime" />
        <result column="updateTime" property="updateTime" />
        <result column="name" property="name" />
        <result column="pid" property="pid" />
        <result column="logo" property="logo" />
        <result column="description" property="description" />
        <result column="sortIndex" property="sortIndex" />
        <result column="path" property="path" />
        <result column="totalCount" property="totalCount" />
        <!--
        property:该类的字段
        select:sql
        column:sql的的参数条件
        -->
        <collection property="children" select="selectAllChildren" column="id" javaType="arraylist"
        ofType="cn.jiedada.hrm.domain.CourseType">
            <id column="id" property="id" />
            <result column="createTime" property="createTime" />
            <result column="updateTime" property="updateTime" />
            <result column="name" property="name" />
            <result column="pid" property="pid" />
            <result column="logo" property="logo" />
            <result column="description" property="description" />
            <result column="sortIndex" property="sortIndex" />
            <result column="path" property="path" />
            <result column="totalCount" property="totalCount" />
        </collection>
    </resultMap>
    <!--通过查询所有父节点查询到父节点,获得id找到所有的子节点-->
    <select id="selectAllChildren" resultMap="BaseResultMap">
        SELECT
        <include refid="basicField"></include>
        FROM t_course_type
        WHERE pid=#{id}
    </select>
    <!--查询所有父节点-->
    <select id="selectTopParent" resultMap="BaseResultMap">
        SELECT
        <include refid="basicField"></include>
        FROM t_course_type
        WHERE pid=0
    </select>
    <sql id="basicField">
    id,
    createTime,
    updateTime,
    name,
    pid,
    logo,
    description,
    sortIndex,
    path,
    totalCount
    </sql>

2.2,先把我们需要的表的所有数据查询出来,在通过我们自己操作Java代码实现封装(推荐使用)

猜你喜欢

转载自www.cnblogs.com/xiaoruirui/p/11967809.html
今日推荐