一个简单的canvs做的组织架构图及源码

最新推荐文章于 2022-01-05 05:49:41 发布

q993657559

最新推荐文章于 2022-01-05 05:49:41 发布

阅读量600

点赞数

本文链接：https://blog.csdn.net/qq_37081057/article/details/106284826

版权

最近在做一个企业人事管理系统，对于这样一个系统来说，一个能够直观展示出公司部门结构的架构图是不可或缺的。

初版效果如下图：

目录结构如下：

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

   var $ = go.GraphObject.make;
   var myDiagram =
   $(go.Diagram, "myDiagramDiv1",
       {
       initialContentAlignment: go.Spot.Center,
       "undoManager.isEnabled": true,
       layout: $(go.TreeLayout,
                   { angle: 90, layerSpacing: 20 })
       });

   myDiagram.nodeTemplate =
   $(go.Node, "Vertical",
   { selectionObjectName: "BODY", deletable: true,
       width:200
   },

   $(go.Panel, "Auto",
       { name: "BODY" },
       $(go.Shape, "Rectangle",
       { fill:"white", stroke: "#ddd" }
       ),
       $(go.Panel, "Auto",
       { margin:0,
           width:200,
           height:80
       },
       // the title
       $(go.TextBlock,
           { stretch: go.GraphObject.Horizontal,
           font: "bold 12pt Verdana, sans-serif",
           width:200,
           height:30,
           margin:10
           },
           new go.Binding("text", "name")
       ),
       $(go.TextBlock,
           { stretch: go.GraphObject.Horizontal,
           font: "bold 12pt Verdana, sans-serif",
           height:30
           },
           new go.Binding("text", "key")
       ),
       $(go.TextBlock,
           { stretch: go.GraphObject.Horizontal,
           font: "bold 12pt Verdana, sans-serif",
           height:30
           },
           new go.Binding("text", "parent")
       )
       )
   ),
   $(go.Panel,
       { height: 15 },
       $("TreeExpanderButton")
   )
   );

   myDiagram.linkTemplate =
   $(go.Link,
       { routing: go.Link.Orthogonal, corner: 5 },
       $(go.Shape, { strokeWidth: 1, stroke: "#555" }));

   var model = $(go.TreeModel);
   model.nodeDataArray =
   [
   { key: "1", name: "阿里巴巴集团", },
   { key: "2", parent: "1", name: "设计部",},
   { key: "3", parent: "1", name: "运营部" },
   { key: "4", parent: "3", name: "销售员" },
   { key: "5", parent: "3", name: "文员"},
   { key: "6", parent: "2", name: "前端开发"},
   { key: "7", parent: "2", name: "程序员"},
{
key:"8",parent:"6",name:"财务财务财务"
}
   ];
   myDiagram.model = model;
</script>

</div>
</body>
</html>

q993657559

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的canvs做的组织架构图及源码

最近在做一个企业人事管理系统，对于这样一个系统来说，一个能够直观展示出公司部门结构的架构图是不可或缺的。初版效果如下图：目录结构如下：html代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="myDiagramDiv1"style="
复制链接

扫一扫