最近在做一个企业人事管理系统,对于这样一个系统来说,一个能够直观展示出公司部门结构的架构图是不可或缺的。
初版效果如下图:
目录结构如下:
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myDiagramDiv1"style="width:100%; height:600px; background-color: #fff;border: 2px solid darkgrey;"></div>
<script src="js/org.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// var data=$.ajax()
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>