Kendo UI treeview當前數據源文章

我需要在FTP中創建類似於我的視圖上的樹結構的文件夾結構。我想讓用戶在創建文件夾之前編輯樹結構。Kendo UI treeview當前數據源文章

我有一個TreeView與服務器綁定：

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

結合的罰款。通過一些客戶端重構（附加/拖放/刪除某些節點），我想將treeview（根節點及其所有子節點遞歸）發佈到我的操作中。

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 
      } 
     }); 
    });

有沒有辦法做到這一點？

來源

2013-05-13 Bishnu Rawal

此問題可能相關：http://stackoverflow.com/q/13309896/2460971 – numaroth 2015-02-11 18:23:53

由於我的問題解釋說，我有3個步驟：

服務器綁定默認樹
編輯節點（刪除，添加，重命名節點）
接回所有樹狀數據（包括加）

經過kendo docs和this demo後，我明白了。我必須使我的樹數據源可觀察，以反映節點變化。爲此，我不得不使用kendo-web-scripts（而不是服務器包裝器）。所以我改變了我的第1步：

遠程綁定默認樹（爲了使我的數據源可觀察）

我希望我的樹視圖滿載一次遠程，看到這個demo，我想通了該樹視圖一次只允許加載一個級別。（UserVoice已經排隊，但劍道隊仍然無視它）。所以我用一個哈克的方式：

<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-20 04:52:12

Kendo UI treeview當前數據源文章

回答

相關問題