CMS之图片管理(4)
今天来完成排序问题，这个在书中示例不少，不过，在这里啰嗦一下也是有好处的。
要实现远程排序，首先要清楚的是排序信息是如何提交到服务器的，而这个，利用Firebug相当简单。
在VS，切换到PicManager.js文件，找到filestore的定义，先将renmoteSort修改为true。然后添加sorters配置项，代码如下：
sorters: [
{ property:"modify" , direction : "DESC" }
],
这段代码的意思就是默认排序的字段为modify，排序方向为顺序排序。
现在，在浏览器打开图片管理，注意观察Firebug中的请求。如图35，会看到提交的请求中，排序信息是以JArray数组形式提交的，要将排序信息提取出来，就要先将字符串转换为JArray，然后再提取。现在来完成这个。因为，排序信息会在很多地方使用，因而可以在MyFunction中写一个通用方法处理这个。
图34 Firebug中显示的排序信息
那么，这个方法要怎么写呢？首先，要让该方法知道，它要提取的字段包括那些，只有符合要求的字段才会被提取。其次，就是要将要处理的字符串传递给该方法。最后，如果处理过程找不到符合要求的排序信息，就返回一个默认的排序，因而，需要给该方法传递一个默认值。
最后，要考虑方法怎么返回排序信息。新的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);
stringresult = "";
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;
}
returnresult;
}
代码中，先检查要处理的排序信息是否为空或空字符串，如果是，返回默认值。接着，将字符串转换为JArray对象，然后一个个提取排序对象，如果在指定的字段数组内包含该字段，就根据格式组合字符串。最后，检查组合的字符串是否有符合要求的排序信息，如果没有，返回默认值。
在实现前，先打开管理NuGet程序包窗口，搜索DynamicQuery，然后安装Dynamic Expression API程序包以实现动态排序。如果是使用实体框架，其内部已经包含了动态查询，不需要安装该包，在这里，因为返回的是FileInfo集合，没有使用到实体框架，因而要安装该程序包。
现在切换到File控制器，修改代码如下以实现排序功能：
[AjaxAuthorize(Roles = "普通用户,系统管理员")]
public JObject List()
{
boolsuccess = false;
stringmsg = "";
JArray ja= new JArray();
int total= 0;
try
{
intstart = 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-ddhh:mm")),
new JProperty("size",c.size)
});
}
success = true;
}
catch(Exception e)
{
msg =e.Message;
}
returnHelper.MyFunction.WriteJObjectResult(success, total, msg, ja);
}
代码中，添加了处理提交参数sort的代码。因为客户端的字段名和服务器端的字段名不对应，因而在查询时使用Select方法将其字段名转换一下。还有一个要注意的地方，就是需要AsQueryable将集合类型转换IQueryable类型，因为动态查询只支持该类型的数据。因为修改了字段名，所以foreach循环中也要做相应修改。
现在，要在客户端加一个排序菜单以实现排序功能。切换到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){
varme=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;
}
好了，现在生成一下解决方案，然后刷新一下页面，在浏览器将会看到如图36所示的效果。
图36 根据修改日期降序排序看到的结果
至此，排序功能就实现了。
现在考虑一下视图的选择问题，在操作系统中，一般都可以使用拖动的方式选择文件，这个功能相当实用，而在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进行定义，只能直接创建了。
刷新一下浏览器，然后在视图中任意点按下鼠标左键，然后拖动鼠标，就可以看到类似图37所示的效果，通过拖动方式选择图片了。
图37 拖动选择图片
现在来完成图片的删除功能。先在分页工具条上添加一个删除按钮，代码如下：
{ 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控制器完成删除操作，方法与文件夹的删除差不多，代码如下：
[AjaxAuthorize(Roles = "普通用户,系统管理员")]
public JObject Delete()
{
boolsuccess = false;
stringmsg = "";
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;
}
returnHelper.MyFunction.WriteJObjectResult(success, 0, msg, ja);
}
至此，删除操作就完成了。图片管理就余下最麻烦的上传操作了，这个在下一篇文章再说。
源代码地址： http://vdisk.weibo.com/s/gKlcP
