使用 MVC 3 和 jsTree 的简单文件管理器

• 下载源代码 - 596 KB

引言

我在网上看到了一些关于 jsTree 和 MVC 的优秀教程，但它们都有些过时，并且无法与 jsTree 的最新版本（这是一个免费组件）一起工作。 我一直想发布使用 jsTree 的经验（对于那些不知道 jsTree 是什么的人，请访问这里：www.jstree.com）。 而且，有什么比创建一个简单的“文件管理器”更能让它发挥作用呢？

在本文中，我将重点关注 jsTree 的两个方面。 第一个真正让我惊叹的是通过拖放移动树，就像在 Windows 资源管理器中一样（参见图 1）。 我不会涵盖的另一个功能（但包含在代码中）是使用右键鼠标显示上下文菜单，并从那里创建目录、重命名等。 我不会在此文章中发布一个包含重命名、剪切和复制功能的完整解决方案，因为它仅仅旨在作为使用 jQuery 和 MVC 的起点。

使用代码

首先，我们必须以特定的格式将树定义为 JSON 类

public class JsTreeModel
{
    public string data;
    public JsTreeAttribute attr;
    public string state = "open";
    public List<JsTreeModel> children;
}

public class JsTreeAttribute
{
    public string id;
}

因此，在 data 属性中，我们将存储树的标题，并将完整路径存储在 ID 属性中。 树的状态将默认展开所有子叶，这就是“open”的作用。

我们将使用递归来填充我们的树，没有什么特别复杂的地方。

绑定树

我们必须使用以下 JavaScript 通过 jQuery 绑定树

$('#MainTree').jstree({
            "json_data": {
                "ajax": {
                    "url": "/Home/GetTreeData",
                    "type": "POST",
                    "dataType": "json",
                    "contentType": "application/json charset=utf-8"
                 }
            },
            "themes": {
                "theme": "default",
                "dots": false,
                "icons": true,
                "url": "/content/themes/default/style.css"
            },

            "plugins": ["themes", "json_data", "dnd", "contextmenu", "ui", "crrm"]

        });

正如你可能已经理解的那样，“dnd”插件代表“拖放”。

然后使用以下语法执行拖放操作

$('#MainTree').bind("move_node.jstree", function (e, data) {
        data.rslt.o.each(function (i) {
            $.ajax({
                async: false,
                type: 'POST',
                url: "/Home/MoveData",
                data: {
                    "path": $(this).attr("id"),
                    "destination": data.rslt.np.attr("id")
                },
                success: function (r) {
                   Refresh();
                }
            });
        });
    });

在控制器端，我们必须使用

[HttpPost]
public ActionResult MoveData(string path, string destination)
{
   // get the file attributes for file or directory
    FileAttributes attPath = System.IO.File.GetAttributes(path);

    FileAttributes attDestination = System.IO.File.GetAttributes(path);

    FileInfo fi = new FileInfo(path);

   //detect whether its a directory or file
   if ((attPath & FileAttributes.Directory) == FileAttributes.Directory)
    {
       if((attDestination & FileAttributes.Directory)==FileAttributes.Directory)
       {
           MoveDirectory(path, destination);
       }
    }
    else
    {
        System.IO.File.Move(path, destination + "\\" + fi.Name);
    }
    AlreadyPopulated = false;
    return null;   
}

我不得不找到另一种移动目录的方法，因为 Microsoft 的“Directory.Move”并非在所有情况下都有效。 再次说明，这只是一个起点，并非旨在成为一个完整的解决方案。

关注点

有一点让我有点恼火的是，每次任务（移动、创建目录）都必须刷新我的树。 这是我找到保持磁盘树和显示树同步的唯一方法。 也许一些 MVP 可以帮助我，如果我只存储叶子的名称，我不知道。 我不得不使用会话状态变量，否则如果我单击树的最后一个叶子，整个树将再次填充。 我无法避免它。

无论如何，我希望这篇文章能帮助想要使用 JSTree 来改善用户体验并且不想在专业组件上投资 500 美元的 MVC 开发人员。