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框架,查阅了相 ...
随机推荐
- dwr网上使用例子
转: dwr实现聊天室功能 2016年01月15日 10:22:43 我爱喝可乐 阅读数:564 用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无 ...
- HTML5 文件API
filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...
- OpenStack 网络服务 Neutron 私有网络构建（十九）
本章内容基于之前提供者网络构建的基础上进行改动,之前文章参考如下: Openstack 网络服务 Neutron介绍和控制节点部署 (九) Openstack 网络服务 Neutron计算节点部署(十 ...
- transform 属性之 transform-origin与顺序问题
transform属性之 transform-origin 针对transform中的几种值的先后顺序 transform值的先后顺序: 注意: 当我们在旋转后再进行位移的时候,其实是按照旋转后的坐标 ...
- bzoj千题计划296：bzoj1053: [HAOI2007]反素数ant
http://www.lydsy.com/JudgeOnline/problem.php?id=1053 求n以内约数个数最多的数 #include<cstdio> using names ...
- Git与GitHub学习笔记（三）.gitignore文件忽略和删除本地以及远程文件
一.Git提供了文件忽略功能.当对工作区某个目录或者某些文件设置了忽略后,git将不会对它们进行追踪 HELP:如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件 问题:最近 ...
- dedecms织梦首页判断，添加不同标题
<title> {dede:field.title/} {dede:field name='typeid' runphp="yes"}(@me==0)? @me=&qu ...
- 20155222 2016-2017-2 《Java程序设计》第6周学习总结
20155222 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 从应用程序的角度来看,如果要将数据从来源中取出,可以使用输入串流:如果要将数据写入目的地,可 ...
- 【问题收集·中级】关于XMPP使用Base传送图片
[问题收集·中级]关于XMPP使用Base传送图片 下面是我与博友的问答过程:并在最后链接附录了相应的文件: 博友问题: 16:35:38 他跟我说要 内容图片 base64编码 上传..博友问题 ...
- BAT获取FTP指定文件
以下两个文件放在同一目录下 getfile.bat文件内容如下: @echo offftp.exe -i -s:getfile.txt 192.168.1.2(更换成你的ip,参数之间有空格)paus ...