如何将 Kendo 树视图绑定到文件目录

Question

我想将文件夹层次结构显示为 Kendo 树视图。我假设这涉及将目录转换为 JSON。

这是实现我的目标的可能且正确的方法吗？还是有其他方法可以将树视图绑定到远程文件目录？

Answer 1

由于您的标签是 kendo-ui 和 C#，我假设您使用的是 Kendo UI for ASP.NET MVC。如果不只是用适当的 JS 更改视图代码，其他代码应该在 ASP.NET MVC 中按预期工作。

使用 2 个操作创建控制器 PathController：Read 和 Index。

在你的 Index view 调用 Kendo UI 树视图助手

@(Html.Kendo().TreeView()
    .Name("PathTreeView")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "Path"))
    )
)

为 kendo 树视图创建一个 视图模型 KendoTreeViewViewModel：

public class KendoTreeViewViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public bool HasChildren { get; set; }
}

在您的 Read 操作中 return JSON 文件和文件夹：

public JsonResult Read(string path)
{
    const string StartDirectory = @"C:\";
    path = path ?? StartDirectory;
    var files = Directory.GetFiles(path).Select(file => 
        new KendoTreeViewViewModel
            {
                Id = file,
                HasChildren = false,
                Name = Path.GetFileName(file)
            });

    var directories = Directory.GetDirectories(path).Select(dir =>
        new KendoTreeViewViewModel
            {
                Id = dir,
                HasChildren = true,
                Name = Path.GetFileName(dir)
            });

    var result = files.ToList();
    result.AddRange(directories);
    result = result.OrderBy(x => x.HasChildren).ToList();

    return this.Json(result, JsonRequestBehavior.AllowGet);
}

如何将 Kendo 树视图绑定到文件目录

How to bind a Kendo treeview to a file directory

c#

kendo-ui

kendo-treeview