.net MVC使用GetOrgChart实现树形关系结构组织架构图

原文地址
今天做公司项目时，需要实现一个树形关系的组织架构图，网上查了一些资料，发现GetOrgChart框架（感兴趣可以研究研究）很好的实现了这一需求，于是用到了项目中，下面先上一个成果图。

如图所示，岗位关系是一个树形关系，可以随意改变架构图大小，感觉挺不错，下面开始讲讲具体怎么做的。

数据库设计结构：

View视图

@{ViewBag.title = "PositionChart.cshtml";Layout = null;
}
<!DOCTYPE html>
<html>
<head><title>OrgChart | Performance 2000 nodes</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><script src="~/js/jquery-1.11.0.min.js"></script><script src="~/getorgchart/getorgchart.js"></script><link href="~/getorgchart/getorgchart.css" rel="stylesheet" /><style type="text/css">html, body {margin: 0px;padding: 0px;width: 100%;height: 100%;overflow: hidden;}#people {width: 100%;height: 100%;}</style>
</head>
<body><div id="people"></div><script type="text/javascript">var source = [];$(function () {$.ajax({type: "Get",url: "@Url.Action("GetPositionChart", "Staff")",success: function (data) {var orgChart = new getOrgChart(document.getElementById("people"), {theme: "annabel",linkType: "B",primaryFields:        ["PositionName","DeptName", "code"],photoFields: ["image"],gridView: true,enableSearch: false,dataSource: data});}});})</script>
</body>
</html>

Controller

        public ActionResult PositionChart(){return View();}public ActionResult GetPositionChart(){var data = hrmContext.Position.Where(m => true);var jsdata = data.Select(p => new{id = p.ID,parentId = p.ParentId,DeptName = "部门："+p.Dept.Name,PositionName="岗位名称："+ p.Name,code="编号："+ p.Code}).ToList();return Json(jsdata, JsonRequestBehavior.AllowGet);}

应该很清楚了吧，需要用到的两个getorgchart.js和getorgchart.css可以去官网下载（http://www.getorgchart.com），有什么建议或不懂可以告诉我，一起学习进步，

.net MVC使用GetOrgChart实现树形关系结构组织架构图相关推荐

Word小技巧：秒做组织架构图，让你一目了然各部门相互关系
今天我们来分享一下word怎么做组织架构图,那么,什么是组织架构图呢?它是表现雇员.职称和群体关系的一种图表,形象的反映了组织内各机构.岗位和上下左右相互之间的关系.一个架构图就能一目了然各个部门之间 ...
Lua源码分析 - 基础篇 - Lua源码的结构和架构图（01）
目录一.Lua语言简介二.Lua架构图三.Lua源码结构很久很久没有写博客了,一直忙于工作和项目,最近依然想静下来阅读一些好的源码.自从读完了Nginx和Memcache的源码后,对服务器端的 ...
mysql 存树闭包表_关系型数据库树形关系存储-闭包表
前言在关系型数据库中,有一种逻辑关系比较难处理,这种就是树形结构.目前有很多主流的处理方案,比如说直接在业务表中存储上一级id,这样就可以用递归查询SQL的形式找到某一节点的父节点,子节点,或者兄弟 ...
tree--树，最常见的复杂关系结构
昨天想用Python解析html文档,仔细研究了一下Html网页之后,发现所有html都是由xml标签组成的树结构.然后今天就总结一下常见的这种结构,原来树结构不只是在html网页中有,他遍布大自然. ...
使用antV-G6在angualr中画树形关系图
使用antV-G6在angualr中画树形关系图(流量追踪图) 公司有个需求就是既要呈现出每个节点之间的关系(图里面需要带箭头,为了表现出流向关系),又要排版呈现出树状结构,也就是说是具备层次关系的 ...
专访 | Draven：像写代码一样，用树形的结构写文章
站在网络与技术前沿的不少开发者们,还保持着如今看起来略显古早的 Web 2.0 时代行为--写博客. 技术博客写作是工程师们沿袭已久的传统.对于各种代码段.架构图,和层级分明的逻辑推导过程来说,技术文 ...
ASP.NET MVC 生成简单的 xml 权限结构
ASP.NET MVC 生成简单的 xml 权限结构当我的一个项目到尾声时,发现系统很多模块权限有遗漏.部分模块权限遗漏是由于前期开发速度太快,开发人员未先给模块加权限而后再编写该模块功能代码.当我 ...
Java实现遍历N级树形目录结构
最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...
java遍历树_Java实现遍历N级树形目录结构
最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...

.net MVC使用GetOrgChart实现树形关系结构组织架构图

.net MVC使用GetOrgChart实现树形关系结构组织架构图相关推荐

最新文章

热门文章