前言
添加商品时,应该提供商品类目的选择,下面结合easyUI和Mybatis来实现。
正文
一,easyUI
easyUI的Tree(树控件)可以实现在web页面中一个将分层数据以树形结构进行显示。本文不关注easyUI的使用,只需要了解该组件的请求url带的参数和需要返回的json格式即可。
1,请求url带的参数:就一个id,表示当前节点的id,据此查询子节点。
2,返回json格式:列表格式,里面有条目,条目里有3个属性。我们应该写一个对应的pojo类。
[{
"id": 1, // 节点的id。
"text": "Node 1", // 节点显示的名称。
"state": "closed", // 节点状态,closed就是文件夹,open就是叶子节点。
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
二,Mybatis
同样使用Mybatis逆向生成的代码。
三,详细设计
数据库设计,包括了所有主目录和子目录,每个目录都有自己的节点id,和它的父id,是否为父节点。其中顶层目录的父节点id为0。
1,dao层
就使用mapper接口的条件查询语句。
2,对应的pojo类
public class EUTreeNode {
private long id;
private String text;
private String state;
// get,set...
}
3,service层
指定父节点的id,就可以从数据库返回该节点下的所有子节点,然后封装进上一步中的pojo类,再返回给Controller。
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private TbItemCatMapper itemCatMapper;
@Override
public List<EUTreeNode> getCatList(long parentId) {
//创建查询条件
TbItemCatExample example = new TbItemCatExample();
Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(parentId);
//根据条件查询
List<TbItemCat> list = itemCatMapper.selectByExample(example);
List<EUTreeNode> resultList = new ArrayList<>();
//把列表转换成treeNodelist
for (TbItemCat tbItemCat : list) {
EUTreeNode node = new EUTreeNode();
node.setId(tbItemCat.getId());
node.setText(tbItemCat.getName());
node.setState(tbItemCat.getIsParent()?"closed":"open");
resultList.add(node);
}
//返回结果
return resultList;
}
}
4,web层
@Controller
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
@RequestMapping("/list")
@ResponseBody
private List<EUTreeNode> getCatList(@RequestParam(value="id",defaultValue="0")Long parentId) {
List<EUTreeNode> list = itemCatService.getCatList(parentId);
return list;
}
}
一开始打开类目的时候,是没有id值的,所以Controller入参的时候设置一个默认值defaultValue=”0”,对应数据库中“父id”为0的记录,返回的是“父id”为0的记录。这些记录在service层转化成了easyUI可识别的json格式对应的pojo类的List列表,这个列表在web层又转化成了json数据给了前端,前端就能识别并加载出子目录啦。