<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"/>
<title>横向组织架构图</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="HTML,ASP,PHP,SQL"><meta name="keywords" content="HTML,ASP,PHP,SQL">
<link rel="stylesheet" href="./css/org.css"/>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/org.js"></script>
</head>
<body>
<div><p>本案例来源于 https://gitee.com/atcrab/crab 作者:青苗</p></div>
<div id="orgChart"></div>
<script>
var data = [{"id":"0","pid":"0","name":"","initial":"bmd"}];
loadOrg(data);
function loadOrg(data) {
var orgChart = $('#orgChart').orgChart({
data: data,
showControls: true,
allowEdit: true,
newNodeText: '添加子部门',
onAddNode: function (node) {
//log('Created new node on node ' + node.data.id);
//org.addNode({id: 2, name: '111', pid: 1});
orgChart.newNode(node.data.id);
},
onDeleteNode: function (node) {
console.log('Deleted node ' + node.data.id);
if (node.data.id == 0) {
console.log(1)
} else {
orgChart.deleteNode(node.data.id);
}
},
onClickNode: function (node) {
console.log('--sd---', node.data)
console.log('---data---', orgChart.getData());
}
});
}
</script>
</body>
</html>
