基于JQuery的Dynatree解决MVC中对树形结构的解决方案

由于日常WEB开发中常会用到树形来完成以下主要功能。

主要解决以下一些功能

1. 数据结构的树形层级展示

2. 多选项目

3. 单选项目

4. 方便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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/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