温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-15 19:37:53 来源:网络 阅读:2388 作者:zachary_woo 栏目:web开发

由于日常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 { getset; } 
  3.  
  4.     public string Name { getset; } 
  5.  
  6.     public string Description { getset; } 
  7.  
  8.     public List<Node> Children { getset; } 
  9.  
  10.     public Node Parent { getset; } 

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

  1. public class DynatreeNode 
  2.     private DynatreeNode() 
  3.     { 
  4.         children = new List<DynatreeNode>(); 
  5.     } 
  6.  
  7.     #region property 
  8.     /// <summary> 
  9.     /// (required) Displayed name of the node (html is allowed here) 
  10.     /// </summary> 
  11.     public string title { getset; } 
  12.  
  13.     /// <summary> 
  14.     /// tooltip: null, // Show this popup text. 
  15.     /// </summary> 
  16.     public string tooltip { getset; } 
  17.  
  18.     /// <summary> 
  19.     /// href: null, // Added to the generated a tag. 
  20.     /// </summary> 
  21.     public string href { getset; } 
  22.  
  23.     /// <summary> 
  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.     /// </summary> 
  26.     public string icon { getset; } 
  27.  
  28.     /// <summary> 
  29.     /// addClass: null, // Class name added to the node's span tag.     
  30.     /// </summary> 
  31.     public string addClass { getset; } 
  32.  
  33.     /// <summary> 
  34.     ///  children: null // Array of child nodes. 
  35.     /// </summary> 
  36.     public List<DynatreeNode> children { getset; } 
  37.  
  38.     /// <summary> 
  39.     /// unselectable: false, // Prevent selection. 
  40.     /// </summary> 
  41.     public bool unselectable { getset; } 
  42.  
  43.     /// <summary> 
  44.     /// hideCheckbox: false, // Suppress checkbox display for this node. 
  45.     /// </summary> 
  46.     public bool hideCheckbox { getset; } 
  47.  
  48.     /// <summary> 
  49.     /// select: false, // Initial selected status. 
  50.     /// </summary> 
  51.     public bool select { getset; } 
  52.  
  53.     /// <summary> 
  54.     /// May be used with activate(), select(), find(), ... 
  55.     /// </summary> 
  56.     public string key { getset; } 
  57.  
  58.     /// <summary> 
  59.     /// expand: false, // Initial expanded status. 
  60.     /// </summary> 
  61.     public bool expand { getset; } 
  62.  
  63.     /// <summary> 
  64.     /// focus: false, // Initial focused status. 
  65.     /// </summary> 
  66.     public bool focus { getset; } 
  67.  
  68.     /// <summary> 
  69.     /// Use a folder icon. Also the node is expandable but not selectable.false 
  70.     /// </summary> 
  71.     public bool isFolder { getset; } 
  72.  
  73.     /// <summary> 
  74.     /// isLazy: false,  Call onLazyRead(), when the node is expanded for the first time to allow for delayed 
  75.     /// </summary> 
  76.     public bool isLazy { getset; } 
  77.  
  78.     /// <summary> 
  79.     /// noLink: false, // Use span instead of a tag for this node 
  80.     /// </summary> 
  81.     public bool noLink { getset; } 
  82.  
  83.     /// <summary> 
  84.     /// activate: false, // Initial active status. 
  85.     /// </summary> 
  86.     public bool activate { getset; } 
  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. <h3>Index</h3> 
  6. <div id="tree"></div>   
  7. @section scripts{ 
  8.     <link href="~/Content/skin-vista/ui.dynatree.css" rel="stylesheet" /> 
  9.     <script src="~/Scripts/jquery.dynatree.js"></script> 
  10.     <script type="text/ecmascript"> 
  11.         $(function () { 
  12.             $("#tree").dynatree({ 
  13.                 checkbox: true, 
  14.                 selectMode: 2, 
  15.                 initAjax: { url: '/home/ajaxTree' }, 
  16.                 onSelect: function (select, node) { 
  17.                     if (select) { 
  18.                         alert(node.data.title)                         
  19.                     } 
  20.                 } 
  21.             }); 
  22.         }); 
  23.     </script> 

一颗简单的多选树就这么完成了,如果要单选只需将参数selectMode设置为1

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI