商品分类目录数据结构分析
说明:一般电商网站的商品分类信息,都是3级标题.
划分: 1级标题-2级标题-3级标题 标题是有所属关系的
/1.查询一级商品分类信息/
SELECT * FROM tb_item_cat WHERE parent_id = 0
/2.查询二级商品分类信息/
SELECT * FROM tb_item_cat WHERE parent_id = 1
/3.查询三级商品分类信息/
SELECT * FROM tb_item_cat WHERE parent_id = 24
EasyUI中树形结构说明
树形结构页面JS
$("#tree").tree({
url:"tree.json", //加载远程JSON数据
method:"get", //请求方式 POST
animate:true, //表示显示折叠端口动画效果
checkbox:true, //表述复选框
lines:false, //表示显示连接线
dnd:true, //是否拖拽
onClick:function(node){ //添加点击事件
//控制台
console.info(node);
}
});
树形JSON串数据结构类型
[{“id”:“3”,“text”:“吃鸡游戏”,“state”:“closed/open”}]
树形结构的VO对象-EasyUITree
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable{
private static final long serialVersionUID = 1L;
//如果对象涉及到网络传输 就必须序列号和反序列化.
//{"id":"3","text":"吃鸡游戏","state":"closed/open"}
private Long id; //数据库中的类型是Long
private String text; //定义节点名称
private String state; //控制节点打开/关闭
}
编辑ItemCatController
/**
* 业务需求: 查询一级商品分类信息
* Sql语句: SELECT * FROM tb_item_cat WHERE parent_id = 0
* url地址: /item/cat/list
* 返回值: List
*/
@RequestMapping("/list")
public List findItemCatList(){
Long parentId = 0L; //根据parentId=0 查询一级商品分类信息
return itemCatService.findItemCatListByParentId(parentId);
}
编辑ItemCatService
/**
* 据接口添加实现类的方法
* 业务思路:
* 1.用户传递的数据parentId
* 2.可以查询List数据库对象信息.
* 3.动态的将ItemCat对象转化为EasyUITree对象
* 3.但是返回值要求 返回List
*/
public List<EasyUITree> findItemCatListByParentId(Long parentId){
QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id",parentId);
List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper);
List<EasyUITree> treeList = new ArrayList<>(); //先准备一个空集合.
//需要将数据一个一个的格式转化.
for(ItemCat itemcat :itemCatList){
Long id = itemcat.getId(); //获取ID
String text = itemcat.getName(); //获取文本
//如果是父级,则默认应该处于关闭状态 closed, 如果不是父级 则应该处于打开状态. open
String state = itemcat.getIsParent()?"closed":"open";
//利用构造方法 为VO对象赋值 至此已经实现了数据的转化
EasyUITree tree = new EasyUITree(id,text,state);
treeList.add(tree);
}
//用户需要返回List<EasyUITree>
return treeList;
}
树形控件的加载规则
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为’id’,通过URL发送到服务器上面检索子节点。
前提条件: 1.这棵树必须初始化完成.
2.当点击节点按钮时,才会发起id的请求
当点击查询子级目录时,会传递当前节点的ID.
动态获取商品分类的ID
/**
* 业务需求: 查询一级商品分类信息
* Sql语句: SELECT * FROM tb_item_cat WHERE parent_id = 0
* url地址: /item/cat/list
* 返回值: List
*
* 实现异步树加载: id: xxxx
* 说明: 当展开一个封闭的节点,才会发起id的参数请求.前提条件是树必须先初始化.
* 应该先展现一级商品分类信息.
* 判断依据: id是否为null.如果为null则表示第一次查询 需要初始化ID 查询一级商品分类目录
*/
@RequestMapping("/list")
public List findItemCatList(Long id){
Long parentId = (id==null?0L:id); //根据parentId=0 查询一级商品分类信息
return itemCatService.findItemCatListByParentId(parentId);
}