FEx - 文件浏览器小部件
4.96/5 (14投票s)
jQuery - 文件管理小部件。
引言
FEx (文件浏览器) 是一个简单的 jQuery 控件，用于文档管理。它具有以下功能：
- 简单且易于自定义
- 轻量级且由 JSON 驱动
- 适用于手机和平板电脑
- 轻松管理文件
- MVC 就绪
此控件包含三个部分，即目录/文件夹部分 (I)，文件夹/文档部分 (II)，以及文档详情部分 (III)。II 部分的数据取决于 I 部分的选择，而 III 部分则取决于 II 部分的选择。
我们将探讨如何在 ASP.NET MVC 中实现它。
Using the Code
控件提供的选项如下：
创建基本控件
filesSrc 接受返回 JSON 文件列表的源 URL。data 是要传递给该操作的参数。rootPath 是文件目录的根路径。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/"
});
设置日期格式
可以使用 format 选项设置显示的日期格式。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
dateFormat: "d/mm/yy"
});
设置文件管理操作
使用 FEx，我们可以执行各种文件管理活动，例如**重命名**、**移动**、**新建文件夹**、**删除**和**添加文件**。
重命名
可以通过在目录字段中选择文件夹，或者在文件夹字段中选择文件/文件夹，然后单击**重命名**菜单来重命名文件。文件夹字段的选择具有优先权。**Esc** 键可取消操作。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
renameUrl: "/FExDemo/UpdateFolder"
}
});
新建文件夹
可以在根目录或特定文件夹中创建新文件夹，只需选择相应的位置即可。如果未选择任何位置，则将在根目录中创建文件夹。**Esc** 键可取消操作。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
createFolderUrl: '/FExDemo/UpdateFolder',}
});
删除
可以使用**删除**菜单选项删除文件或文件夹。这与**新建文件夹**的选择模式类似。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
deleteUrl: '/FExDemo/UpdateFolder',
},
});
移动
文件或文件夹可以移动到特定文件夹。**移动**功能以**拖放**方式实现。目标可以是同一目录或不同目录。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
moveUrl: '/FExDemo/UpdateFolder'
}
});
添加文件
可以使用**添加文件**菜单选项将文件添加到选定的文件夹中。也可以通过拖放方式添加文件。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
moveUrl: '/FExDemo/UpdateFolder'
}
});
处理程序
加载前处理程序 (On Load Start Handler)
此处理程序对于通过 AJAX post 进行数据绑定/修改非常有用。它有一个参数，即 FEx 的**options**。
加载后处理程序 (On Load End Handler)
在数据从服务器返回后，将调用此处理程序。它有一个参数，即来自服务器的记录。
验证数据处理程序 (Validate Data Handler)
在目录/文件夹部分单击文件夹后，将调用此处理程序。
文档信息处理程序 (Document Info Handler)
在文件夹/文档网格中选择文档/文件夹后，将调用此处理程序。它接受三个参数：htmlobject、selected item 和 options。通过 htmlObject，我们可以修改该部分的内容。
操作开始处理程序 (On Action Start Handler)
在 FEx 中执行**更新**/**重命名**/**移动**/**新建文件夹**/**添加新文件**时，将调用此事件。它提供要 post 的**数据**以及要执行的**操作类型**。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
updateAction: {
renameUrl: '/FExDemo/UpdateFolder',
deleteUrl: '/FExDemo/UpdateFolder',
moveUrl: '/FExDemo/UpdateFolder',
createFolderUrl: '/FExDemo/UpdateFolder',
addFile: '/FExDemo/SaveFile'
},
validateGridData: function (records) {
////return the modified records
},
onLoadStart: function (options) {
////return the modified options
},
onLoadEnd: function (records) {
////return the modified records
},
documentInfoHandler: function (options,selectedData, htmlObject) {
////return the modified htmlObject
},
onActionStart: function (actionType, postData) {
////return the modified postData
},
});
移动/平板电脑兼容性
控件的布局会根据屏幕分辨率而变化。目前，FEx 的 CSS 中有一个断点（大于/小于 720px）。可以根据需要进行自定义。
自定义网格
文件夹部分中的网格可以使用 gridTemplate 进行自定义。此对象接受我们要绑定的 entityName、要显示的 title 以及 updatable 列。
$('#myContainer').FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
gridTemplate: {
Format: {
title:"File Type"
},
Name: {
title: "Name",updatable:true
},
LastModifiedDate: {
title: "Modified Date",
format:true
}
} });
排序
文件夹/目录排序
文件夹排序将通过**目录**部分顶部的**按...排序**菜单选项完成。我们可以使用 **directorySort** 模板设置可排序项。
$("#myContainer").FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
directorySort: {
Name: {
title:"File Name"
},
LastModifiedDate: {
title:"Modified Date"
}
}});
文件夹/文档排序
此部分的排序只需单击网格的列标题即可完成。
设置数据成员
文件属性名可以使用 dataMember 属性设置。
//Data members(Properties) for binding should be defined if it is other than the below specified names
dataMember: {
Path: 'Path',//File path - acts as the unique value to traverse in the tree
Name: 'Name',//File or folder name to be displayed
Childs: 'Childs',//files in the folders / Child collections
Type: 'Type'//type of the file to display the icon
}
示例代码
$(document).ready(function () {
$('#myContainer').FEx({
filesSrc: "/FExDemo/GetFolderTree",
data: { path: "F:/" },
rootPath: "F:/",
onLoadStart: function (options) {
//
},
onLoadEnd: function (records) {
//
},
validateGridData: function (records) {
//
},
documentInfoHandler: function (options,selectedData, htmlObject) {
//
},
onActionStart: function (actionType, postData) {
//
},
dateFormat: 'd-mm-yy',
updateAction: {
renameUrl: '/FExDemo/UpdateFolder',
deleteUrl: '/FExDemo/UpdateFolder',
moveUrl: '/FExDemo/UpdateFolder',
createFolderUrl: '/FExDemo/UpdateFolder',
addFile: '/FExDemo/SaveFile'
},
setDynamicHeight: true,
directorySort: {
Name: {
title:"File Name"
},
LastModifiedDate: {
title:"Modified Date"
}
},
gridTemplate: {
Format: {
title:"File Type"
},
Name: {
title: "Name",updatable:true
},
LastModifiedDate: {
title: "Modified Date",
format:true
}
},
dataMember: {
Path: 'Path',//File path acts as the unique value to traverse in the tree
Name: 'Name',//File or folder name to be displayed
Childs: 'Childs',//files in the folders / Child collections
Type: 'Type'//type of the file to display the icon
}
});
});
关注点
学会了如何使用 jQuery、一些漂亮的 CSS3 功能和 JavaScript 模式差异来创建控件。
依赖项和已知问题
依赖项
- jQuery
- jQuery-UI
- JSLINQ
已知问题
- 重命名包含 . (点) 的文件夹。
- 更新同一文件夹内的文件夹/文件。
历史
- 2015 年 2 月 16 日：添加了
dataMember属性，更新了演示内容并进行了错误修复。