专栏首页技术博客ExtJs十四(ExtJs Mvc图片管理之四)

ExtJs十四(ExtJs Mvc图片管理之四)

现在来实现排序的问题。要实现远程排序,首先要清楚的是排序信息是如何提交到服务器的,而这个,利用FireBug相当简单。

在VS,切换到PicManager.js文件,找到filestore的定义,先将renmoteSort修改为true。然后添加sorters配置项,代码如下:

            sorters: [
                { property: "modify", direction: "DESC" }
            ],

这段代码的意思就是默认排序的字段为modify,排序方向为顺序排序。

那么,这个方法要怎么写呢?首先,要让该方法知道,它要提取的字段包括那些,只有符合要求的字段才会被提取。其次,就是要将要处理的字符串传递给该方法。最后,如果处理过程找不到符合要求的排序信息,就返回一个默认的排序,因而,需要给该方法传递一个默认值。

最后,要考虑方法怎么返回排序信息。新的LINQ版本支持动态查询,它的排序信息可以是以下格式:

it.字段1 排序方向1, it.字段2 排序方向2,...

因而,方法只需要返回以上形式组成的字符串就可以了。

目标确定了,切换到MyFunction.cs来完成这个方法。在MyFunction.cs内创建一个名为ProcessSorterString的静态方法,代码如下:

public static string ProcessSorterString(string[] fields, string sortinfo,string defaultSort)
        {
            if (string.IsNullOrEmpty(sortinfo)) return defaultSort;
            JArray ja = JArray.Parse(sortinfo);
            string result = "";
            foreach (JObject c in ja)
            {
                string field = (string)c["property"];
                if (fields.Contains(field))
                {
                    result += string.Format("it.{0} {1},", field, (string)c["direction"] == "ASC" ? "" : "DESC");
                }
            }
            if (result.Length > 0)
            {
                result = result.Substring(0, result.Length - 1);
            }
            else
            {
                result = defaultSort;
            }
            return result;
        }

代码中,先检查要处理的排序信息是否为空或空字符串,如果是,返回默认值。接着,将字符串转换为JArray对象,然后一个个提取排序对象,如果在指定的字段数组内包含该字段,就根据格式组合字符串。最后,检查组合的字符串是否有符合要求的排序信息,如果没有,返回默认值。

在实现前,先打开管理NuGet程序包窗口,搜索DynamicQuery,然后安装Dynamic Expression API程序包以实现动态排序。如果是使用实体框架,其内部已经包含了动态查询,不需要安装该包,在这里,因为返回的是FileInfo集合,没有使用到实体框架,因而要安装该程序包。

现在切换到File控制器,修改代码如下以实现排序功能:现在切换到File控制器,修改代码如下以实现排序功能:

public JObject 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"] ?? "/";
                string sort = Request["sort"] ?? "";
                sort = Helper.MyFunction.ProcessSorterString(new string[] { "filename", "modify", "size" }, sort, "it.LastWriteTime ASC");
                DirectoryInfo dir = new DirectoryInfo(Server.MapPath(root + path));
                total = dir.GetFiles().Count();
                var q = dir.GetFiles().Select(m => new
                {
                    filename = m.Name,
                    modify = m.LastWriteTime,
                    size = m.Length
                }).AsQueryable().OrderBy(sort).Skip(start).Take(50);
                foreach (var c in q)
                {
                    ja.Add(new JObject { 
                        new JProperty("path",path),
                        new JProperty("filename",c.filename),
                        new JProperty("modify",c.modify.ToString("yyyy-MM-dd hh:mm")),
                        new JProperty("size",c.size)
                    });
                }
                success = true;

            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return Helper.MyFunction.WriteJObjectResult(success, total, msg, ja);
        }

