来源：一叶知秋
作者：知秋
首页布局如下图所示
树所对应代码
菜单点击事件源码，先判断是否是叶子节点，然后再进行下面的判断
点击新增商品后，点击选择类目，弹出窗口，在窗口中显示商品类目数据
效果如图：
其中，弹出框如何做出来，找到其源码：
调用的类目选择所在js代码
还是将代码贴下的，通过下面这段代码来加载一个类目tree，判断这个tree
// 初始化选择类目组件
initItemCat : function(data){
$(".selectItemCat").each(function(i,e){
var _ele = $(e);
if(data && data.cid){
_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
}else{
_ele.after("<span style='margin-left:10px;'></span>");
}
_ele.unbind('click').click(function(){
$("<div>").css({padding:"5px"}).html("<ul>")
.window({
width:'500',
height:"450",
modal:true,
closed:true,
iconCls:'icon-save',
title:'选择类目',
onOpen : function(){
var _win = this;
$("ul",_win).tree({
url:'/rest/item/cat/list',
animate:true,
onClick : function(node){
if($(this).tree("isLeaf",node.target)){
// 填写到cid中
_ele.parent().find("[name=cid]").val(node.id);
_ele.next().text(node.text).attr("cid",node.id);
$(_win).window('close');
if(data && data.fun){
data.fun.call(this,node);
}
}
}
});
},
onClose : function(){
$(this).window("destroy");
}
}).window('open');
});
});
},
查看jquery api关于tree控件需要返回的json数据格式
从以上代码可以看出
- 请求的url：/item/cat/list
- 使用tree控件的异步机制来实现，第一次取顶层节点列表。如果节点下有子节点状态就是关闭状态，如果没有子节点就打开状态。
- 每个节点中包含三个属性： id：节点ID，对加载远程数据很重要。 - text：显示节点文本。 state：节点状态，’open‘ 或 ‘closed‘
- 返回结果是json数据，是一个节点列表，每个节点包含id、text、state三个属性。
-请求的参数：id（当前节点的id） - 数据分析： 查询的表：tb_item_cat 数据是一个树形结果的数据。parentId、isparent
再看下商品类目表结构：
后台代码实现
接着，在manage-pojo中添加依赖，因为使用的是通用mapper，需要支持jpa，要给pojo添加注解来映射数据库表
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>persistence-api</artifactId>
<version>1.0</version>
</dependency>
导入pojo
mapper里添加接口
package com.migo.mapper;
import com.migo.pojo.ItemCat;
import tk.mybatis.mapper.common.Mapper;
/**
* Author 知秋
* Created by kauw on 2016/11/8.
*/
public interface ItemCatMapper extends Mapper<ItemCat> {
}
service实现
package com.migo.service;
import com.migo.mapper.ItemCatMapper;
import com.migo.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* Author 知秋
* Created by kauw on 2016/11/8.
*/
@Service
public class ItemCatService {
@Autowired
private ItemCatMapper itemCatMapper;
public List<ItemCat> getItemCatList(Long parentId) {
ItemCat example = new ItemCat();
example.setParentId(parentId);
return this.itemCatMapper.select(example);
}
}
controller实现
package com.migo.controller;
import com.migo.pojo.ItemCat;
import com.migo.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
/**
* Author 知秋
* Created by kauw on 2016/11/8.
*/
@Controller
@RequestMapping("item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 根据父节点id查询商品类目表
*/
@RequestMapping(method = RequestMethod.GET)
public ResponseEntity<List<ItemCat>> getItemCatList(
@RequestParam(value = "{d",defaultValue = "0") Long parentId
){
try {
List<ItemCat> itemcats=this.itemCatService.getItemCatList(parentId);
if (null==itemcats&&itemcats.isEmpty()){
//资源不存在，响应404
return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
}
return ResponseEntity.ok(itemcats);
} catch (Exception e) {
e.printStackTrace();
// 出错，响应500
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
}
对
ItemCat进行改造，增加扩展字段，支持EasyUItree的显示,这样就可以避免再写一个第一版中的EasyuiTreeNode类，同时也省了第一版中在service中的一系列对easyuiTreeNode的处理(这里有疑问可以参照第一版的相关代码)
package com.migo.pojo;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = "tb_item_cat")
public class ItemCat extends BasePojo {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private Long parentId;
private String name;
private Integer status;
private Integer sortOrder;
private Boolean isParent;
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 Integer getSortOrder() {
return sortOrder;
}
public void setSortOrder(Integer sortOrder) {
this.sortOrder = sortOrder;
}
public Boolean getIsParent() {
return isParent;
}
public void setIsParent(Boolean isParent) {
this.isParent = isParent;
}
// 扩展字段，支持EasyUItree的显示,这样就可以避免再写一个第一版中的EasyuiTreeNode类，同时也省了第一版中
//在service中的一系列对easyuiTreeNode的处理
public String getText() {
return this.getName();
}
public String getState() {
return this.getIsParent() ? "closed" : "open";
}
}
运行，输入地址运行结果
出错1：地址错误，去js文件list删掉，因为现在是要彻底restful化
更改重新选择后，错误2: 405错误
原因：查api，tree控件默认是get请求 修改下即可
刷新后连接显示没有结果，查后台代码，因没添加log4j日志配置文件，先写个测试用例试试手，发现是数据库密码写错了，坑。。
package test;
import com.alibaba.fastjson.JSON;
import com.migo.pojo.ItemCat;
import com.migo.service.ItemCatService;
import org.apache.log4j.Logger;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import javax.annotation.Resource;
import java.util.List;
/**
* Author 知秋
* Created by kauw on 2016/11/8.
*/
@RunWith(SpringJUnit4ClassRunner.class) //表示继承了SpringJUnit4ClassRunner类
@ContextConfiguration(locations = {"classpath*:spring/*.xml"})
public class Test {
private static Logger logger=Logger.getLogger(Test.class);
@Resource
private ItemCatService itemCatService;
@org.junit.Test
public void test1(){
List<ItemCat> itemCatList = itemCatService.getItemCatList(0L);
logger.info(JSON.toJSONString(itemCatList));
}
}
问题解决：
往期回顾：
更多内容请关注：极乐科技
