19.EasyUI中tree的使用

想实现如图所示的树状结构

1.前端js代码已经写好，需要后台提供数据进行展现

根据昨天学习的RESTful方法，可以把list省略换成method:GET

2.数据库表结构，如果你想要展现一棵树，那么在数据库对应的表中需要两个重要的字段parent_id（记录父节点是谁）和is_parent（记录当前自己是不是父节点）

CREATE TABLE `tb_item_cat` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目ID',
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父类目ID=0时，代表的是一级的类目',
  `name` varchar(50) DEFAULT NULL COMMENT '类目名称',
  `status` int(1) DEFAULT '1' COMMENT '状态。可选值:1(正常),2(删除)',
  `sort_order` int(4) DEFAULT NULL COMMENT '排列序号，表示同级类目的展现次序，如数值相等则按名称次序排列。取值范围:大于零的整数',
  `is_parent` tinyint(1) DEFAULT '1' COMMENT '该类目是否为父类目，1为true，0为false',
  `created` datetime DEFAULT NULL COMMENT '创建时间',
  `updated` datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`),
  KEY `parent_id` (`parent_id`,`status`) USING BTREE,
  KEY `sort_order` (`sort_order`)
) ENGINE=InnoDB AUTO_INCREMENT=1183 DEFAULT CHARSET=utf8 COMMENT='商品类目';

KEY ‘parent_id’,('parent_id','status') USING BTREE是联合索引

索引是一种数据结构，在这种数据结构中存储了表中某一列的所有值，也就是说索引是基于表中的某一列创建的。

关于数据库索引的知识请参考：

http://blog.csdn.net/weiliangliang111/article/details/51333169

http://blog.csdn.net/u013310119/article/details/52527632

3.后台需要做的：需要后台返回数据给前台，让前台调用进行1.步骤的js代码处理就可以展现效果。

3.1创建与表对应的pojo文件（这里用的是通用Mapper）

package com.taotao.manager.pojo;

import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;


@Table(name = "tb_item_cat")
public class ItemCat extends BasePojo {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private Long parentId;

    private String name;

    private Integer status;

    private Integer sortOrder;

    private Boolean isParent;

    public Long getId() {
        return id;
    }

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

    public Long getParentId() {
        return parentId;
    }

    public void setParentId(Long parentId) {
        this.parentId = parentId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public Integer getSortOrder() {
        return sortOrder;
    }

    public void setSortOrder(Integer sortOrder) {
        this.sortOrder = sortOrder;
    }

    public Boolean getIsParent() {
        return isParent;
    }

    public void setIsParent(Boolean isParent) {
        this.isParent = isParent;
    }
}

这里的类继承了BasePojo文件，是因为该文件包含了所有表都有的两个字段，就是updated和created

package com.taotao.manager.pojo;

import java.util.Date;

public abstract class BasePojo {
    
    private Date created;
    private Date updated;
    public Date getCreated() {
        return created;
    }
    public void setCreated(Date created) {
        this.created = created;
    }
    public Date getUpdated() {
        return updated;
    }
    public void setUpdated(Date updated) {
        this.updated = updated;
    }

}

3.2创建该pojo对应的mapper接口，实现通用mapper接口

package com.taotao.manager.mapper;

import com.github.abel533.mapper.Mapper;
import com.taotao.manager.pojo.ItemCat;

public interface ItemCatMapper extends Mapper<ItemCat> {

}

3.3编写service文件

3.4编写controller文件

关于controller的实现思路如下：

1.确定返回的类型

 2.查询时先获取一级类目，点击一级查询获取二级类目，点击二级查询获取三级类目，以此类推。

因为第一次请求的时候没有id，所以给一个默认值0。因为id是通过？id=XX的方式传递过来的，所以用@RequestParam来接收

查询结果如下：发现数据已经获取到，但是在前台并没有展现出来

没有显示的原因：

因为easyUI对tree的规定是返回类型格式如下：text表示显示的内容，state表示当前文件是处于打开还是关闭状态。

需要text和state两个状态值，但是我们返回的ItemCat中没有返回这两个值，所以出现了上面的情况。下面在ItemCat的文件中增加如下代码即可：

 // 扩展EasyUI的tree属性
    public String getText() {
        return getName();
    }

    public String getState() {
        return getIsParent() ? "closed" : "open";
    }

效果如下：