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";    }

效果如下：