Easyui-Tree（异步树）插件

实现商品类目选择功能

1.　实现步骤

1.1　第一步：加载树控件

　　1.定义类目选择的按钮。

　　（点击按钮，加载异步树控件）

　　2.加载异步树控件

　　3.查看EasyUI的API文档，我们知道：url是请求路径

1.2　第二步：确定加载树请求的参数

　　查看API文档，我们知道请求的参数名是id，是当前节点的id值。

1.3　第三步：确定树节点结构

　　查看API文档，节点包括id、text、state三个基本属性。

1.4　第四步：java代码实现异步树

1.4.1　代码结构

• Controller：负载从页面接收节点的id，返回该节点的所有子节点；
• Service：实现查询逻辑，根据父节点id，查询所有的子节点
• Mapper：基于BASEMapper实现

1.4.2　请求响应格式

• 请求路径：/item/cat/list
• 请求参数：id=nodeld（首次加载生成一级目录时，默认id=0）
• 响应格式：{"id":"1"　"text":"node1"　"state":"open"}

1.4.3　创建EUTreeNode类

在ego-base工程中创建

package cn.gz.base.vo;

/**
 * 自定义easyui异步树返回节点结构
 * @author Administrator
 *
 */
public class EUTreeNode {

    private long id;
    private String text;
    private String state;    //open|closed    open表示叶子节点
    public long getId() {
        return id;
    }
    public void setId(long id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
    public EUTreeNode() {
        super();
    }
    
}

1.2.4　创建ItemCat类

在ego-base工程中创建

package cn.gz.base.pojo;

import java.util.Date;

import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;

@TableName(value="tb_item_cat")
public class ItemCat {

    @TableId
    private Long id;  // bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目ID',
    private Long parentId;  // bigint(20) DEFAULT NULL COMMENT '父类目ID=0时，代表的是一级的类目',
    private String name;  // varchar(50) DEFAULT NULL COMMENT '类目名称',
    private Integer status;  // int(1) DEFAULT '1' COMMENT '状态。可选值:1(正常),2(删除)',
    private int sortOrder;  // int(4) DEFAULT NULL COMMENT '排列序号，表示同级类目的展现次序，如数值相等则按名称次序排列。取值范围:大于零的整数',
    private byte isParent;  // tinyint(1) DEFAULT '1' COMMENT '该类目是否为父类目，1为true，0为false',
    private Date created;  // datetime DEFAULT NULL COMMENT '创建时间',
    private Date updated;  // datetime DEFAULT NULL COMMENT '创建时间',
    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 int getSortOrder() {
        return sortOrder;
    }
    public void setSortOrder(int sortOrder) {
        this.sortOrder = sortOrder;
    }
    public byte getIsParent() {
        return isParent;
    }
    public void setIsParent(byte isParent) {
        this.isParent = isParent;
    }
    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;
    }
    
}

1.2.5　创建ItemCatMapper接口

在ego-base中创建

package cn.gz.base.mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;

import cn.gz.base.pojo.ItemCat;

public interface ItemCatMapper extends BaseMapper<ItemCat> {

}

1.2.6　创建ItemCatService接口及实现类

在ego-manager项目中创建

package cn.gz.manager.service;

import java.util.List;

import cn.gz.base.vo.EUTreeNode;

public interface ItemCatService {

    /**
     * 根据父目录的id，获取子目录，并将结果转换成异步树的节点结构
     * @param parent_id
     * @return
     */
    List<EUTreeNode> getNodesByParentId(Long parent_id);
}

@Service
public class ItemCatServiceImpl implements ItemCatService {

    @Autowired
    private ItemCatMapper mapper;
    
    @Override
    public List<EUTreeNode> getNodesByParentId(Long parent_id) {
        
        List<EUTreeNode> nodes = new ArrayList<>();
        
        EntityWrapper<ItemCat> wrapper = new EntityWrapper<>();
        wrapper.eq("parent_id", parent_id);
        List<ItemCat> list = mapper.selectList(wrapper);
        
        EUTreeNode node = null;
        for (ItemCat itemCat : list) {
            node = new EUTreeNode();
            node.setId(itemCat.getId());
            node.setText(itemCat.getName());
            if(0==itemCat.getIsParent()){
                node.setState("open"); //open表示叶子节点 closed表示目录
            }else{
                node.setState("closed");
            }
            nodes.add(node);
        }
        
        return nodes;
    }

}

1.2.7　创建ItemCatControoler类

@Controller
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService catService;
    
    @RequestMapping("/list")
    @ResponseBody
    public List<EUTreeNode> getByParentId(@RequestParam(name="id",defaultValue="0")Long parentId){
        List<EUTreeNode> nodes = catService.getNodesByParentId(parentId);
        
        return nodes;
    }
    
}

1.3　保存类名id到页面表单

　　说明：当点击叶子节点时，将该节点的id值，保存到页面表单中。

　　类目id的值，保存在页面表单的位置：

1.4　效果