实现商品类目选择功能
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 效果