现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称，因而使用Cellediting插件就可完成工作。

根据书11.3.2节的示例，要完成这个不难，首先在目录树的定义中加入以下语句隐藏列标题：

hideHeaders:true,

接着添加plugins配置项来配置CellEditing插件。因为根目录是不运行编辑的，因而需要监听beforeedit事件，如果当前选择节点是根目录就返回false，不允许编辑，代码如下：

plugins:[{ ptype: "cellediting",

listeners: {

beforeedit: function (edit, e) {

if (e.record.isRoot()) returnfalse;

}

}

}],

继续定义columns配置项，为目录添加编辑控件，代码如下：

columns:[

{ xtype: "treecolumn", dataIndex:"text", flex: 1,

field: { allowBlank: false, selectOnFocus: true }

}

],

最后定义viewConfig配置项，取消树节点默认的双击操作，代码如下：

viewConfig:{

toggleOnDblClick:false

},

好了，现在要考虑的是修改后的提交问题了。Cellediting插件在编辑完成后，会触发edit事件，因而在这时候提交数据是最合适的，代码如下：

edit:function(edit,e){

e.record.save({

success:function(rec,opt){

opt.records[0].setId(opt.records[0].data.parentId+opt.records[0].data.text+"/");

opt.records[0].commit();

},

failure:function(e,op){

op.records[0].reject();

Ext.Msg.alert("发生错误",op.error);

}

});

}

在edit事件中，它的第2个参数会返回修改后的记录，因而直接调用模型的save方法就可提交数据了。如果提交成功后需要根据返回数据修改记录的id，并调用commit方法确认修改。如果修改失败，就要调用reject方法取消修改。

现在切换回Folder控制器，完成编辑操作的服务器端代码，基本过程与Add方法类似，因而可以直接复制粘贴一下，修改方法名和具体处理过程就行了，代码如下：

[AjaxAuthorize(Roles= "普通用户,系统管理员")]

publicJObject Edit()

{

bool success = false;

string msg = "";

JArray ja = null;

try

{

string data = Request["data"]?? "";

if (string.IsNullOrEmpty(data))

{

msg = "错误的提交数据。";

}

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);

string oldPath = Server.MapPath(root +(string)jo["id"]);

if (Directory.Exists(oldPath))

{

if(Directory.Exists(dirPath + foldername))

{

msg = "目录已经存在";

}

else

{

Directory.Move(oldPath,dirPath + foldername);

jo["id"] =parentDir + foldername + "/";

success = true;

}

}

else

{

msg = "要修改的目录不存在";

}

}

else

{

msg = "错误的提交数据。";

}

}

}

catch (Exception e)

{

msg = e.Message;

}

returnHelper.MyFunction.WriteJObjectResult(success, 0, msg, ja);

}

至此，目录的全部操作就完成了。如果想功能更完善，最好加入目录拖拽功能，这个笔者就不做了，有兴趣的自己可根据书的内容去完成。

现在要完成的是单击树节点，在图片列表中显示该目录下的图片文件。要做的就是监听树的selectionchange事件，这个可参考书中的11.3.4节的示例，具体代码如下：

selectionchange:function (model, sels) {

var me = this;

if (sels.length > 0) {

var rs = sels[0],

store = me.filestore;

store.proxy.extraParams.path =rs.data.id;

store.loadPage(1);

}

me.tree.down("button[tooltip=删除目录]").setDisabled(sels.length ==0);

}

现在来完成返回文件数据的控制，创建一个名称为FileController的控制器。加入必要的引用后，和Folder控制器一样，加入一个root的字符串变量来指定根目录。因为File控制器的List方法与Folder的差不多，因而可以直接复制过来修改。修改后的代码如下：

[AjaxAuthorize(Roles= "普通用户,系统管理员")]

publicJObject List()

{

bool success = false;

string msg = "";

JArray ja = new JArray();

int total = 0;

try

{

int start = 0;

int.TryParse(Request["start"], out start);

string path = Request["path"]?? "/";

DirectoryInfo dir = newDirectoryInfo(Server.MapPath(root + path));

total = dir.GetFiles().Count();

foreach (var c indir.GetFiles().OrderByDescending(m => m.LastWriteTime).Skip(start).Take(50))

{

ja.Add(new JObject {

newJProperty("path",path),

newJProperty("filename",c.Name),

newJProperty("modify",c.LastWriteTime.ToString("yyyy-MM-ddhh:mm")),

newJProperty("size",c.Length)

});

}

success = true;

}

catch (Exception e)

{

msg = e.Message;

}

returnHelper.MyFunction.WriteJObjectResult(success, total, msg, ja);

}

