CMS之图片管理(2)
先來完成樹目錄的顯示。開始前,現(xiàn)在解決方案中創(chuàng)建一個Upload目錄用來存放上傳的圖片,為了便于測試,在Upload目錄下隨便添加兩個目錄,這里添加1和2。
好,現(xiàn)在創(chuàng)建一個名為FolderController的控制器,添加必要的引用后,先添加一個字符串常量,用來表示根目錄:
stringroot = "../upload";
?
在這里使用虛擬目錄是因為可以結(jié)合提交數(shù)據(jù)直接轉(zhuǎn)換為實際目錄。這里要注意,當放到服務器上的時候,可能目錄結(jié)構(gòu)會根據(jù)需要進行調(diào)整,因而好的方式是在項目的Web.Config文件中添加一個定義變量,然后從文件中提取目錄,從而避免因目錄改動造成的代碼修改。
然后將Index方法修改為List,修改返回結(jié)果為JObject,并添加權(quán)限特性聲明和一些用到的變量,代碼如下:
[AjaxAuthorize(Roles= "普通用戶,系統(tǒng)管理員")]
publicJObject List()
{
??? bool success = false;
??? string msg = "";
??? JArray ja = new JArray();
??? int total = 0;
??? try
??? {
??? }
??? catch(Exception e)
??? {
??????? msg = e.Message;
??? }
??? returnHelper.MyFunction.WriteJObjectResult(success, total, msg, ja);
}
?
現(xiàn)在要考慮怎么返回目錄結(jié)構(gòu)了,問題的關(guān)鍵是,如何為目錄構(gòu)建一個唯一id以標識目錄。每一個目錄,只有在其父目錄下,其名稱是唯一的,因而不能直接作為id,因而,必須加上父目錄才是唯一的id。
樹展開的時候,默認會以node作為關(guān)鍵字將樹節(jié)點的id提交到服務器,因而,在服務器端,只要從node中提取數(shù)據(jù),就是將要列的目錄了,具體代碼如下:
stringpath = Request["node"] ?? "/";
DirectoryInfodir = new DirectoryInfo(Server.MapPath(root + path));
foreach(var c in dir.GetDirectories())
{
???ja.Add(new JObject {
??????? newJProperty("id",path+c.Name +"/"),
??????? new JProperty("text",c.Name),
??????? newJProperty("parentId",path)
??? });
??? total++;
}
success = true;
?
現(xiàn)在生成應用,并在瀏覽器查看,可看到如圖32所示,文件目錄已經(jīng)列出來了。
圖32 樹目錄
下面切換到PicManager.js文件,為樹添加操作按鈕。在創(chuàng)建樹的配置項定義中,添加以下代碼:
tbar:[
???? {iconCls:"folder-add",handler:me.onAddFolder,scope:me,tooltip:"添加目錄"},
?? {iconCls:"folder-delete",handler:me.onDeleteFolder,scope:me,disabled:true,tooltip:"刪除目錄"},
???? {iconCls:"refresh",handler:me.onRefreshFolder,scope:me,tooltip:"刷新目錄樹"}
]
?
以上代碼在樹面板頂部添加了一個工具條,工具條里有添加、刪除和刷新3個按鈕。要正確顯示按鈕,還需要在app.css中添加按鈕的樣式代碼,代碼如下:
.folder-add{
???? background:url("../images/folder_add.png")!important;
}
.folder-delete{
???? background:url("../images/folder_delete.png")!important;
}
.refresh{
background:url("../../../extjs/resources/themes/images/default/grid/refresh.gif")!important;
}
?
當然,別忘記將需要的圖片復制到相應的目錄。
現(xiàn)在刷新一下頁面,會看到樹頂部多了3個按鈕。
現(xiàn)在為樹添加2個事件,第1個是viewready事件,其作用是在樹刷新后選擇第1個節(jié)點。第2個是選擇改變的時候,改變刪除按鈕的狀態(tài)。在這里,不能通過id來尋找組件,因為這個組件會復用,使用的id就會有重復id。要查找也不難,直接使用down方法找按鈕就行,唯一能區(qū)別刪除按鈕的屬性有iconCls和tooltip,在這里將使用tooltip。具體代碼如下:
listeners:{
??? scope: me,
??? viewready: function (panel) {
??????? var view = panel.getView();
??????? view.getSelectionModel().select(0);
??? },
??? selectionchange: function (model, sels) {
??????? var me=this;
??????? me.tree.down("button[tooltip=刪除目錄]").setDisabled(sels.length ==0);
???????
??? }
}
?
現(xiàn)在刷新頁面,會看到樹顯示后會選擇“根目錄”,而刪除按鈕也處于開啟狀態(tài)了。
現(xiàn)在來完成添加操作,方法有2種。第1種方法是使用默認的目錄名先創(chuàng)建一個目錄,然后再讓用戶修改目錄名。第2種方法是顯示一個提示框,讓用戶輸入目錄名,然后再創(chuàng)建目錄。簡單點,這里將使用第1種方法,在PicManager.js的底部,添加一個onAddFolder方法。首先要做的是獲取選擇節(jié)點,以便知道是在那個目錄下創(chuàng)建目錄,代碼如下:
onAddFolder:function () {
???? var tree=this.tree,
??????????? parent=tree.getSelectionModel().getSelection()[0];
???? if(! parent){
??????????? parent=tree.getRootNode();
???? }
}
?
這里添加了一個判斷,以防止沒有選擇目錄時,使用根目錄作為新目錄的父目錄。
接著創(chuàng)建一個新的Folder模型并保存它,代碼如下:
varrec=new Folder({
???? text:"新建文件夾",
???? id:"",
???? parentId:parent.data.id
});
rec.save({
???? url:"Folder/Add",
???? parentNode:parent,
???? success:function(rec,opt){
??????????? if(opt.parentNode.isExpanded())
??????????????????? opt.parentNode.appendChild(rec);
??????????? else
??????????????????? opt.parentNode.expand();
???? },
???? failure: SimpleCMS.ModelException,
???? scope:tree
});????????????????
?
代碼中,會發(fā)現(xiàn)在save方法內(nèi)的配置對象中添加了一個parentNode關(guān)鍵字,它會指向父節(jié)點,這樣的好處是,在服務器端成功添加目錄后,就可直接調(diào)用parentNode通過其appendChild方法添加1個子節(jié)點。
現(xiàn)在,在服務端Folder控制器添加一個Add方法。在之前的文章中,可以知道,數(shù)據(jù)會以data關(guān)鍵字進行提交,形式是JSON數(shù)據(jù),因而,在方法內(nèi),要先從data提取數(shù)據(jù),然后將其轉(zhuǎn)換為JArray,再在JArray中獲取數(shù)據(jù)進行處理,具體代碼如下:
[AjaxAuthorize(Roles= "普通用戶,系統(tǒng)管理員")]
publicJObject Add()
{
??? bool success = false;
??? string msg = "";
??? JArray ja = null;
??? try
??? {
??????? string data = Request["data"]?? "";
??????? if (string.IsNullOrEmpty(data))
??????? {
??????????? msg = "錯誤的提交數(shù)據(jù)。";
??????? }
??????? else
??????? {
??????????? ja = JArray.Parse(data);
??????????? if (ja.Count > 0)
??????????? {
??????????????? JObject jo = (JObject)ja[0];
??????????????? string parentDir=(string)jo["parentId"];
??????????????? string foldername= (string)jo["text"];
??????????????? string dirPath =Server.MapPath(root + parentDir);
??????????????? if (Directory.Exists(dirPath +foldername))
?????????????? ?{
??????????????????? msg = "目錄已經(jīng)存在";
??????????????? }
??????????????? else
??????????????? {
??????????????????? DirectoryInfo di =Directory.CreateDirectory(dirPath + foldername);
??????????????????? jo["id"] =parentDir + foldername + "/";
?????????? ?????????success = true;
??????????????? }
???????????????
??????????? }
??????????? else
??????????? {
??????????????? msg = "錯誤的提交數(shù)據(jù)。";
??????????? }
??????? }??????????????
??? }
??? catch (Exception e)
??? {
??????? msg = e.Message;
??? }
??? return Helper.MyFunction.WriteJObjectResult(success,0, msg, ja);
}
}
?
代碼中,如果目錄已經(jīng)存在,就返回一個錯誤信息,說明目錄已經(jīng)存在。否則,創(chuàng)建新目錄,并修改目錄的id返回。這里一定要修改id返回,不然,新的節(jié)點的id就為空,在它下面創(chuàng)建目錄就會出問題。
下面完成刪除操作,與刪除用戶的代碼差不多,具體代碼如下:
onDeleteFolder:function () {
??? var me = this,
??????? tree = me.tree,
??????? rs =tree.getSelectionModel().getSelection();
??? if (rs.length > 0) {
??????? rs = rs[0];
??????? if (rs.data.root) {
??????????? Ext.Msg.alert("刪除文件夾", "根目錄不允許刪除!");
??????????? return;
??????? }
??????? var content = "確定刪除目錄“" + rs.data.text + "”?<br/><p style='color:red'>注意:目錄下的文件及子目錄都會被刪除。</p>";
??????? Ext.Msg.confirm("刪除目錄", content, function (btn) {
??????????? if (btn == "yes") {
??????????????? var rs =this.getSelectionModel().getSelection();
??????????????? if (rs.length > 0) {
??????????????????? rs = rs[0];
??????????????????? rs.remove();
??????????????????? this.store.sync({
???? ???????????????????success: function (e, opt) {
???????????????????????? varme=this;
??????????????????????????? me.store.commitChanges();
??????????????????????????? me.view.select(0);
??????????????????????????? me.view.focus(false);
??????????????????????? },
??????????????????????? failure:SimpleCMS.ModelException,
??????????????????????? scope: tree
??????????????????? });
??????????????? }
??????????? }
??????? }, tree)
??? }
},
?
下面在Folder控制器添加一個Delete方法,代碼與Add類似,不同的是在判斷目錄存在之后,調(diào)用Directory對象的Delete方法刪除目錄下的文件及其子目錄,代碼如下;
[AjaxAuthorize(Roles= "普通用戶,系統(tǒng)管理員")]
publicJObject Delete()
{
??? bool success = false;
??? string msg = "";
??? JArray ja = null;
??? try
??? {
??????? string data = Request["data"]?? "";
??????? if (string.IsNullOrEmpty(data))
??????? {
??????????? msg = "錯誤的提交數(shù)據(jù)。";
??????? }
??????? else
??????? {
??????????? ja = JArray.Parse(data);
??? ????????if (ja.Count > 0)
??????????? {
??????????????? JObject jo = (JObject)ja[0];
??????????????? string parentDir =(string)jo["parentId"];
??????????????? string foldername =(string)jo["text"];
??????????????? string dirPath =Server.MapPath(root + parentDir);
??????????????? if (Directory.Exists(dirPath +foldername))
??????????????? {
??????????????????? Directory.Delete(dirPath +foldername, true);
??????????????????? success = true;???????????????????????????
??????????????? }
??????????????? else
??????????????? {
??????????????????? msg = "目錄已被刪除";
??????????????? }
?
??????????? }
??????????? else
??????????? {
??????????????? msg = "錯誤的提交數(shù)據(jù)。";
??????????? }
??????? }
??? }
??? catch (Exception e)
??? {
??????? msg = e.Message;
??? }
??? returnHelper.MyFunction.WriteJObjectResult(success, 0, msg, ja);
}
?
接著完成刷新操作,這個不難,重新加載Store就行了,代碼如下:
onRefreshFolder:function () {
??? this.tree.store.load();
}
?
現(xiàn)在,目錄的操作就剩下編輯操作了,這個比較復雜,下文再說。
?
BTW:代碼我已該放到新浪微盤了
源代碼:http://vdisk.weibo.com/s/g7Z33
轉(zhuǎn)載于:https://www.cnblogs.com/muyuge/archive/2012/10/20/6333743.html
總結(jié)
以上是生活随笔為你收集整理的CMS之图片管理(2)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hashmap c
- 下一篇: .cpp 编译成.a或是 .so