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

王小木
2021-05-22 / 2 评论 / 296 阅读
温馨提示:
本文最后更新于2021-05-22,若内容或图片失效,请留言反馈。

今天做公司项目时,需要实现一个树形关系的组织架构图,网上查了一些资料,发现GetOrgChart框架(感兴趣可以研究研究)很好的实现了这一需求,于是用到了项目中,下面先上一个成果图。
2.png1.png
如图所示,岗位关系是一个树形关系,可以随意改变架构图大小,感觉挺不错,下面开始讲讲具体怎么做的。

数据库设计结构:

3.png
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),有什么建议或不懂可以告诉我,一起学习进步.