MVC+easyui,写个树
前言：网上关于编写组织机构树的教程并不少，我第一次写树的时候也是在网上借鉴别人的技术，走了一些弯路写下了树。是因为这些教程都不是很全面，对于编程新手来说跳跃性太强。所以趁着闲暇时期，我用心的写个树，供大家借鉴，尽量做到通俗易懂，若有不恰当的地方，还望高人指出。
工具以及语言： 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,写个树的更多相关文章
- 数据字典系统，要的进来下载吧，MVC+Easyui写的
数据字典系统,要的进来下载吧,以后做开发不用单独去生成一个数据字典了,直接打开此系统就OK啦 使用VS2012写的 语法是SQL 2005以上版本,包含2005的哦,2000的不适用此系统 字数不够啦 ...
- ASP.NET MVC +EasyUI 权限设计(二)环境搭建
请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...
- ASP.NET MVC +EasyUI 权限设计(一)开篇
在前一段时间中,老魏的确非常的忙碌,Blog基本上没有更新了,非常的抱歉,那么在后面的时间中,老魏会尽量的抽时间来写的,可能时间上就不太富裕了.今天开始呢,老魏会和大家分享一下关于权限设计的有关文章, ...
- hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结
最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...
- asp.net mvc +easyui 实现权限管理（二）
一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...
- 第二百二十六节，jQuery EasyUI，Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...
- MVC+EasyUI 菜单导航的实现
一个简单的使用mvc+easyUi 动态菜单显示 直接上代码 前端 function initMenu() { $.get("/Admin/Home/GetNav", functi ...
- ASP.NET MVC+EasyUI+Entity FrameWork 整合开发
本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...
- 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识
对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识 初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...
随机推荐
- 前端学习 -- Css -- 盒子模式
框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.我们只需要将相应的盒子摆放到网页 ...
- Luogu 2762 太空飞行计划 / Libre 6001 「网络流 24 题」太空飞行计划 （网络流，最大流）
Luogu 2762 太空飞行计划 / Libre 6001 「网络流 24 题」太空飞行计划 (网络流,最大流) Description W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行 ...
- Windows 7 安装VS2008 SP1 失败
由于Windows 7自带了.NET Framework 3.5 SP1, 所以在安装VS 2008 SP1的时候会发生fatal error during installation的错误, 网上找来 ...
- Angular的依赖注入（依赖反转）原理说明
依赖注入(依赖反转)意思是由函数决定要引入什么样的依赖: let mod = angular.module('test',[]); mod.controller('test_c',function($ ...
- Codeforces Round #519 题解
A. Elections 题意概述 给出 \(a_1, \ldots, a_n\),求最小的 \(k (k \ge \max a_i)\), 使得 \(\sum_{i=1}^n a_i < \s ...
- 一个简单的二叉搜索树（C++实现）
参考:http://www.cnblogs.com/skywang12345/p/3576373.html 这里主要就是自己实现的代码,删除动作有点不一样: #ifndef __BSTREE_H__ ...
- JavaScript的单线程性质以及定时器的工作原理
前些日子还在网上争论过js动画用setTimeout还是setInterval,个人偏向于setTimeout,当动画中牵扯到ajax时用setInterval会有时间偏差,出现一些问题即使用clea ...
- A*算法改进——Any-Angle Path Planning的Theta*算法与Lazy Theta*算法
本文是该篇文章的归纳http://aigamedev.com/open/tutorial/lazy-theta-star/#Nash:07 . 传统的A*算法中,寻找出来的路径只能是沿着给出的模型(比 ...
- 第5月第24天 线性变换 opengl
1. http://news.qiyeku.com/news_837979.html 2. opengl + (Class)layerClass { return [CAEAGLLayer class ...
- oracle 级联查询 根路径
级联查询有很多教程示例,但是没有找到求特定子孙到根的路径的例子,折腾了一番总算想出方法了. 现假设我们拥有一个菜单表t_menu,其中只有三个字段:id.name和parent_id.它们是具有父子关 ...