商品级联类目的展示

一.目标

实现如图所示的商品类目的展示

二.思路

1.第一列都是顶级的列表，红色的一列展示的是二级列表，最后展示的是叶子节点。所以数据库需要一个parent_id字段，当id为0时表示顶级列表，还需要一个字段is_parent来判断是否为父节点

数据格式如下图（一，二，三级目录分别标出来了）

2.通过jsonp调用服务端的数据（参考上一篇文章）https://segmentfault.com/a/11...
3.返回值的格式分析：
这里我们通过两个pojo来封装取出的数据，一个是对应每个节点的u n i，另一个是存放节点的list集合

public class CatNode {
    
    @JsonProperty("u")
    private String url;
    @JsonProperty("n")
    private String name;
    @JsonProperty("i")
    private List<?>item;        
       
    ...

public class CatResult {
    
    private List<?>data;

    ...

三.代码实现

1.service层

    @Override
    public CatResult getItemCatList() {
        CatResult catResult = new CatResult();
        //查询分类列表
        catResult.setData(getCatList(0));
        return catResult;
    }
    
    private List<?> getCatList(long parentId) {
        //创建查询条件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);
        //执行查询
        List<TbItemCat> list = itemCatMapper.selectByExample(example);
        //返回值list
        List resultList = new ArrayList<>();
        //向list中添加节点
        int count = 0;
        for (TbItemCat tbItemCat : list) {
            //判断是否为父节点
            if (tbItemCat.getIsParent()) {
                CatNode catNode = new CatNode();
                if (parentId == 0) {
                    catNode.setName("<a href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");
                } else {
                    catNode.setName(tbItemCat.getName());
                }
                catNode.setUrl("/products/"+tbItemCat.getId()+".html");
                catNode.setItem(getCatList(tbItemCat.getId()));
                
                resultList.add(catNode);
                count ++;
                //第一层只取14条记录
                if (parentId == 0 && count >=14) {
                    break;
                }
            //如果是叶子节点
            } else {
                resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
            }
        }
        return resultList;
    }

2.controller层

@Controller
public class ItemCatController {
    
    @Autowired
    ItemCatService itemCatService;
    
    @RequestMapping("/itemcat/list")
    @ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }
}