jquery-easyui tree之初体验

浏览数：80 / 时间：2015年06月09日

这两天做了一天小小的WEB页面，页面中是应用上了easyui-tree控件。也是自己第一次使用easyui-tree。说实话，自己是真的完全不会。但是看过一些文档之后，自己还是弄出来。接下来，我们就一起来看这个控件到底有什么神奇的地方。

首先我们来说一下什么是jQuery EasyUI?

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

一下是easyui的特别。

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p‘).panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

由于easyui有许多的控件，在这里我们就不一一介绍。今天我们就只是浅谈一下其中的tree控件就可以了。由于我也是第一次用该控件，所以有不对的地方，请大家见谅。

首先我们来看一看我使用该控件实现的一个小小的功能。下图是实现之后的效果。

下面我们来看一看实现这个效果的步骤：我这个是在.net mvc的环境下开发。

在这里创建控制器，和创建试图的步骤，我就直接省略了。并且那不是重点。

步骤一：先将支持javascript easy-ui的支持库件进行引用，这是很重要的一个步骤，因为没有这些控件就算写出代码也是没有效果。

步骤二：通过上面的步骤已经将需要的支持库文件进行了引用。下面就可以来，实现我们的效果

<body>
  <!--首先我们需要一个标签来承载树形控件的-->
   <ul class="mytree"></ul>
  <!--书写jQuery代码即可-->
   <script type="text/javascript">

        $(function () {
            $(‘.mytree‘).tree({
                //当然这压样写是没有数据可以进行加载。说以我们还需要一些属性的定义才可//以实现
             //请求数据的地址，当然。net和java中的写法是不一样的
              url: ‘@Url.Action("DeptList", "Test")‘,
            //指定是否在点击节点的时候是否开启动画效果。
                animate: true,
             });  

        })
    </script>
</body>

在这里我们可以来看一看还具有其他的那些特性。

技术分享这些特性根据实际项目的开发来进行使用。所以在这里我只有了两个特性，毕竟只是测试数据嘛

步骤三：获取数据。这里我是从数据库获取的数据。下面看看到底在Test控制器里面到底有一些什么东西？能够让我加载数据。

技术分享

02.既然我们加载的树形节点的数据，那么我们先新建一个保存数据的

   //自定义类，用来保存节点的数据。
        public class TreeNode
        {
            public TreeNode()
            {
                this.children = new List<TreeNode>();
                this.state = "closed";
                this.attributes = new NodeAttribute() { url = null };
            }
            public int id { get; set; }//节点id
            public string text { get; set; }//节点文本
            public string state { get; set; }//节点状态
            //public string iconCls { get; set; }
            public List<TreeNode> children { get; set; }//子节点
            public NodeAttribute attributes { get; set; }//自定义属性
        }
        //自定义属性类
        public class NodeAttribute
        {
            public string url { get; set; }
        }
    }

03.接下来就该加载数据了

   public ActionResult DeptList()
        {
            int id = Convert.ToInt32(Request["id"]);
            //创建顶级节点
            //TreeNode Pnode = new TreeNode() { id = -1, text = "项目组织架构" };
            //添加到节点数据集合中
           // nodes.Add(Pnode);
            if (id == 0)
            {
                //查询状态值为true，且父节点id为0的数据
                //从数据库上下文中进行数据的检索
                depts = db.Departments.Where(c => c.Status == true && c.ParentId == null).ToList();
                //循环数据
                foreach (var item in depts)
                {
                    //添加到子节点数据中
                    TreeNode chile = new TreeNode() { id = item.DeptId, text = item.DeptName };
                    //添加到节点数据集合中
                    nodes.Add(chile);
                }

            }
            else
            {
                //加载点击的节点下的数据
                //查询状态值为true，且父节点id为0传递的id的数据.
                //从数据库上下文中进行数据的检索
                depts = db.Departments.Where(c => c.Status == true && c.ParentId == id).ToList();
                //循环数据
                foreach (var item in depts)
                {
                    //添加到子节点数据中
                    TreeNode chile = new TreeNode() { id = item.DeptId, text = item.DeptName };
                    List<Department> deptchild = db.Departments.Where(c => c.Status == true && c.ParentId == chile.id).ToList();
                    //添加到节点数据集合中
                    if (deptchild.Count == 0)
                    {
                        chile.state = "open";
                    }
                    nodes.Add(chile);
                }

            }
           //在这里我们使用轻量的数据，Josn，而且easyui解析数据的时候也能自动的
          //解析数据
            return Json(nodes, JsonRequestBehavior.AllowGet);
        }