2. 实现商品类目选择功能

2.1 需求

在商品添加页面，点击“选择类目”显示商品类目列表：

2.1.1结果展示

异步树形目录:选择目录后，并不会一次性加载所有目录，先加载1级目录，点击1级目录会发送请求，再加载父目录为该目录id的目录

选择目录.PNG
按上图顺序点击三次目录，发送了三次请求：
三次请求.PNG
三次的请求结果如下图： 第一次请求结果.PNG 第二次请求结果.PNG 第三次请求结果.PNG
可以看到，每次请求结构都是以所点击目录的id为父Id的目录
补充：idea的全局搜索与替换
利用全局搜索，可以找到异步tree的实现：

// 初始化选择类目组件
            _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:'/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);
                                    }
                                }
                            }
                        });
                    }
                 

2.2. 实现步骤：

1、 按钮添加点击事件，弹出窗口，加载数据显示tree
2、 将选择类目的组件封装起来，通过TT.iniit()初始化，最终调用initItemCat()方法进行初始化
3、 创建数据库、以及tb _item_cat表，初始化数据
4、 编写Controller、Service、Mapper

2.3 EasyUI tree数据结构

数据结构中必须包含：

Id：节点id
Text：节点名称
State：如果不是叶子节点就是close，叶子节点就是open。Close的节点点击后会在此发送请求查询子项目。

可以根据parentid查询分类列表。

2.4. Mapper

使用逆向工程生成的mapper文件。

2.5. Service

@Service
public class ItemCatServiceImpl implements ItemCatService {

    @Autowired
    private TbItemCatMapper itemCatMapper;
    
    @Override
    public List<TbItemCat> getItemCatList(Long parentId) throws Exception {
        
        TbItemCatExample example = new TbItemCatExample();
        //设置查询条件
        Criteria criteria = example.createCriteria();
        //根据parentid查询子节点
        criteria.andParentIdEqualTo(parentId);
        //返回子节点列表
        List<TbItemCat> list = itemCatMapper.selectByExample(example);
        return list;
    }
}

2.6. Controller

TbItemCat类型的数据要转为Map的类型

@Controller
@RequestMapping("/item/cat")
public class ItemCatController {
    
    @Autowired
    private ItemCatService itemCatService;

    @SuppressWarnings({ "rawtypes", "unchecked" })
    @RequestMapping("/list")
    @ResponseBody
    //如果id为null是使用默认值，也就是parentid为0的分类列表
    public List categoryList(@RequestParam(value="id", defaultValue="0") Long parentId) throws Exception {
        List catList = new ArrayList();
        //查询数据库
        List<TbItemCat> list = itemCatService.getItemCatList(parentId);
        for (TbItemCat tbItemCat : list) {
            Map node = new HashMap<>();
            node.put("id", tbItemCat.getId());
            node.put("text", tbItemCat.getName());
            //如果是父节点的话就设置成关闭状态，如果是叶子节点就是open状态
            node.put("state", tbItemCat.getIsParent()?"closed":"open");
            catList.add(node);
        }
        return catList;
    }
}