使用EasyUI加载树形菜单

一.需求：

在点击添加按钮后，使用EasyUI的插件，将数据库中的数据异步查询显示到页面上

效果如下：

页面效果：

数据库数据：

二.功能实现：

2.1 前端部分

页面效果如下图

HTML和CSS部分内容：

<tr>
                <td>商品类目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>
                </td>
            </tr>
            <tr>
                <td>商品标题:</td>
                <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
            </tr>
            <tr>
                <td>商品卖点:</td>
                <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
            </tr>

负责生成树形菜单的JS代码：

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请求，Control层对应地址
                            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);
                                    }
                                }
                            }
                        });
                    },
                    onClose : function(){
                        $(this).window("destroy");
                    }
                }).window('open');
            });
        });
    },

2.2 后端部分

1）使用一个JavaBean封装树形菜单中的信息

public class EasyUITreeResult implements Serializable{

    /**分类id*/
    long id;
    /**分类名称*/
    String text;
    /**是否有子节点的标识，close表示有子节点，open表示没有子节点*/
    String state;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }
}

2）Control层处理请求返回结果

@RequestMapping("/item/cat/list")
@ResponseBody
public List<EasyUITreeResult> getItemCat(@RequestParam(name = "id",defaultValue = "0")Long parentId){
        //进行数据库查询，返回数据
        List<EasyUITreeResult> list = itemCatService.getTbItemCat(parentId);
        //将查询出的数据返回给页面
        return list;
    }