由于日常WEB開發(fā)中常會(huì)用到樹形來(lái)完成以下主要功能。

在巴南等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),全網(wǎng)整合營(yíng)銷推廣,外貿(mào)網(wǎng)站制作,巴南網(wǎng)站建設(shè)費(fèi)用合理。

主要解決以下一些功能

1. 數(shù)據(jù)結(jié)構(gòu)的樹形層級(jí)展示
2. 多選項(xiàng)目
3. 單選項(xiàng)目
4. 方便Ajax延遲加載

經(jīng)過(guò)幾個(gè)插件的比較最后決定使用dynatree。來(lái)完成以上功能。

dynatree項(xiàng)目網(wǎng)站 https://code.google.com/p/dynatree/

本文中dynatree的版本為1.2.4

首先通常代碼中會(huì)有一個(gè)樹形結(jié)構(gòu)的實(shí)體對(duì)象如下代碼： 

public class Node 
{ 
    public int ID { get; set; } 
 
    public string Name { get; set; } 
 
    public string Description { get; set; } 
 
    public List Children { get; set; } 
 
    public Node Parent { get; set; } 
} 

由于我們采用AJAX方式所以我打算在后臺(tái)的controller中返回json的方式來(lái)完成對(duì)tree的數(shù)據(jù)加載
于是為了方便dynatree的前臺(tái)接受，我做了一個(gè)封裝類代碼如下

public class DynatreeNode 
{ 
    private DynatreeNode() 
    { 
        children = new List(); 
    } 
 
    #region property 
    /// 
 
    /// (required) Displayed name of the node (html is allowed here) 
    ///  
    public string title { get; set; } 
 
    /// 
 
    /// tooltip: null, // Show this popup text. 
    ///  
    public string tooltip { get; set; } 
 
    /// 
 
    /// href: null, // Added to the generated a tag. 
    ///  
    public string href { get; set; } 
 
    /// 
 
    /// icon: null, // Use a custom p_w_picpath (filename relative to tree.options.p_w_picpathPath). 'null' for default icon, 'false' for no icon. 
    ///  
    public string icon { get; set; } 
 
    /// 
 
    /// addClass: null, // Class name added to the node's span tag.     
    ///  
    public string addClass { get; set; } 
 
    /// 
 
    ///  children: null // Array of child nodes. 
    ///  
    public List children { get; set; } 
 
    /// 
 
    /// unselectable: false, // Prevent selection. 
    ///  
    public bool unselectable { get; set; } 
 
    /// 
 
    /// hideCheckbox: false, // Suppress checkbox display for this node. 
    ///  
    public bool hideCheckbox { get; set; } 
 
    /// 
 
    /// select: false, // Initial selected status. 
    ///  
    public bool select { get; set; } 
 
    /// 
 
    /// May be used with activate(), select(), find(), ... 
    ///  
    public string key { get; set; } 
 
    /// 
 
    /// expand: false, // Initial expanded status. 
    ///  
    public bool expand { get; set; } 
 
    /// 
 
    /// focus: false, // Initial focused status. 
    ///  
    public bool focus { get; set; } 
 
    /// 
 
    /// Use a folder icon. Also the node is expandable but not selectable.false 
    ///  
    public bool isFolder { get; set; } 
 
    /// 
 
    /// isLazy: false,  Call onLazyRead(), when the node is expanded for the first time to allow for delayed 
    ///  
    public bool isLazy { get; set; } 
 
    /// 
 
    /// noLink: false, // Use span instead of a tag for this node 
    ///  
    public bool noLink { get; set; } 
 
    /// 
 
    /// activate: false, // Initial active status. 
    ///  
    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; 
    } 
} 

因?yàn)閖avascript對(duì)大小寫敏感所以這里我將屬性都改成小寫已達(dá)到和dynatree的children參數(shù)統(tǒng)一。

接下來(lái)控制器很簡(jiǎn)單的返回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"; 
} 
 
Index