我的编程空间,编程开发者的网络收藏夹
学习永远不晚

CMS之图片管理(3)

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

CMS之图片管理(3)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用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 p_w_picpath folder-->
      <add name="VirtualFolder"virtualPath="~/Thumbnail/" physicalPath=".\Upload" />
      <!-- So Mvc doesn't prevent the p_w_picpathresizer 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"class="lazy" data-src="../Thumbnail{path}{filename}?width=160& height=160"data-qtip="文件名:{filename}<br/>修改日期:{modify}<br>大 小:{size:this.filesize}"/><br/>
 
在class="lazy" data-src定义的路径中,会看到文件名后多了参数width和height的定义,而ImageSize在路由中检查到访问的虚拟路径时,就会根据width和height的定义来将图片转换为缩略图所需的宽度和高度,然后返回给客户端,非常的方便。
把一些图片复制到根目录,然后重新生成一下解决方案,在浏览器中打开图片管理,将看到如图33的效果。

Oh,NO!DataView居然显示出错了。用Firebug检查每个视图条目,居然宽度是占满一行的,仔细看了一下样式定义,居然发现条目上定义的样式没有,很显示是忘记在app.css内定义条目的样式了。于是把以下样式定义追加到app.css文件内:
.p_w_picpathList{float:left;display:block;width:180px;height:200px;padding:10px;}
.selected{background-color:#D3E1F1;}
.overitem{background-color:#E7E7E7;}
.p_w_picpathListp{
     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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

CMS之图片管理(3)

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

CMS之图片管理(3)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。根据书11.3.2节的示例,要完成这个不难,首先在目录树的定义中加入以下语句隐藏列标题:hideHeaders:true, 接着添加p
2023-01-31

Linux之进程管理(3)作业管理

Linux之进程管理(3)作业管理Linux的作业控制介绍:前台作业:通过终端启动,且启动后一直占据终端;后台作业:可通过终端启动,但启动后转入后台运行(释放终端);让进程作业运行在后台:1、对运行中的进程:使用Ctrl+z2、尚未启动的作
2023-01-31

MySQL专题3之MySQL管理

1、启动以及关闭MySQL服务器-  首先,我们需要通过以下命令来检查MySQL服务器是否已经启动:ps -ef | grep mysqld-  如果MySQL已经启动,以上命令将输出mysql进程列表,如果mysql未启动,你可以使用以下
MySQL专题3之MySQL管理
2023-01-31

android图片处理之让图片变成圆形

这几天做项目,有些地方的图片需要用到圆形图片,所以百度了一下,在github上找到一个开源项目,处理很简单,效果如下: 使用起来特别简单,一共三步,具体如下: 1、创建一个Java类CircleImageView把下面的代码复制过去,报错的
2022-06-06

图形图像处理之简单图片

决定Android应用是否被用户接受的一个重要的原因就是用户界面,友好的用户界面就需要使用到图形图像处理技术,包括静态图片、动画和游戏都需要大量的图形图像处理,所谓游戏,其实就是提供更逼真,能模拟某种环境的用户界面,并根据某种规则响应用户的
2023-06-04

android图片处理之让图片一直匀速旋转

本文是在我的文章android图片处理,让图片变成圆形 的基础上继续写的,可以去看看,直接看也没关系,也能看懂 1、首先在res文件夹下创建一个名字为anim的文件夹,名字不要写错 2、在anim里面创建一个xlm文件:img_anim
2022-06-06

用python简单处理图片(3):添加水

一、添加文字水印from PIL import Image, ImageDraw,ImageFontim = Image.open("d:/pic/lena.jpg").convert('RGBA')txt=Image.new('RGBA'
2023-01-31

Python图片处理之图片裁剪的示例分析

小编给大家分享一下Python图片处理之图片裁剪的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、操作流程首先会吧?1.有张照片这是网上随便找的一张照片,自行保存测试2.看看照片运行代码,其中show_img函数
2023-06-15

Android中3种图片压缩处理方法

Android中图片的存在形式: 1:文件形式:二进制形式存在与硬盘中。 2:流的形式:二进制形式存在与内存中。 3:Bitmap的形式 三种形式的区别: 文件形式和流的形式:对图片体积大小并没有影响。也就是说,如果你手机SD卡上的图
2022-06-06

Django之图书管理系统

出版社的增删改查 展示出版社列表:   1. 创建一个表结构:        2. 再配合那俩条命令即可创建一个press表       创建出版社函数,并在url中进行配置       创建HTML页面,展示出版社的表    for循环 
2023-01-30

AndroidDownloadMananger管理器实现下载图片功能

AndroidDownloadMananger类似于下载队列,管理所有当前正在下载或者等待下载的项目,他可以维持HTTP链接,并且在队列中的下载项目一旦失败,还能自动重新下载
2023-01-05

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录