0

我需要在 FTP 中创建一个类似于我视图中的树结构的文件夹结构。我想允许用户在创建文件夹之前编辑树结构。

我有一个带有服务器绑定的 TreeView：

@model IEnumerable<TreeViewItemModel>
@(Html.Kendo().TreeView()
          .Name("PipelineStructureMajor")
          .BindTo(Model)
          .ExpandAll(true)
          .DragAndDrop(true)
          )

装订很好。通过一些客户端重组（附加/拖动/删除一些节点），我想将树视图（递归的所有子节点及其所有子节点）发布到我的操作中。

 public ActionResult _CreateFtp(TreeViewItemModel root)
    {
        //FTPClient in action : Parsing whole tree and converting into the folder structure

        return PartialView("_TreeMajor", <refreshed model>);
    }

在客户端，我尝试提醒树视图数据，它显示根节点文本，其项目为空。

$('#createFtpConfirmed').click(function () {

        //TreeView data
        var treeData = $("#PipelineStructureMajor").data("kendoTreeView").dataSource.data();
        alert(JSON.stringify(treeData));   

        $.ajax({
            url:'@Url.Action("_CreateFtp", "Structure")',
            data: {root: treeData},
            type:"POST",
            success: function (result, status, xhr) {
                //Doing something useful
            }
        });
    });

有没有办法做到这一点？

4

1 回答 1

2

正如我的问题所解释的，我有 3 个步骤：

  1. 服务器绑定默认树
  2. 编辑节点（删除、添加、重命名节点）
  3. 取回所有树视图数据（包括添加的）

在浏览了剑道文档和这个演示之后，我明白了。我必须使我的树数据源可观察以反映节点更改。为此，我不得不使用 kendo-web-scripts（而不是服务器包装器）。因此，我将步骤 1 更改为：

  1. 远程绑定默认树（使我的数据源可观察）

我希望我的树视图一次远程完全加载并看到这个演示，我发现树视图一次只允许加载一个级别。（UserVoice已经排队，但 Kendo 团队仍然忽略它）。所以我使用了一种hacky方式：

<div id="PipelineStructureMajor"></div>
<button id="createandorinsert" class="k-button hugebtn">Send</button>
<script>
$.get("../Structure/LoadTreeData", function (data) {
    var sat = new kendo.data.HierarchicalDataSource({
        data: data
    });

    var pipelinetree = $("#PipelineStructureMajor").kendoTreeView({
        dataSource: kendo.observableHierarchy(sat),
        dragDrop: true,
        select: onNodeSelect
    }).data("kendoTreeView");
});
</script>

我将数据发送到控制器操作，例如：

$('#createandorinsert').click(function (e) {

//TreeView's current datasource
var tree = $("#PipelineStructureMajor").data("kendoTreeView").dataSource.data();

    $.ajax({
        url: '../Structure/FtpCreateAndOrSync',
        type: 'POST',            
        data: {
            xmlNodes: JSON.stringify(tree)
        },
        beforeSend: function (xhr) {
            alertSpan.removeClass().addClass("loading");
        },
        success: function (result, status, xhr) {                
                alertSpan.removeClass().addClass("success");                
        },
        error: function (jqXhr, textStatus, errorThrown) {                
                alertSpan.removeClass().addClass("error");                    
        }
    });

});

在控制器方面，我将字符串 json 反序列化为： 仅显示部分代码

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FtpCreateAndOrSync(string xmlNodes)
    {
       //Deserializing nodes
       var xmlNodesModels = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<IEnumerable<XmlNode>>(
                    xmlNodes).ToArray();
            ////Alternative
            //var data = JsonConvert.DeserializeObject<IEnumerable<XmlNode>>(xmlNodes);
       return Json(new { cr = createResult, dr = dbResult });
    }

希望这可以帮助某人。

于 2013-09-20T04:52:12.873 回答