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框架,查阅了相 ...
随机推荐
- exgcd模板
逆元模板P1082 #include <cstdio> #include <algorithm> int exgcd(int a, int b, int &x, int ...
- Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗
Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...
- vim编辑器基本操作介绍
vim编辑器基本操作介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 可能很多小伙伴都听说过vi编辑器或是vim编辑器.它们是Unix和Linux世界最流行的编辑器之一,他们的特 ...
- sql语句解析顺序和执行顺序
sql语句执行顺序1.from子句组装来自不同数据源的数据2.where子句基于指定的条件对记录行进行筛选3.group by子句将数据划分为多个分组4.使用聚集函数进行计算5.使用having子句筛 ...
- HDU 3537 基础翻硬币模型 Mock Turtles 向NIM转化
翻硬币游戏,任意选3个,最右边的一个必须是正面.不能操作者败. 基本模型..不太可能自己推 还是老实记下来吧..对于单个硬币的SG值为2x或2x+1,当该硬币的位置x,其二进制1的个数为偶数时,sg= ...
- [R语言]关联规则1---不考虑items之间的时序关系
本文介绍的是关联规则,分为两部分:第一部分是---不考虑用户购买的items之间严格的时序关系,每个用户有一个“购物篮”,查找其中的关联规则.第二部分--- 考虑items之间的严格的时序关系来分析用 ...
- decimal模块
简介 decimal意思为十进制,这个模块提供了十进制浮点运算支持. 常用方法 1.可以传递给Decimal整型或者字符串参数,但不能是浮点数据,因为浮点数据本身就不准确. 2.要从浮点数据转换为De ...
- C++ socket 网络编程 简单聊天室
操作系统里的进程通讯方式有6种:(有名/匿名)管道.信号.消息队列.信号量.内存(最快).套接字(最常用),这里我们来介绍用socket来实现进程通讯. 1.简单实现一个单向发送与接收 这是套接字的工 ...
- CSS3设置内容超过一定长度后自动折行
在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签,但是出来之后是一行,有时候会超过边框的宽度,所以研究了如何折行,如下代码: <!DOCTYPE html> <h ...
- 联通-长春处，FDD和TDD宏站，数据业务接入时延期望值默认值应为80ms
有小坑 备注:若已经跑过V5.40.00_Alpha1_Baseline.sql或V5.30.02_Beta_TO_V5.40.00_Alpha1.sql的脚本,再次运行升级脚本修改不成功,需手动在数 ...