先來完成樹目錄的顯示。開始前，現在解決方案中建立一個Upload目錄用來存放上傳的圖檔，為了便于測試，在Upload目錄下随便添加兩個目錄，這裡添加1和2。
好，現在建立一個名為FolderController的控制器，添加必要的引用後，先添加一個字元串常量，用來表示根目錄：
在這裡使用虛拟目錄是因為可以結合送出資料直接轉換為實際目錄。這裡要注意，當放到伺服器上的時候，可能目錄結構會根據需要進行調整，因而好的方式是在項目的Web.Config檔案中添加一個定義變量，然後從檔案中提取目錄，進而避免因目錄改動造成的代碼修改。
然後将Index方法修改為List，修改傳回結果為JObject，并添權重限特性聲明和一些用到的變量，代碼如下：
現在要考慮怎麼傳回目錄結構了，問題的關鍵是，如何為目錄建構一個唯一id以辨別目錄。每一個目錄，隻有在其父目錄下，其名稱是唯一的，因而不能直接作為id，因而，必須加上父目錄才是唯一的id。
樹展開的時候，預設會以node作為關鍵字将樹節點的id送出到伺服器，因而，在伺服器端，隻要從node中提取資料，就是将要列的目錄了，具體代碼如下：
現在運作一下程式看看：
下面切換到PicManager.js檔案，為樹添加操作按鈕。在建立樹的配置項定義中，添加以下代碼：
以上代碼在樹面闆頂部添加了一個工具條，工具條裡有添加、删除和重新整理3個按鈕。要正确顯示按鈕，還需要在app.css中添加按鈕的樣式代碼，代碼如下：
當然，别忘記将需要的圖檔複制到相應的目錄。
現在重新整理一下頁面，會看到樹頂部多了3個按鈕。
現在為樹添加2個事件，第1個是viewready事件，其作用是在樹重新整理後選擇第1個節點。第2個是選擇改變的時候，改變删除按鈕的狀态。在這 裡，不能通過id來尋找元件，因為這個元件會複用，使用的id就會有重複id。要查找也不難，直接使用down方法找按鈕就行，唯一能差別删除按鈕的屬性 有iconCls和tooltip，在這裡将使用tooltip。具體代碼如下：
現在重新整理頁面，會看到樹顯示後會選擇“根目錄”，而删除按鈕也處于開啟狀态了。
現在來完成添加操作，方法有2種。第1種方法是使用預設的目錄名先建立一個目錄，然後再讓使用者修改目錄名。第2種方法是顯示一個提示框，讓使用者輸入 目錄名，然後再建立目錄。簡單點，這裡将使用第1種方法，在PicManager.js的底部，添加一個onAddFolder方法。首先要做的是擷取選 擇節點，以便知道是在那個目錄下建立目錄，代碼如下：
這裡添加了一個判斷，以防止沒有選擇目錄時，使用根目錄作為新目錄的父目錄。
接着建立一個新的Folder模型并儲存它，代碼如下：
代碼中，會發現在save方法内的配置對象中添加了一個parentNode關鍵字，它會指向父節點，這樣的好處是，在伺服器端成功添加目錄後，就可直接調用parentNode通過其appendChild方法添加1個子節點。
現在，在服務端Folder控制器添加一個Add方法。在之前的文章中，可以知道，資料會以data關鍵字進行送出，形式是JSON資料，因而，在方法内，要先從data提取資料，然後将其轉換為JArray，再在JArray中擷取資料進行處理，具體代碼如下：
代碼中，如果目錄已經存在，就傳回一個錯誤資訊，說明目錄已經存在。否則，建立新目錄，并修改目錄的id傳回。這裡一定要修改id傳回，不然，新的節點的id就為空，在它下面建立目錄就會出問題。
下面完成删除操作，與删除使用者的代碼差不多，具體代碼如下：
下面在Folder控制器添加一個Delete方法，代碼與Add類似，不同的是在判斷目錄存在之後，調用Directory對象的Delete方法删除目錄下的檔案及其子目錄，代碼如下;
接着完成重新整理操作，這個不難，重新加載Store就行了，代碼如下：
現在，目錄的操作就剩下編輯操作了，這個比較複雜，下文再說。