orgchart.js， 组织架构图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />      
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    
<title>org chart </title>
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">  
<meta http-equiv="X-UA-Compatible" content="IE =EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome =1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/gif" />
<meta name="Keywords" content="Geovin Du 涂聚文，塗聚文"/>
<meta name="Description" content="Geovin Du 涂聚文，塗聚文">
<meta name="author" content="Geovin Du 涂聚文，塗聚文，geovindu">
  <link rel="stylesheet" href="css/jquery.orgchart.css">     
</head>
<body>
<div id="chart-container"></div>
 <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script> 
<script type="text/javascript">
    (function($) {
  $(function() {
       
      /*
      data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时
      */
    var oc = $('#chart-container').orgchart({
      'data' : '1.json',
      'depth': 2,
      'nodeContent': 'title',
        drag: true,//是否可以拖动
       //'direction': 'b2t',
        //'direction': 'r2l',
        //'toggleSiblingsResp': true,
        'exportButton': true,
        'exportFilename': 'DuOrgChart',
       'pan': true,
      'zoom': true
    });
 
  });
})(jQuery);
     
    </script>
</body>
</html>

　1.json:　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
    "id":"0",
    "name": "Lao老 Lao",
    "title":"geovindu",
    "children": [{
            "id":"1",
            "name": "Bo Miao",
            "title":"geovindu"
        },
        {
            "id":"2",
            "name": "Su Miao",
            "title":"geovindu",
            "children": [{
                    "id":"4",
                    "name": "Tie Hua",
                   "title":"geovindu "
                },
                {
                    "id":"5",
                    "name": "Hei Hei",
                    "title":"geovindu",
                    "children": [{
                             "id":"6",
                            "name": "Pang Pang",
                        "title":"涂聚文"
                        },
                        {
                            "id":"7",
                            "name": "Xiang Xiang",
                            "title":"涂聚文"
                        }
                    ]
                }
            ]
        },
        {
            "id":"3",
            "name": "Hong Miao",
            "title":"geovindu"
        },
        {
            "id":"4",
            "name": "Chun Miao",
            "title":"geovindu"
        }
    ]
}
     
    

　　

 

?
1
2
3
4
5
6
7
8
create table OrgChart
(
    Id INT IDENTITY(1,1) PRIMARY KEY,
    parent INT,
    [name] NVARCHAR(100),
    title NVARCHAR(100)
)
GO

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class Children
{
    public string id { get; set; }
    public string parent { get; set; }
    public string name { get; set; }
    public string title { get; set; }
    public List<Children> children { get; set; }
}
 
/// <summary>
///
/// </summary>
public class OrgChartRoot
{
    public string id { get; set; }
    public string parent { get; set; }
    public string name { get; set; }
    public string title { get; set; }
    public List<Children> children { get; set; }
}

　　

posted @   ®Geovin Du Dream Park™  阅读(383)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2015-03-19 C# Time Class using MySQL
2011-03-19 C# Create Access File
2010-03-19 csharp(C#) 调用SQL自定义函数返回值
2009-03-19 C#2.0 读word的多个表格到DataGridView或是其它控件 XP Vista
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示