有没有人有任何使用 Dynatree 插件和 MVC 的例子?我一直在与它搏斗,但没有太大进展。我有一个返回 JsonResult 的操作方法(但选择基础表中的所有列,不确定这是否是问题),在我的 initajax 调用中,我所做的就是调用此方法。
如果不是太麻烦,我正在寻找示例 View 和 Controller 操作方法。
提前感谢您的帮助
有没有人有任何使用 Dynatree 插件和 MVC 的例子?我一直在与它搏斗,但没有太大进展。我有一个返回 JsonResult 的操作方法(但选择基础表中的所有列,不确定这是否是问题),在我的 initajax 调用中,我所做的就是调用此方法。
如果不是太麻烦,我正在寻找示例 View 和 Controller 操作方法。
提前感谢您的帮助
您需要创建一个对象来序列化节点,例如。
public interface ITreeItem
{
}
/// <summary>
/// Tree Item Leaf.
/// </summary>
public class TreeItemLeaf :ITreeItem
{
/// <summary>
/// Gets the Title.
/// </summary>
public string title;
/// <summary>
/// Gets the Tooltip.
/// </summary>
public string tooltip;
/// <summary>
/// Gets the key.
/// </summary>
public string key;
/// <summary>
/// Gets the Data.
/// </summary>
public string addClass;
/// <summary>
/// Gets the Children.
/// </summary>
public IList<ITreeItem> children;
/// <summary>
/// Gets the rel attr.
/// </summary>
public string rel;
/// <summary>
/// Gets the State.
/// </summary>
public bool isFolder;
/// <summary>
/// Gets the State.
/// </summary>
public bool isLazy;
/// <summary>
/// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
/// </summary>
public TreeItemLeaf()
{
children = new List<ITreeItem>();
}
/// <summary>
/// Initializes a new instance of the <see cref="TreeItemLeaf"/> class.
/// </summary>
/// <param name="type">The type of node.</param>
/// <param name="id">The Id of the node.</param>
/// <param name="title">The Title of the node.</param>
/// <param name="tooltip">The Tooltip of the node.</param>
public TreeItemLeaf(String type, Guid id, String title, String tooltip)
{
key = id.ToString();
this.title = title;
isFolder = false;
isLazy = false;
this.tooltip = tooltip;
children = new List<ITreeItem>();
}
}
/// <summary>
/// Tree Item.
/// </summary>
public class TreeItem : TreeItemLeaf
{
/// <summary>
/// Gets the State.
/// </summary>
public new bool isFolder;
/// <summary>
/// Initializes a new instance of the <see cref="TreeItem"/> class.
/// </summary>
public TreeItem() : base()
{
}
/// <summary>
/// Initializes a new instance of the <see cref="TreeItem"/> class.
/// </summary>
/// <param name="type">The type of node.</param>
/// <param name="id">The Id of the node.</param>
/// <param name="title">The Title of the node.</param>
/// <param name="tooltip">The tooltip of the node.</param>
public TreeItem(String type, Guid id, String title, String tooltip) : base(type, id, title, tooltip)
{
isFolder = true;
isLazy = true;
}
}
一旦你有了这个,你可以返回一个Json(IList<ITreeItem>)
你需要从你的结果中建立的..
如果您访问 Dynatee 演示http://wwwendt.de/tech/dynatree/doc/samples.html,您可以使用 Firefox/Firebug 研究 HTTP 请求,以准确了解传入和返回的内容。
我在视图中的树如下:
// --- Initialize first Dynatree -------------------------------------------
$("#tree").dynatree({
fx: { height: "toggle", duration: 500 },
selectMode: 1,
clickFolderMode: 1,
children : @Html.Raw(String.Format("{0}", ViewData["tree"]).Replace("\"children\":[],", "")),
onLazyRead: function (node) {
node.appendAjax({
url: "@Url.Action("treedata", "tree")",
type: "GET",
data: { "id": node.data.key, // Optional url arguments
"mode": "all"
},
error: function(node, XMLHttpRequest, textStatus, errorThrown) {
}
}
});
}, //.... cut short for brevity
我将初始树状态嵌入“孩子:”部分。并且 Ajax 读取正在“onLazyRead:”部分中设置。
我的 Ajax 调用是:
public JsonResult TreeData(FormCollection form)
{
return GetTreeData(Request.QueryString["id"], Request.QueryString["uitype"]);
}
GetTreeData() 函数返回 Json(ITreeItem);
我建议您使用 Firefox/Firebug 及其“NET”功能来查看正在发生和返回的内容。
希望有帮助。
我刚刚找到了 Dynatree,并且正在我的 MVC 项目中使用它。这是我如何做到的一个例子。我决定像基本示例一样将数据直接放在视图中。
我的数据是加利福尼亚州的城市列表,按县分组。
我的控制器只是将视图模型传递给我的视图,并且视图模型具有 CitiesAvailable 属性:
public IEnumerable<City> CitiesAvailable { get; set; }
我的 City 对象列表是从数据库 (EF4) 中获取的,实际的 City 对象如下:
在我的视图中,我创建了一个包含县及其城市列表的 ul(我使用的是 Razor,但网络表单应该很容易弄清楚):
<div id="tree">
<ul id="treedata" style="display: none;">
@foreach (var county in Model.CitiesAvailable.Select(c => c.County).Distinct().OrderBy(c => c))
{
<li data="icon: 'false'">@county
<ul>
@foreach (var city in Model.CitiesAvailable.Where(c => c.County == county).OrderBy(c => c.Name))
{
<li data="icon: 'false'" id="@city.Id">@city.Name</li>
}
</ul>
</li>
}
</ul>
</div>
然后在我的 JavaScript 中,我使用以下内容:
$("#tree").dynatree({
checkbox: true,
selectMode: 3,
fx: { height: "toggle", duration: 200 }
});
效果很好!以下是检查了一些项目的输出示例:
让我知道是否有任何不妥之处。
注意,我在我的 li 元素中使用 data="icon: 'false'" 因为我不想要图标。
您可以简单地将对象转换为 json 字符串,并将其作为文本发送到服务器
这是js代码:
var dict = $("#tree").dynatree("getTree").toDict();
var postData = JSON.stringify(dict["children"]);
$.ajax({ type: "POST",
url: "/UpdateServer/SaveUserTree",
data: {tree:postData},
dataType: "html"
});
这是控制器代码:
[HttpPost]
public void SaveUserTree(string tree = "")
{
HttpContext.Application["UserTree"] = tree;
}
您可以将此字符串数据发送回客户端
if (HttpContext.Application["UserTree"] != null)
ViewBag.TreeData = new HtmlString(HttpContext.Application["UserTree"].ToString());
最后,您可以在视图中使用以下数据初始化树:
var treeData= @(ViewBag.TreeData)
$(function(){
// --- Initialize sample trees
$("#tree").dynatree({
children: treeData
});
});