完成后台管理系統功能（四）添加商品中的商品類目的展示

本文轉載自查看原文 2017-10-17 23:51 3101

1.效果演示：

2.實現步驟

我們還是從index.jsp頁面開始說起，如下圖所示，可以看到當我們點擊左側菜單中的"新增商品"時，是會自動去請求item-add文件的

我們下面來看看item-add.jsp界面代碼，我們從中可以看到，這個頁面其實也是個代碼片段，"選擇類目"按鈕其實是個鏈接，樣式為"easyui-linkbutton"，我們會發現該鏈接並沒有指定onclick事件，那么是怎樣觸發鼠標點擊事件呢？其實是".selectItemCat"樣式來處理的

可以看到在common.js文件中有關於".selectItemCat"的事件定義。那么大家可能也注意到了，在item-add.jsp頁面當中並沒有引用common.js文件，為何能使用這個js文件呢，其實很簡單，這是因為在index.jsp頁面中引用了該js文件，而item-add.jsp文件只是index.jsp的一個代碼片段而已，因此可以直接使用Index.jsp引用的js文件。

那么，這個分類選擇按鈕是什么時候被初始化的呢？我們可以從item-add.jsp下面的js中找到答案，如下圖所示，可以看到，$(function){}是頁面加載完之后會執行的腳本，在這里面有JINGXI.init方法來初始化類目選擇。那么這個JINGXI又是在哪兒定義的呢？

其實JINGXI也是在common.js文件中定義的，如下所示，可以看到JINGXI中定義了一個init方法，在該方法中調用了this.initItemCat(data);來初始化類選擇組件。

對selectItemCat進行解讀：

// 初始化選擇類目組件
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:'/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');
});
});
},

this.initItemCat(data);所對應的代碼如下，我們可以看到$(".selectItemCat").each(function(i,e){這行代碼，為何要用each來循環呢？這是因為使用.selectItemCat樣式的地方可能不止一處，這樣初始化就不能只初始化一處，而是應該把所有用到該樣式的地方都進行初始化，i是遍歷的第幾個元素，e是指被遍歷的對象，var _ele = $(e);的作用是把dom對象轉換為jquery對象，這樣就能直接使用jquery的方法了。_ele.unbind('click').click(function(){的意思是先進行解綁，然后再進行綁定，其中渲染了一個window窗口對象，設置了寬和高，modal:true;是指是否使用模態（就是我們打開對話框之后，后面是灰色的背景，不能操作，只能操作當前打開的對話框），true就是使用的意思。closed:true的意思是節點是否是閉合的，如果節點下面還有節點，那么默認就應該是閉合的，如果沒有子節點了，那么就應該是展開的。onPen是當窗口要打開時候觸發的函數，其中有url:'/item/cat/list',這句代碼的意思是，會向url:'/item/cat/list',這個地址請求窗口中的數據源。

既然我們要通過url返回數據，那么應該返回什么類型的數據？

應該看看easyUI Tree的相關文檔。

我們使用 EasyUI Tree 來實現樹形結構，數據結構中必須包含：

Id：節點 id

Text：節點名稱

State：如果不是葉子節點就是 close，葉子節點就是 open。Close 的節點點擊后會在此發送請求查詢子項目。