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