前言：网上关于编写组织机构树的教程并不少，我第一次写树的时候也是在网上借鉴别人的技术，走了一些弯路写下了树。是因为这些教程都不是很全面，对于编程新手来说跳跃性太强。所以趁着闲暇时期，我用心的写个树，供大家借鉴，尽量做到通俗易懂，若有不恰当的地方，还望高人指出。

工具以及语言： vs2015   sqlserver2008   c#   js  css   html

整体思路：本次教程，你以为我只写个树。实际这不止是个树，这将包括如何创建一个MVC，如何将项目与数据库关联，如何设计数据库，如何从数据库里取出数据，再如何运用逻辑将这些数据返回一个树，还是一个树。

开始：

一、创建项目：在vs2015中创建一个 web项目(.NET Framework)，如下

选择MVC 框架(该框架自带一些集成的类，用起来比较方便)

该项目的默认启动控制器为HomeController

二、引入相应的文件[  SqlSugar.dll(用以连接数据库) ，jquery-easyui(我用的是版本1.4)  ] ，我已将这两个文件放入我的文件库中 点击可下载

下载这两个文件，并解压　　

将jquery-easyUI 放入到Scripts 文件夹里，并包括到项目中去，删除掉Scripts里另一个版本的jquery-1.10.2.min.js(因为jquery-easyui中也带有另一个版本的jquery.min.js不删除该文件会引起引用冲突)

　　

　　

将jquery-easyui文件夹放在Scripts文件夹里面，然后在vs2015工具打开项目后，在解决方案资源管理器中点击显示所有文件，右键点击显示出来的jquery-easyui文件夹，将其包括在项目中即可，如下图

再引入SqlSugar.dll

三、编写

 1.在web.config中将数据库配置好

2.前台界面 因为mvc项目默认的启动控制器为HomeController.cs 所以我们在 HomeController控制器的Index视图里编写前端程序

直接上代码

引用部分

    <!--引用Jquery的js文件-->

    <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/jquery.min.js"></script>

    <!--引用Easy UI的js文件-->

    <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>

    <!--<5>.引用Easy UI的国际化文件         以下为让它显示中文-->

    <script type="text/javascript" src="~/Scripts/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>

    <!--<5>.引用Easy UI的 css文件-->

    <link rel="stylesheet" type="text/css" href="~/Scripts/jquery-easyui-1.4/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="~/Scripts/jquery-easyui-1.4/themes/icon.css" />

js部分

    <script type="text/javascript">

        $(function () {

            loadMenuTree();

        });

        function loadMenuTree() {

            $('#orgTree').tree({

                url: '/Home/GetEasyTree',//链接到对应的控制器方法

                lines: true,

                animate: true,

                checkbox: false,

                onBeforeSelect: function (node) { },

                onCheck: function (node, checked) { },

                onSelect: function (node) {

                },

                onLoadSuccess: function () {

                    var rootNode = $("#orgTree").tree('getRoot');

                    $("#orgTree").tree("select", rootNode.target);

                }

            })

        }

    </script>

html部分

<body class="easyui-layout" data-options="fit:true,border:false">

    <div region="west" border="false" data-options="title:'系统导航',collapsible:true">

        <div id="orgTree"></div>

    </div>

</body>

说明：在html部分里放一个 id为orgTree的div 在js里面编写逻辑，异步加载树对应的节点,详细部分将在后台代码中实现

3 后台代码

前台启动的方法，该方法属于HomeController控制器

        [HttpPost]

        public string GetEasyTree()

        {

            string sql = string.Empty;

            string json = string.Empty;

            using (var dbContext = DBContext.GetInstance())

            {

                List<tree_menu> menulist = new List<tree_menu>();

                sql = string.Format("select * from tree_menu");

                menulist = dbContext.SqlQuery<tree_menu>(sql).ToList();

                List<EasyUITree> listTreeNodes = new List<EasyUITree>();

                string rootpid = "";//加载树最初，根节点的上级id为"00"

                tree_menu.LoadTreeNode(menulist, listTreeNodes, rootpid);

                json = ObjToJson(listTreeNodes);

            }

              return json;

        }

//将集合转换为json数据

　　　　　　public static string ObjToJson<T>(T data)
             {
                   return JsonConvert.SerializeObject(data);
             }

 

关联数据库的类

   //数据库关联

    public class DBContext

    {

        //禁止实例化

        private DBContext()

        {

        }

        public static string ConnectionString

        {

            get { return System.Configuration.ConfigurationManager.ConnectionStrings["SqlServer"].ToString();}

        }

        public static SqlSugarClient GetInstance()

        {

            SqlSugarClient db = new SqlSugarClient(ConnectionString);

            return db;

        }

    }

model类与tree类

    [Serializable()]

    public partial class tree_menu

    {

        public string tree_code { get; set; }

        public string tree_name { get; set; }

        public string tree_parent_code { get; set; }

        public int tree_level { get; set; }

        public string note { get; set; }

    }

    public class EasyUITree

    {

        public string id { get; set; }

        public string text{ get; set; }

        public string parent_code { get; set; }

        public string state { get; set; }//节点状态， open/closed

        public string iconCls { get; set; }//节点图标

        public List<EasyUITree> children { set; get; }

    }

