CMS之图片管理（3）

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

然后添加以下配置：

 

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

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

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

 

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

 

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

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

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

 

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

 

好了，今天就到这了。