商品級聯(lián)類目的展示

huangjinnan 發(fā)布于2019-08-15 17:48 / 2100人閱讀

摘要：一目標(biāo)實(shí)現(xiàn)如圖所示的商品類目的展示二思路第一列都是頂級的列表，紅色的一列展示的是二級列表，最后展示的是葉子節(jié)點(diǎn)。

一.目標(biāo)

實(shí)現(xiàn)如圖所示的商品類目的展示

二.思路

1.第一列都是頂級的列表，紅色的一列展示的是二級列表，最后展示的是葉子節(jié)點(diǎn)。所以數(shù)據(jù)庫需要一個(gè)parent_id字段，當(dāng)id為0時(shí)表示頂級列表，還需要一個(gè)字段is_parent來判斷是否為父節(jié)點(diǎn)

數(shù)據(jù)格式如下圖（一，二，三級目錄分別標(biāo)出來了）

2.通過jsonp調(diào)用服務(wù)端的數(shù)據(jù)（參考上一篇文章）https://segmentfault.com/a/11...
3.返回值的格式分析：
這里我們通過兩個(gè)pojo來封裝取出的數(shù)據(jù)，一個(gè)是對應(yīng)每個(gè)節(jié)點(diǎn)的u n i，另一個(gè)是存放節(jié)點(diǎn)的list集合

public class CatNode {
    
    @JsonProperty("u")
    private String url;
    @JsonProperty("n")
    private String name;
    @JsonProperty("i")
    private Listitem;        
       
    ...

public class CatResult {
    
    private Listdata;

    ...

三.代碼實(shí)現(xiàn) 1.service層

    @Override
    public CatResult getItemCatList() {
        CatResult catResult = new CatResult();
        //查詢分類列表
        catResult.setData(getCatList(0));
        return catResult;
    }
    
    private List getCatList(long parentId) {
        //創(chuàng)建查詢條件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);
        //執(zhí)行查詢
        List list = itemCatMapper.selectByExample(example);
        //返回值list
        List resultList = new ArrayList<>();
        //向list中添加節(jié)點(diǎn)
        int count = 0;
        for (TbItemCat tbItemCat : list) {
            //判斷是否為父節(jié)點(diǎn)
            if (tbItemCat.getIsParent()) {
                CatNode catNode = new CatNode();
                if (parentId == 0) {
                    catNode.setName(""+tbItemCat.getName()+"");
                } 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;
                }
            //如果是葉子節(jié)點(diǎn)
            } 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;
    }
}