html实现商品列表2级分类,02-商品分类目录实现
2.商品分类目录实现
2.1 封装POJO对象`@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
@TableId(type = IdType.AUTO)
private Long id; //主键ID
private Long parentId; //父级ID
private String name; //分类名称
private Integer status; //状态
private Integer sortOrder; //排序号
private Boolean isParent; //是否为父级
}`
2.2 页面JS引入过程
2.2.1 引入JS/CSS样式`
pageEncoding="UTF-8"%>
`
2.2.2 引入common.jsp
2.3 数据格式化
2.3.1 格式化价格`1.页面标签
价格
2.页面JS
formatPrice : function(val,row){
return (val/100).toFixed(2);
},`
2.3.2 格式化状态`
状态
// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){
if (val == 1){
return '正常';
} else if(val == 2){
return '下架';
} else {
return '未知';
}
},`
2.4 格式化商品分类目录
2.4.1 页面结构分析`
叶子类目
//格式化名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
cache:true, //缓存
async:false, //表示同步 默认的是异步的true
dataType:"text",//表示返回值参数类型
success:function(data){
name = data;
}
});
return name;
},`
2.4.2 编辑ItemCatController`@RestController //要求返回JSON数据
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 业务: 根据商品分类的ID,查询商品分类的名称
* url: /item/cat/queryItemName
* 参数: itemCatId 商品分类id
* 返回值: 商品分类名称
*/
@RequestMapping("queryItemName")
public String findItemCatName(Long itemCatId){
return itemCatService.findItemCatName(itemCatId);
}
}`
2.4.2 编辑ItemCatService`package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public String findItemCatName(Long itemCatId) {
return itemCatMapper.selectById(itemCatId).getName();
}
}`
2.4.3 页面效果展现
2.4.3 ajax嵌套问题
说明: 如果在ajax内部再次嵌套ajax请求,则需要将内部的ajax请求设置为同步状态.
俗语: 赶紧走吧 赶不上二路公交车了…
核心原因: 页面需要刷新2次都是只刷新一次.
2.5 关于页面工具栏说明(看懂即可)`1.页面调用
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
2.定义工具栏
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function(){
//.tree-title 查找页面中class类型为tree-title的元素
//:contains('新增商品') 在所有的class的类型中查找文件元素为"新增商品"的元素
//parent() 选中元素的父级元素
//.click() 执行点击的动作
$(".tree-title:contains('新增商品')").parent().click();
}
},{.....}]`
2.5.1 jQuery基本用法
1.选择器 在整个html页面 根据某些特定的标识 准确的定位元素的位置.Id选择器 $("#元素的Id")
元素(标签)选择器 $(“tr”)
类选择器 $(".class的名称") [{},{},{}]
3 商品分类目录树形结构展现
3.1 ItemCat表结构设定
问题分析: 商品分类信息一般分为3级. 问题: 如何确定父子级关系的呢??
答: 通过定义父级的字段实现
3.2 3级表数据的分析
说明:通过parentId 根据父级的ID查询所有的子级信息. 当查询一级菜单时parentId=0;`/*查询一级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=0;
/*查询二级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=495;
/*查询三级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=529;`
3.3 EasyUI中树形结构说明
1.页面JS`$("#tree").tree({
url:"tree.json", //加载远程JSON数据
method:"get", //请求方式 POST
animate:false, //表示显示折叠端口动画效果
checkbox:true, //表述复选框
lines:false, //表示显示连接线
dnd:true, //是否拖拽
onClick:function(node){ //添加点击事件
//控制台
console.info(node);
}
});`
2.返回值说明`[
{
"id":"1",
"text":"吃鸡游戏",
"state":"closed"
},
{
"id":"1",
"text":"吃鸡游戏",
"state":"closed"
}
]`
3.4 封装树形结构VO对象`@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
private Long id; //节点ID
private String text; //节点名称
private String state; //节点状态
}`
3.5 页面JS结构说明
3.6 异步树加载说明
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。
3.7 编辑ItemCatController`/**
* 业务: 实现商品分类的查询
* url地址: /item/cat/list
* 参数: id: 默认应该0 否则就是用户的ID
* 返回值结果: List
*/
@RequestMapping("/list")
public List findItemCatList(Long id){
Long parentId = (id==null)?0:id;
return itemCatService.findItemCatList(parentId);
}`
3.8 编辑ItemCatService`@Override
public List findItemCatList(Long parentId) {
//1.准备返回值数据
List treeList = new ArrayList<>();
//思路.返回值的数据从哪来? VO 转化 POJO数据
//2.实现数据库查询
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("parent_id",parentId);
List catList = itemCatMapper.selectList(queryWrapper);
//3.实现数据的转化 catList转化为 treeList
for (ItemCat itemCat : catList){
long id = itemCat.getId(); //获取ID值
String text = itemCat.getName(); //获取商品分类名称
//判断:如果是父级 应该closed 如果不是父级 则open
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree easyUITree = new EasyUITree(id,text,state);
treeList.add(easyUITree);
}
return treeList;
}`
3.9页面效果展现