生成树的类

public partial class tree_menu

    {

        //将菜单转为easyUItree树

        private EasyUITree TransformTreeNode()

        {

            EasyUITree easytree = new EasyUITree()

            {

                id = this.tree_code.Trim(),

                text = this.tree_name.Trim(),

                parent_code = this.tree_parent_code.Trim(),

                children = new List<EasyUITree>()

            };

            return easytree;

        }

        public static void LoadTreeNode(List<tree_menu> listmenus, List<EasyUITree> listTreeNodes,string pid)

        {

            //循环全部的菜单

            foreach (tree_menu menu in listmenus)

            {

                //如果某个菜单的上级节点是参数节点，将其归为这个参数节点的下级节点里

                if (menu.tree_parent_code.Trim() == pid)

                {

                    EasyUITree node = menu.TransformTreeNode();

                    listTreeNodes.Add(node);

                    LoadTreeNode(listmenus, node.children, node.id.Trim());

                }

            }

        }

    }

四、数据库的设计

　　数据表有 节点id  节点名称、上级节点id、节点等级、备注 等，下图为数据表的详细设计与实例数据

五、运行效果图

后记：该功能知识简单的从数据库中取出有上下级关联的一些数据，经过程序加工，将其简单的展示在页面上，具体细节功能，以后再加工，嘿嘿。

MVC+easyui,写个树的更多相关文章

  1. 数据字典系统，要的进来下载吧，MVC+Easyui写的

    数据字典系统,要的进来下载吧,以后做开发不用单独去生成一个数据字典了,直接打开此系统就OK啦 使用VS2012写的 语法是SQL 2005以上版本,包含2005的哦,2000的不适用此系统 字数不够啦 ...

  2. ASP.NET MVC +EasyUI 权限设计(二)环境搭建

    请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...

  3. ASP.NET MVC +EasyUI 权限设计(一)开篇

    在前一段时间中,老魏的确非常的忙碌,Blog基本上没有更新了,非常的抱歉,那么在后面的时间中,老魏会尽量的抽时间来写的,可能时间上就不太富裕了.今天开始呢,老魏会和大家分享一下关于权限设计的有关文章, ...

  4. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

  5. asp.net mvc +easyui 实现权限管理（二）

    一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...

  6. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

  7. MVC+EasyUI 菜单导航的实现

    一个简单的使用mvc+easyUi 动态菜单显示 直接上代码 前端 function initMenu() { $.get("/Admin/Home/GetNav", functi ...

  8. ASP.NET MVC+EasyUI+Entity FrameWork 整合开发

    本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...

  9. 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识

    对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识   初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...

随机推荐

  1. Codechef Sad Pairs——圆方树+虚树+树上差分

    SADPAIRS 删点不连通,点双,圆方树 非割点:没有影响 割点:子树DP一下 有不同颜色,所以建立虚树 在圆方树上dfs时候 如果当前点是割点 1.统计当前颜色虚树上的不连通点对,树形DP即可 2 ...

  2. 伤不起：File.toPath() & Paths.get()

    java.nio.file.Path这个类应该是从java7才开始有的. 通过File类有两个方法可以转换成Path. 1. Path p = Paths.get(file.toURI());  // ...

  3. Python里面这些点，据说80%的新手都会一脸懵逼

    Python里面这些点,据说80%的新手都会一脸懵逼 菜鸟Python 关注 2018.10.10 12:51 字数 1833 阅读 123评论 0喜欢 10 Python虽然语法简单,通俗易懂,但是 ...

  4. get请求中的url encode问题

    首先发表一下感慨,Python的requests模块确实太简便,省却了很多的转码等等等等的问题,但这也是缺点,对于我这种基础不好的同学来说让我少知道了许多本来应该知道的东西. url encode: ...

  5. Hadoop生态圈-Kafka的旧API实现生产者-消费者

    Hadoop生态圈-Kafka的旧API实现生产者-消费者 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.旧API实现生产者-消费者 1>.开启kafka集群 [yinz ...

  6. bzoj千题计划225：bzoj2143: 飞飞侠

    http://www.lydsy.com/JudgeOnline/problem.php?id=2143 分层图最短路 把能够弹跳的曼哈顿距离看做能量 dp[i][j][k]表示在(i,j)位置,还有 ...

  7. 原生JS 基础总结

    0. 好习惯 分号 ; 花括号 {}, var 弄清楚 null , undefined 区别 , isNaN, === 与 == 区别 1. prompt , confirm , alert 不同框 ...

  8. scala 资料集结

    Scala入门到精通 http://lib.csdn.net/base/scala/structure http://hongjiang.info/scala/ http://blog.csdn.ne ...

  9. 40个新鲜的 jQuery 插件，使您的网站用户友好

    作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,这篇文章特别收集了40个新鲜的 ...

  10. JD m站自我解析理解

    第一步:从首页着手 文档部分:应用的是H5默认文档开头 即:<!DOCUMENT html> head部分:放了一些相关的JS,title描述,然后就是meta表述了.比较有参考的如下 & ...