由于日常WEB开发中常会用到树形来完成以下主要功能。
主要解决以下一些功能
数据结构的树形层级展示
多选项目
单选项目
方便Ajax延迟加载
经过几个插件的比较最后决定使用dynatree。来完成以上功能。
dynatree项目网站 https://code.google.com/p/dynatree/
本文中dynatree的版本为1.2.4
首先通常代码中会有一个树形结构的实体对象如下代码：
public class Node { public int ID { get; set; } public string Name { get; set; } public string Description { get; set; } public List<Node> Children { get; set; } public Node Parent { get; set; } }由于我们采用AJAX方式所以我打算在后台的controller中返回json的方式来完成对tree的数据加载
于是为了方便dynatree的前台接受，我做了一个封装类代码如下
public class DynatreeNode { private DynatreeNode() { children = new List<DynatreeNode>(); } #region property /// <summary> /// (required) Displayed name of the node (html is allowed here) /// </summary> public string title { get; set; } /// <summary> /// tooltip: null, // Show this popup text. /// </summary> public string tooltip { get; set; } /// <summary> /// href: null, // Added to the generated a tag. /// </summary> public string href { get; set; } /// <summary> /// icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon. /// </summary> public string icon { get; set; } /// <summary> /// addClass: null, // Class name added to the node's span tag. /// </summary> public string addClass { get; set; } /// <summary> /// children: null // Array of child nodes. /// </summary> public List<DynatreeNode> children { get; set; } /// <summary> /// unselectable: false, // Prevent selection. /// </summary> public bool unselectable { get; set; } /// <summary> /// hideCheckbox: false, // Suppress checkbox display for this node. /// </summary> public bool hideCheckbox { get; set; } /// <summary> /// select: false, // Initial selected status. /// </summary> public bool select { get; set; } /// <summary> /// May be used with activate(), select(), find(), ... /// </summary> public string key { get; set; } /// <summary> /// expand: false, // Initial expanded status. /// </summary> public bool expand { get; set; } /// <summary> /// focus: false, // Initial focused status. /// </summary> public bool focus { get; set; } /// <summary> /// Use a folder icon. Also the node is expandable but not selectable.false /// </summary> public bool isFolder { get; set; } /// <summary> /// isLazy: false, Call onLazyRead(), when the node is expanded for the first time to allow for delayed /// </summary> public bool isLazy { get; set; } /// <summary> /// noLink: false, // Use span instead of a tag for this node /// </summary> public bool noLink { get; set; } /// <summary> /// activate: false, // Initial active status. /// </summary> public bool activate { get; set; } #endregion public static DynatreeNode Create(Node node) { DynatreeNode dynatreeNode = new DynatreeNode { title = node.Name, tooltip = node.Name, activate = false, addClass = null, expand = false, focus = false, icon = null, href = null, key = null, unselectable = false, select = false, noLink = false, isLazy = false, hideCheckbox = false, isFolder = false }; foreach (var item in node.Children) { dynatreeNode.isFolder = true; dynatreeNode.children.Add(DynatreeNode.Create(item)); } return dynatreeNode; } }因为javascript对大小写敏感所以这里我将属性都改成小写已达到和dynatree的children参数统一。
接下来控制器很简单的返回json即可，代码如下：
public ActionResult AjaxTree() { root = GetTreeRoot(); var dynatreeNode = DynatreeNode.Create(root); return Json(dynatreeNode, JsonRequestBehavior.AllowGet); }在view视图中我们只要加载jquery，jqueryUI和dynatree.js
由于dynatree的checkbox等使用样式写的，所以也必须引用dynatree.css
视图view的代码如下：
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div id="tree"></div> @section scripts{ <link href="~/Content/skin-vista/ui.dynatree.css" rel="stylesheet" /> <script src="~/Scripts/jquery.dynatree.js"></script> <script type="text/ecmascript"> $(function () { $("#tree").dynatree({ checkbox: true, selectMode: 2, initAjax: { url: '/home/ajaxTree' }, onSelect: function (select, node) { if (select) { alert(node.data.title) } } }); }); </script> }一颗简单的多选树就这么完成了，如果要单选只需将参数selectMode设置为1
随时随地看视频
