189 8069 5689

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

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

在巴南等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、成都网站制作 网站设计制作定制网站,公司网站建设,企业网站建设,品牌网站建设,全网整合营销推广,外贸网站制作,巴南网站建设费用合理。

 

主要解决以下一些功能

  1. 数据结构的树形层级展示
  2. 多选项目
  3. 单选项目
  4. 方便Ajax延迟加载

 

经过几个插件的比较最后决定使用dynatree。来完成以上功能。

dynatree项目网站 https://code.google.com/p/dynatree/

本文中dynatree的版本为1.2.4

首先通常代码中会有一个树形结构的实体对象如下代码: 

  1. public class Node 
  2.     public int ID { get; set; } 
  3.  
  4.     public string Name { get; set; } 
  5.  
  6.     public string Description { get; set; } 
  7.  
  8.     public List Children { get; set; } 
  9.  
  10.     public Node Parent { get; set; } 

由于我们采用AJAX方式所以我打算在后台的controller中返回json的方式来完成对tree的数据加载
于是为了方便dynatree的前台接受,我做了一个封装类代码如下

  1. public class DynatreeNode 
  2.     private DynatreeNode() 
  3.     { 
  4.         children = new List(); 
  5.     } 
  6.  
  7.     #region property 
  8.     ///  
  9.     /// (required) Displayed name of the node (html is allowed here) 
  10.     ///  
  11.     public string title { get; set; } 
  12.  
  13.     ///  
  14.     /// tooltip: null, // Show this popup text. 
  15.     ///  
  16.     public string tooltip { get; set; } 
  17.  
  18.     ///  
  19.     /// href: null, // Added to the generated a tag. 
  20.     ///  
  21.     public string href { get; set; } 
  22.  
  23.     ///  
  24.     /// icon: null, // Use a custom p_w_picpath (filename relative to tree.options.p_w_picpathPath). 'null' for default icon, 'false' for no icon. 
  25.     ///  
  26.     public string icon { get; set; } 
  27.  
  28.     ///  
  29.     /// addClass: null, // Class name added to the node's span tag.     
  30.     ///  
  31.     public string addClass { get; set; } 
  32.  
  33.     ///  
  34.     ///  children: null // Array of child nodes. 
  35.     ///  
  36.     public List children { get; set; } 
  37.  
  38.     ///  
  39.     /// unselectable: false, // Prevent selection. 
  40.     ///  
  41.     public bool unselectable { get; set; } 
  42.  
  43.     ///  
  44.     /// hideCheckbox: false, // Suppress checkbox display for this node. 
  45.     ///  
  46.     public bool hideCheckbox { get; set; } 
  47.  
  48.     ///  
  49.     /// select: false, // Initial selected status. 
  50.     ///  
  51.     public bool select { get; set; } 
  52.  
  53.     ///  
  54.     /// May be used with activate(), select(), find(), ... 
  55.     ///  
  56.     public string key { get; set; } 
  57.  
  58.     ///  
  59.     /// expand: false, // Initial expanded status. 
  60.     ///  
  61.     public bool expand { get; set; } 
  62.  
  63.     ///  
  64.     /// focus: false, // Initial focused status. 
  65.     ///  
  66.     public bool focus { get; set; } 
  67.  
  68.     ///  
  69.     /// Use a folder icon. Also the node is expandable but not selectable.false 
  70.     ///  
  71.     public bool isFolder { get; set; } 
  72.  
  73.     ///  
  74.     /// isLazy: false,  Call onLazyRead(), when the node is expanded for the first time to allow for delayed 
  75.     ///  
  76.     public bool isLazy { get; set; } 
  77.  
  78.     ///  
  79.     /// noLink: false, // Use span instead of a tag for this node 
  80.     ///  
  81.     public bool noLink { get; set; } 
  82.  
  83.     ///  
  84.     /// activate: false, // Initial active status. 
  85.     ///  
  86.     public bool activate { get; set; } 
  87.     #endregion 
  88.  
  89.     public static DynatreeNode Create(Node node) 
  90.     { 
  91.         DynatreeNode dynatreeNode = new DynatreeNode 
  92.         { 
  93.             title = node.Name, 
  94.             tooltip = node.Name, 
  95.             activate = false, 
  96.             addClass = null, 
  97.             expand = false, 
  98.             focus = false, 
  99.             icon = null, 
  100.             href = null, 
  101.             key = null, 
  102.             unselectable = false, 
  103.             select = false, 
  104.             noLink = false, 
  105.             isLazy = false, 
  106.             hideCheckbox = false, 
  107.             isFolder = false 
  108.         }; 
  109.         foreach (var item in node.Children) 
  110.         { 
  111.             dynatreeNode.isFolder = true; 
  112.             dynatreeNode.children.Add(DynatreeNode.Create(item)); 
  113.         } 
  114.         return dynatreeNode; 
  115.     } 

因为javascript对大小写敏感所以这里我将属性都改成小写已达到和dynatree的children参数统一。

接下来控制器很简单的返回json即可,代码如下:

 

  1. public ActionResult AjaxTree() 
  2.         root = GetTreeRoot(); 
  3.         var dynatreeNode = DynatreeNode.Create(root); 
  4.         return Json(dynatreeNode, JsonRequestBehavior.AllowGet); 

在view视图中我们只要加载jquery,jqueryUI和dynatree.js
由于dynatree的checkbox等使用样式写的,所以也必须引用dynatree.css
视图view的代码如下:

  1. @{ 
  2.     ViewBag.Title = "Index"; 
  3.     Layout = "~/Views/Shared/_Layout.cshtml"; 
  4.  
  5. Index

     
   
  • @section scripts{ 
  •      
  •      
  •      
  •         $(function () { 
  •             $("#tree").dynatree({ 
  •                 checkbox: true, 
  •                 selectMode: 2, 
  •                 initAjax: { url: '/home/ajaxTree' }, 
  •                 onSelect: function (select, node) { 
  •                     if (select) { 
  •                         alert(node.data.title)                         
  •                     } 
  •                 } 
  •             }); 
  •         }); 
  •      
  • 一颗简单的多选树就这么完成了,如果要单选只需将参数selectMode设置为1

     


    网页名称:基于JQuery的Dynatree解决MVC中对树形结构的解决方案
    当前地址:http://cdxtjz.cn/article/gggics.html

    其他资讯