由于日常WEB开发中常会用到树形来完成以下主要功能。
主要解决以下一些功能
经过几个插件的比较最后决定使用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 p_w_picpath (filename relative to tree.options.p_w_picpathPath). '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";
- }
- <h3>Index</h3>
- <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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。