基於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 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