Kendo UI Treeview当前数据源发布 [英] Kendo UI treeview current datasource post
问题描述
我需要在FTP中创建一个文件夹结构,类似于我视图中的树形结构.我想允许用户在创建文件夹之前编辑树结构.
I need to create a folder structure in FTP similar to that of the tree structure on my view. I want to allow the user to edit the tree structure before creating folders.
我有一个带有服务器绑定的TreeView:
I have a TreeView with server binding:
@model IEnumerable<TreeViewItemModel>
@(Html.Kendo().TreeView()
.Name("PipelineStructureMajor")
.BindTo(Model)
.ExpandAll(true)
.DragAndDrop(true)
)
绑定很好.通过一些客户端重组(添加/拖动/删除某些节点),我想将树视图(具有所有子级的根节点递归发布)到我的动作中.
The binding is fine. With some client-side restructuring (appending/dragging/removing some nodes), I want to post the treeview (root node with all its children recursively) to my action.
public ActionResult _CreateFtp(TreeViewItemModel root)
{
//FTPClient in action : Parsing whole tree and converting into the folder structure
return PartialView("_TreeMajor", <refreshed model>);
}
在客户端,我试图警告树视图数据,它显示了根节点文本,其中项目为空.
On the Client side, I tried to alert treeview data, it shows the root node text with its Items empty.
$('#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
}
});
});
有没有办法做到这一点?
Is there a way to accomplish this?
推荐答案
正如我的问题所解释的,我有3个步骤:
As my question explains, I have 3 steps:
- 服务器绑定默认树
- 编辑节点(删除,添加,重命名节点)
- 取回所有树视图数据(包括添加的数据)
经过 kendo文档和
After going through the kendo docs and this demo, I got the point. I have to make my tree datasource observable so as to reflect the node-changes. For this I had to use kendo-web-scripts (instead of server wrappers). So I changed my step 1 to:
- 远程绑定默认树(以使我的dataSource可见)
我希望立即一次完全加载我的树形视图,并看到此演示,我发现treeview一次只能加载一个级别. ( UserVoice 已经排队,但剑道团队仍然忽略了它).因此,我使用了一种怪异的方式:
I want my tree view fully loaded at once remotely and seeing this demo, I figured out that treeview only allows one level to be loaded at a time. (UserVoice already queued but Kendo team still ignoring it). So I use a hacky way:
<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>
然后我将数据发送到控制器操作,例如:
And I sent my data to the controller action like:
$('#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反序列化为:仅显示部分代码
And on the controller side, I Deserialized string json as: Just showing partial code
[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 });
}
希望这对某人有帮助.
这篇关于Kendo UI Treeview当前数据源发布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!