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框架,查阅了相 ...
随机推荐
- Effective Java -- 对于所有对象都通用的方法
覆盖equb时请遵循通用约定: 自反性.对于任何非null的引用值x,xequals(x)必须返回true. 对称性.对于任何非null的引用值x和y,当且晋档y.equals(x)返回true的时候 ...
- Luogu 2469 [SDOI2010]星际竞速 / HYSBZ 1927 [Sdoi2010]星际竞速 （网络流，最小费用流）
Luogu 2469 [SDOI2010]星际竞速 / HYSBZ 1927 [Sdoi2010]星际竞速 (网络流,最小费用流) Description 10年一度的银河系赛车大赛又要开始了.作为全 ...
- [0,x)的随机数
#include <cstdio> #include <cstdlib> #include <cmath> #include <cstring> #in ...
- vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
- service注入到action中
service注入到action中 之前本人每次要获得service都是在action自己通过WebApplicationContext的getBean获得的,一直在spring中只配置到了servi ...
- Maven的国内镜像(解决jar下载过慢)
Maven简介 maven作为一个项目管理工具确实非常好用,结果在使用时候,你会发现下载jar速度不如自己在网上下载.之前oschina的中央仓库可用,现在oschina的maven服务器关了,只能拿 ...
- SpringSecurity csrf验证忽略某些请求
前几天项目中遇到springSecurity问题,研究了大半天,掉进了csrf的坑,先认识一下csrf CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forgery),跟 ...
- 第9月第15天 设计模式 adapter mvc
1. 有一道iOS面试题,iOS中都有什么设计模式?很少有答案说包括adapter. gof 书中adapter模式有以下内容: 实现: ... b ) 使 用 代 理 对 象 在这种方法中, T r ...
- Sortable.js
拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此 ...
- lucene中文分词——（四）
1.分析器的执行过程: