基于JQuery的Dynatree解决MVC中对树形结构的解决方案
由于日常WEB开发中常会用到树形来完成以下主要功能。
在巴南等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、成都网站制作 网站设计制作定制网站,公司网站建设,企业网站建设,品牌网站建设,全网整合营销推广,外贸网站制作,巴南网站建设费用合理。
主要解决以下一些功能
- 数据结构的树形层级展示
- 多选项目
- 单选项目
- 方便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
Children { get; set; } - public Node Parent { get; set; }
- }
由于我们采用AJAX方式所以我打算在后台的controller中返回json的方式来完成对tree的数据加载
于是为了方便dynatree的前台接受,我做了一个封装类代码如下
- 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;
- }
- }
因为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";
- }
Index
- @section scripts{
- }
一颗简单的多选树就这么完成了,如果要单选只需将参数selectMode设置为1
文章名称:基于JQuery的Dynatree解决MVC中对树形结构的解决方案
文章URL:http://cdiso.cn/article/gggics.html