从代码中可以看到，使用LINQ真的太方便了，分页就是小菜一碟。目前暂时只设置了使用最后修改时间排序，等下再研究怎么修改排序。

现在还不能进行测试，因为要解决图片的缩略图显示问题。本示例，不用为每一个上传的图片生成缩略图，只要直接上传就好了，因为NuGet上有一个名称为ImageResizer.MVC的包，非常好用，它会自动根据请求生成缩略图。在主菜单选择工具>库程序包管理>管理解决方案的NuGet程序包打开管理NuGet程序包窗口，然后搜索ImageResizer，找到ImageResizer.MVC后，选择安装。

安装后，还要在Web.convfig文件进行配置。打开WebConfig文件，首先在configuration段内添加以下代码为ImageResize添加一个配置段：

<configSections>

<section name="resizer"type="ImageResizer.ResizerSection"requirePermission="false" />

</configSections>

然后添加以下配置：

<resizer>

<plugins>

<!-- So all the sample projects canshare the same image folder-->

<add name="VirtualFolder"virtualPath="~/Thumbnail/" physicalPath=".\Upload" />

<!-- So Mvc doesn't prevent the imageresizer from working -->

<add name="MvcRoutingShim"/>

<add name="DiskCache" />

</plugins>

</resizer>

配置中，VirtualFolder的作用是将虚拟目录和物理目录关联起来，其中的virtualPath就是要定义的虚拟目录，在这里是“~/Thumbnail/”，而对应的物理目录physicalPath就是“.\Upload”。

配置DiskCache的作用是开启磁盘缓存，它会把生成的缩略图缓存在磁盘上，这样就不用访问相同的缩略图时，每次都要去生成了。

接着在system.web段内添加以下配置：

<httpModules>

<add name="ImageResizingModule"type="ImageResizer.InterceptModule" />

</httpModules>

那么它是如何工作的呢？切换回PicManager.js文件，找到DataView定义的模板，会看到图片的显示是这样的：

<img width="160"height="160"src="../Thumbnail{path}{filename}?width=160&height=160"data-qtip="文件名：{filename}<br/>修改日期：{modify}<br>大小：{size:this.filesize}"/><br/>

在src定义的路径中，会看到文件名后多了参数width和height的定义，而ImageSize在路由中检查到访问的虚拟路径时，就会根据width和height的定义来将图片转换为缩略图所需的宽度和高度，然后返回给客户端，非常的方便。

把一些图片复制到根目录，然后重新生成一下解决方案，在浏览器中打开图片管理，将看到如图33的效果。

Oh，NO！DataView居然显示出错了。用Firebug检查每个视图条目，居然宽度是占满一行的，仔细看了一下样式定义，居然发现条目上定义的样式没有，很显示是忘记在app.css内定义条目的样式了。于是把以下样式定义追加到app.css文件内：

.imageList{float:left;display:block;width:180px;height:200px;padding:10px;}

.selected{background-color:#D3E1F1;}

.overitem{background-color:#E7E7E7;}

.imageListp{

text-align:center;

overflow:hidden;

line-height:22px;

}

.ellipsis{-o-text-overflow:ellipsis;text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis');white-space:nowrap;overflow:hidden;}

.x-view-selector{

position: absolute;

border: 1px dotted #3399BB;

}

刷新一下页面，如图34，视图显示正常了。

好了，今天就到这了。

源代码地址：http://vdisk.weibo.com/s/gFNr7

转载于:https://www.cnblogs.com/hainange/archive/2012/10/27/6334234.html

CMS之图片管理（3）相关推荐

  1. CMS之图片管理（1）

    图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内.因而,将图片管理做成一个扩展比较方便.当然,做成MVC模式也行,不争论,不讨论. 要记住,扩展要写在Scri ...

  2. CMS之图片管理(2)

    先来完成树目录的显示.开始前,现在解决方案中创建一个Upload目录用来存放上传的图片,为了便于测试,在Upload目录下随便添加两个目录,这里添加1和2. 好,现在创建一个名为FolderContr ...

  3. 国内CMS网站内容管理系统介绍

    国内免费(开源)CMS系统大全 最近在网上搜集了一下国内的CMS程序,包括了类型,脚本,及其特点和评价,希望能对大家有所帮助, 由于搜集于网络难免有不足和纰漏之处,还请大家能多多指正! 首先还是介绍一 ...

  4. 拖拽批量上传图片如何保证 顺序_使用 Eagle 探索图片管理新边界

    现状在现实生活中,我们付出劳动或金钱来获取物品,随着时间喜欢的东西会越来越多,渐渐的会囤积物品,即使有些物品买回来可能用的次数屈指可数,也没有打算丢弃掉,总是想着将来会有派上用场的一天.抱着这样的心态 ...

  5. 图片管理之获取图片列表数据

    图片管理 在图片表中我们需要对图片数据进行增删改查操作,这时候我们可以借助于视图集中的ModelViewset来完成相应的操作 获取图片列表数据 接口分析 请求方式: GET /meiduo_admi ...

  6. linux 相册管理,图片管理（时间线、相册管理）- 深度看图 -Deepin深度系统用户手册...

    图片管理 在图片管理界面,您可以通过时间线和相册来管理您的图片. 时间线管理 时间线中的图片按照日期划分,将同一天的图片显示在一起,不同日期的图片分栏排列,最新的日期在最上方. 预览图缩放 通过拖动界 ...

  7. python之WEB开发：图片管理

    1:背景图片管理 <body background="E:/PyCharm 2020.1.1/project/MySite/static/image/short_detect/inde ...

  8. CMS：文章管理之视图（2）

    上一篇已经完成了分类树的显示,现在开始逐步完成分类的添加.删除和编辑操作. 首先要做的是在树面板上添加一个工具栏,放置添加.删除和编辑按钮.切换到文章管理视图的脚本文件view.js,在树的定义内,添 ...

  9. ExtJs十一(ExtJs Mvc图片管理之一)

    前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内.因而,将图片管理做成一个扩展比较方便.当然,做成MVC模式也行,不争论,不讨论. 要记住,扩展要写在S ...

最新文章

  1. Android Build.VERSION.SDK_INT
  2. html浏览位置坐标,HTML5教程 | HTML5地理定位（GeoLocation API）
  3. Android 获取系统或SDCARD剩余空间信息
  4. display:none与visible:hidden的区别
  5. 苹果笔记本电脑好用吗_笔记本电脑市场格局重塑 可能比我们想象的来得更迅猛一些...
  6. javascript 学习之 数组式的对象
  7. 70条程序员编程的专业名言，你认可几条？
  8. matlab中图像处理的基本函数（1）
  9. 【今日CV 计算机视觉论文速览 第107期】Mon, 29 Apr 2019
  10. language support图标在哪里？怎么消失了？
  11. 小明历险记：规则引擎drools教程一
  12. win11快捷键失效怎么办 windows11快捷键失效的解决方法
  13. 【大数据部落】R语言RFM模型在电商行业的应用
  14. Xposed框架未安装解决方法
  15. mysql新闻管理系统表_《新闻管理系统》数据库设计_参考答案.doc
  16. ospf配置小实验及安全认证
  17. Android Studio 安装应用失败总结
  18. 个人千元奖励！华秋PCB多层板设计挑战赛等您参与
  19. 第二次作业------仿制网站
  20. Adobe Photoshop CC 2019特别版

热门文章

  1. 以杨辉三角形的三种实现体会python的编程特性
  2. STL的一些基本概念
  3. dtrace-debug
  4. ios模拟器快捷键操作
  5. LeetCode: Search a 2D Matrix
  6. 《面向对象分析与设计》读书笔记——第一章 复杂性
  7. 从R中安装phylotaR包
  8. shinyapps安装
  9. c语言编写atm取款功能_21行C语言代码编写一个具备加密功能的聊天程序！网友：666...
  10. 北师大计算机网络原理和应用作业,北师大网络作业计算机组成原理 作业一(可编辑)...