一.需求：

在點選新增按鈕後，使用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;
    }