C#MVC中ztree的简单使用

参考资料： http://www.treejs.cn/v3/demo.php#_101

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等，本文只介绍ztree的简单应用。

一、首先创建节点模型实体类

 /// <summary>
    /// 节点实体模型类
    /// </summary>
    public class MyNodes
    {
        public int id { get; set; }
        public int pId { get; set; }
        public string iconOpen { get; set; }
        public string iconClose { get; set; }
        /// <summary>
        /// 展开
        /// </summary>
        public bool open { get; set; }
        /// <summary>
        /// 没有子节点
        /// </summary>
        public bool isParent { get; set; }
        /// <summary>
        /// 节点名称
        /// </summary>
        public string name { get; set; }

        public string icon { get; set; }
    }

    public class zNodes
    {
        /// <summary>
        /// 展开
        /// </summary>
        public bool open { get; set; }
        /// <summary>
        /// 没有子节点
        /// </summary>
        public bool isParent { get; set; }
        /// <summary>
        /// 节点名称
        /// </summary>
        public string name { get; set; }

        private List<zNodes> _children;
        /// 子节点集合 
        public List<zNodes> children
        {
            get
            {
                if (_children == null)
                {
                    return _children = new List<zNodes>();
                }
                return _children;
            }
            set
            {
                _children = value;
            }
        }

二、添加给页面提供数据的方法（注：记得引用    using Newtonsoft.Json;）

 1   /// <summary>
 2         /// 给页面提供json格式的节点数据
 3         /// </summary>
 4         /// <returns></returns>
 5         [HttpGet]
 6         public string GetjsonDb()
 7         {
 8             ///节点类集合
 9             List<MyNodes> myNodes = new List<MyNodes>();
10             myNodes.Add(new MyNodes
11             {
12                 id = 1,
13                 name = "首页        ",
14                 pId = 0,
15                 open = false,
16                 isParent = true
17             });
18             myNodes.Add(new MyNodes
19             {
20                 id = 2,
21                 name = "攻略",
22                 pId = 0,
23                 isParent = true
24             });
25             myNodes.Add(new MyNodes
26             {
27                 id = 3,
28                 name = "王者攻略 ",
29                 pId = 2
30             });
31             //将获取的节点集合转换为json格式字符串，并返回
32             string json = JsonConvert.SerializeObject(myNodes);
33             return json;
34         }
35 
36 
37 
38     }

三、页面部分

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
     @*引入这三个 .css 和js文件*@
    <link href="~/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="~/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script src="~/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript">
        //定义接收节点数据的变量
        var zNodes;
        //节点配置信息
        var setting = {
            data: {
                //控制子节点加载时候是加载还是折叠
                simpleData: {
                    enable:true
                }
            }
        };
        $(function(){

            //获取访问方法获取节点数据
            $.getJSON('/Text/GetjsonDb', function (res) {
                zNodes = res;
                //初始化树节点
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            })
        });
       </script>
</head>
<body>
    <h1>最简单的树 -- 标准 JSON 数据</h1>
    @*<h6>[ 文件路径: core/standardData.html ]</h6>*@
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div style="float:left;">
            <img width="600" height="700"  style="border:1PX"/>
        </div>
    </div>
</body>
</html>

简单的效果就已经实现了 ，效果图如下：

 

posted @ 2018-09-07 16:53  逆水行舟-奕  阅读(2126)  评论(2)  编辑  收藏  举报