商品分类树形结构展现

最新推荐文章于 2023-05-16 11:42:36 发布

ZH.cat

最新推荐文章于 2023-05-16 11:42:36 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/Crazy_sounding/article/details/108331234

版权

1 弹出框效果说明

$("#btn1").bind("click",function(){
			
			$("#win1").window({
				title:"弹出框",
				width:400,
				height:400,
				modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
			})
		})

2 商品分类数据结构分析

说明:一般电商网址的商品分类信息一般都是3级菜单. 级与级之间存在父子级关系. 在数据库中应该如何存储???
解答: 一般涉及到父子级关系时,一般采用parentId的形式进行关联.
例如: 查询一级商品分类信息:

/*查询一级商品分类信息 父级Id=0*/
select * from tb_item_cat where parent_id=0;
/*查询二级商品分类信息 父级一级ID*/
SELECT * FROM tb_item_cat WHERE parent_id=1;
/*查询三级商品分类信息 父级二级ID*/
SELECT * FROM tb_item_cat WHERE parent_id=2;

在这里插入图片描述

3 树形结构分析

3.1 页面分析

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3-菜单按钮</title>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
	/*通过js创建树形结构 */
	$(function(){
		$("#tree").tree({
			url:"tree.json",		//加载远程JSON数据   ajax请求
			method:"get",			//请求方式  POST
			animate:false,			//表示显示折叠端口动画效果
			checkbox:true,			//表述复选框
			lines:true,				//表示显示连接线
			dnd:true,				//是否拖拽
			onClick:function(node){	//添加点击事件
				
				//控制台
				console.info(node);
			}
		});
	})
</script>
</head>
	<body>
		<h1>EasyUI-树形结构</h1>
		<!--  ul-li 定义树形结构-->
		<ul id="tree"></ul>
	</body>
</html>

3.2 关于树形结构JSON串返回值分析

[
	{
		"id":"3",
		"text":"吃鸡游戏",
		"state":"open"
	}
]

3.3 封装EasyUITree VO对象

package com.jt.vo;

import lombok.Data;
import lombok.experimental.Accessors;

//该对象的主要的目的是为了展现树形结构的数据.
@Data
@Accessors(chain = true)
public class EasyUITree implements Serializable{
    //"id":"3","text":"吃鸡游戏","state":"open/closed" 数据来源 数据表
    private Long id;       //商品分类的Id信息
    private String text;   //商品分类name属性
    private String state;  //由是否为父级决定 如果是父级则关闭closed 否则为子级open
}

3.3 商品分类展现页面说明

在这里插入图片描述

3.4 编辑ItemCatController

 /**
     * 业务需求: 实现商品分类的展现
     * url地址: http://localhost:8091/item/cat/list
     * 参数:    parentId = 0  查询一级商品分类菜单.
     * 返回值结果: List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(){
        Long parentId = 0L;
        return itemCatService.findItemCatList(parentId);
    }

3.5 编辑ItemCatService


    /**
     * 思路:
     *  1.通过parentId查询数据库信息,返回值结果List<ItemCat>
     *  2.将ItemCat信息转化为EasyUITree对象
     *  3.返回的是List<EasyUITree>
     * @param parentId
     * @return
     */
    @Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1.根据父级分类Id查询数据
        QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //2.需要将数据进行转化. cartList遍历 封装EasyUITree 添加到集合中即可
        List<EasyUITree> treeList = new ArrayList<>();
        for (ItemCat itemCat: catList){
            Long id = itemCat.getId();
            String text = itemCat.getName();
            //是父级就打开  否则关闭
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree easyUITree = new EasyUITree(id, text, state);
            //3.封装返回值数据
            treeList.add(easyUITree);
        }
        return treeList;
    }

3.6 页面效果展现

在这里插入图片描述

3.7 商品查询url参数分析

在这里插入图片描述

3.8 异步树控件加载

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。
总结:当展现了树形结构之后,当展开树形节点时会向后台传递该节点的id值格式如下 id:100

/**
     * 业务需求: 实现商品分类的展现
     * url地址: http://localhost:8091/item/cat/list
     * 参数:    parentId = 0  查询一级商品分类菜单.
     * 返回值结果: List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(Long id){
        //当初始时树形结构没有加载不会传递ID,所以ID为null.只需要传递0.
        Long parentId = (id==null)?0:id;
        return itemCatService.findItemCatList(parentId);
    }