现在,要在客户端加一个排序菜单以实现排序功能。切换到PicManager.js文件,找到me.items的定义,在图片文件的配置项中添加tbar配置项,用来放置一个分页工具条,并在工具条上放一个SplitButton用来实现排序功能。在SplitButton下定义一个由6个子菜单组成的菜单。这6个子菜单必须是单选的,也就是一次只能选择一个。具体代码如下:

                tbar: {
                    xtype: "pagingtoolbar",
                    pageSize: 20, displayInfo: true, store: me.filestore,
                    items: [
                        '-',
                        { xtype: "splitbutton", iconCls: "sort", tooltip: "排序", text: "排序",
                            scope: me,
                            menu: {
                                items: [
                                    {
                                        text: '文件名顺序', group: 'sort', checked: false, checkHandler: me.onSort, scope: me,
                                        fieldname: "filename", sortdir: "ASC"
                                    },
                                    {
                                        text: '文件名降序', group: 'sort', checked: false, checkHandler: me.onSort, scope: me,
                                        fieldname: "filename", sortdir: "DESC"
                                    },
                                    {
                                        text: '修改日期顺序', group: 'sort', checked: false, checkHandler: me.onSort, scope: me,
                                        fieldname: "modify", sortdir: "ASC"
                                    },
                                    {
                                        text: '修改日期降序', checked: true, group: 'sort', checkHandler: me.onSort, scope: me,
                                        fieldname: "modify", sortdir: "DESC"
                                    },
                                    {
                                        text: '文件大小顺序', group: 'sort', checked: false, checkHandler: me.onSort, scope: me,
                                        fieldname: "size", sortdir: "ASC"
                                    },
                                    {
                                        text: '文件大小降序', group: 'sort', checked: false, checkHandler: me.onSort, scope: me,
                                        fieldname: "size", sortdir: "DESC"
                                    }
                                ]
                            }
                        }
                    ]
                }

注意代码中子菜单的定义。每个子菜单都有一个group配置项,且它们的值是相同的,这样就可将6个子菜单组合为一组了。配置项checked是必不可少的,该配置项决定了菜单的是一个单选功能的子菜单。因为刚才在Store的定义中,默认情况下是以修改日期降序排序的,因而该子菜单的checked的值被设置为true。还有一个地方比较特别,就是把子菜单相关的字段和排序方向都以配置项形式定义好了,这样在编写onSort方法的时候,处理起来就很方便,以下就是onSort的代码:

        onSort: function (item, checked) {
        var me = this;
        if (checked) {
            me.filestore.sort({ property: item.fieldname, direction: item.sortdir });
            me.filestore.load();
        }
    },

因为每个子菜单都包含了字段和排序方向信息,因而,这里就不需要做判断了,直接调用Store的sort方法进行排序就行了。重新设置排序后,调用load方法重新就可以了。这里唯一要注意的地方是,子菜单在取消选择和选择的时候都会触发该方法,因而需要检查checked的值,当它为true的时候才进行处理。

在定义排序按钮的时候使用iconCls配置项为图片添加了一个图片,因而要在app.css中添加它的样式,代码如下:

.sort
{
     background:url("../images/sort.png")!important;
}

好了,现在生成一下解决方案,然后刷新一下页面,

至此,排序功能就实现了。

现在考虑一下视图的选择问题,在操作系统中,一般都可以使用拖动的方式选择文件,这个功能相当实用,而在Ext JS,要实现该功能也很简单,只有使用Ext JS包中的用户插件Ext.ux.DataView.DragSelector就可简单实现。

先在解决方案ExtJS\ux目录下创建一个DataView目录,然后在Ext JS包中examples\ux\DataView目录下,将DragSelector.js文件复制到该目录。为什么要这样?因为动态加载是根据类名来找文件的,注意Ext.ux.DataView.DragSelector的类名,在ux目录下,多了一个DataView,因而需要添加DataView目录。

在DataView目录下还有一个DragSelector.css文件,定义了DragSelector要用到的一些样式,把文件里的样式复制到app.css就行了。

切换到PicManager.js文件,先在layout配置项下加一个requires配置项,来声明该类需要使用到DragSelector类,代码如下:

requires: ["Ext.ux.DataView.DragSelector"],

接着在me.dataview的定义中添加以下代码来创建插件:

            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {})
            ],

因为DragSelector类没有定义别名,所以不能使用xtype进行定义,只能直接创建了。

刷新一下浏览器,然后在视图中任意点按下鼠标左键,然后拖动鼠标,通过拖动方式选择图片了。

现在来完成图片的删除功能。先在分页工具条上添加一个删除按钮,代码如下:

{ iconCls: "picture-delete", handler: me.onDelete, scope: me, disabled: true, tooltip: "删除图片" }

注意,目前按钮的状态是禁用状态的。因而需要在视图选择了图片的时候开启它。同文件夹删除按钮一样,这里也不能使用id,只能使用查询方式获取按钮。在dataview的定义中,添加以下代码监听视图的selectionchange事件:

            listeners: {
                scope: me,
                selectionchange: me.onPictureSelect
            }

