Easyui-Tree（异步树）插件

佚名 6年前 (2019-04-26) 随笔 949人围观抢沙发百度已收录

实现商品类目选择功能

1.　实现步骤

1.1　第一步：加载树控件

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

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