接着完成onPictureSelect方法,代码如下:

    onPictureSelect: function (model, sels) {
        this.down("button[tooltip=删除图片]").setDisabled(sels.length == 0);
    },

因为没有合适的上一层组件,因而只能从组件本身开始往下找了。

现在完成删除图片的onDelete方法,代码如下:

    onDelete: function () {
        var me = this,
            rs = me.dataview.getSelectionModel().getSelection();
        if (rs.length > 0) {
            content = ["确定删除以下图片?"];
            for (var i = 0; ln = rs.length, i < ln; i++) {
                content.push(rs[i].data.filename);
            }
            Ext.Msg.confirm("删除图片", content.join("<br/>"), function (btn) {
                if (btn == "yes") {
                    var me = this,
                        store = me.dataview.store, 
                        rs = me.dataview.getSelectionModel().getSelection();
                    store.remove(rs);
                    store.sync({
                        success: function (e, opt) {
                            this.store.commitChanges();
                        },
                        failure: function (e, opt) {
                            this.store.rejectChanges()
                            Ext.Msg.alert("发生错误", e.exceptions[0].error);
                        },
                        scope: me.dataview
                    });
                }
            }, me)
        } else {
            Ext.Msg.alert('删除记录', '请选择要删除的记录。');
        }
    }

代码与之前删除操作的代码没什么不同,因而有兴趣,可以研究一下将这些代码统一起来,这样就不用粘贴复制了。这里的焦点还是使用Store的remove方法删除数据,然后调用sync同步,如果服务器端删除成功,就调用commitChanges方法确认修改,否则调用rejectChanges方法取消删除。如果是希望在删除后重新加载页面,可以将commitChanges方法修改为load方法,重新加载数据。

现在切换到File控制器完成删除操作,方法与文件夹的删除差不多,代码如下:

public JObject Delete()
        {
            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)
                    {
                        foreach(JObject jo in ja)
                        {
                            string path = Server.MapPath(root + (string) jo["path"] + (string) jo["filename"]);
                            FileInfo file = new FileInfo(path);
                            if (file.Exists)
                            {
                                file.Delete();
                            }
                        }
                        success = true;
                    }
                    else
                    {
                        msg = "错误的提交数据。";
                    }
                }
            }
            catch (Exception e)
            {
                msg = e.Message;
            }
            return Helper.MyFunction.WriteJObjectResult(success, 0, msg, ja);
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ExtJs十(ExtJs Mvc用户管理之二)

    为了防止意外情况,这里添加了try模块,在错误的时候会将错误信息作为Msg关键字的值返回。

    aehyok
  • ExtJs二(实现登录)

      在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

    aehyok
  • ExtJs二(实现登录)

      在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

    aehyok
  • APICloud开发者进阶之路|[ 新手教程 ] 原生js 会话列表滑动删除置顶效果

    完整地址:https://community.apicloud.com/bbs/thread-87977-1-1.html

    APICloud
  • ExtJs十(ExtJs Mvc用户管理之二)

    为了防止意外情况,这里添加了try模块,在错误的时候会将错误信息作为Msg关键字的值返回。

    aehyok
  • DeDecms织梦程序设置当天发布文档日期以红色显示

    建站需要使用cms系统,大部分情况下个人草根站长或者小公司是无法自行开发cms系统,目前国内有很多种免费的cms建站系统,那么使用织梦CMS建站的时候,会碰到特...

    用户2472688
  • [-Flutter自组篇-] Flutter中四十行代码能做什么?

    张风捷特烈
  • Django 2.1.7 Celery 4.3.0 Periodic Tasks 周期性任务调度

    celery beat是一个调度器,它可以周期内指定某个worker来执行某个任务。如果我们想周期执行某个任务需要增加beat_schedule配置信息.

    Devops海洋的渔夫
  • 这会是你见过讲得最清楚的【异步爬虫指南】

    在执行一些 IO 密集型任务的时候,程序常常会因为等待 IO 而阻塞。比如在网络爬虫中,如果我们使用 requests 库来进行请求的话,如果网站响应速度过慢,...

    一墨编程学习
  • 手机App扫描多个网站显示的二维码的数据结构设计

    为了支持Mobile App和Web shop多对多的关系,后台Web Socket服务器我会维护如下的数据结构,

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券