gojs实现家族族谱图及弹窗编辑效果代码
代码语言：html
所属分类：图表
代码描述：gojs实现家族族谱图及弹窗编辑效果代码, 弹出图层编辑是使用jquery.fancybox插件实现。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
padding: 10px;
}
.chart {
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid #000;
}
.hidden {
display: none;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.fancybox.3.5.7.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.fancybox.3.5.7.js"></script>
</head>
<body>
<div id="familyDiagram" class="chart"></div>
<form id="form1" action="" method="post" class="hidden">
<p>
<div>姓名：</div>
<input type="text" value="陳〇〇" name="name" />
</p>
<p>
<div>出生日期：</div>
<input type="text" value="2010-10-31" name="birthday" />
</p>
<p>
<div>性別：</div>
<select name="gender">
<option value="M">男性</option>
<option value="F" selected>女性</option>
</select>
</p>
<p>
<div>關係：</div>
<select name="relation">
<option value="">兒女</option>
</select>
</p>
<p>
<input type="submit" value="送出" />
</p>
</form>
<script>
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "familyDiagram", {
initialAutoScale: go.Diagram.Uniform,
"undoManager.isEnabled": true,
maxSelectionCount: 1,
isReadOnly: true,
//isEnabled: false,
allowSelect: false,
nodeSelectionAdornmentTemplate: $(go.Adornment, "Auto", {
layerName: "Grid"
},
$(go.Shape, "Circle", {
fill: "yellow",
stroke: null
}),
$(go.Placeholder)
),
layout: $(GenogramLayout, {
direction: 90,
layerSpacing: 30,
columnSpacing: 10
})
});
function findHeadShot(gender) {
return gender === "M" ? "https://png.pngtree.com/svg/20170705/498034869c.png" :
"https://png.pngtree.com/svg/20170705/49805b929c.png";
//return "./images/" + gender + ".png";
}
// two different node templates, one for each sex,
// named by the category value in the node data object
// myDiagram.nodeTemplateMap.add("M", // male
// $(go.Node, "Vertical",
// // { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
// $(go.Panel,
// // { name: "ICON" },
// $(go.Shape, "Square",
// { width: 40, height: 40, strokeWidth: 2, fill: "white", portId: "" }
// )
// // $(go.Picture,
// // { width: 40, height: 40, imageStretch: go.GraphObject.UniformToFill },
// // new go.Binding("source", "key", findHeadShot)
// // )
// ),
// $(go.TextBlock,
// { textAlign: "center", maxSize: new go.Size(80, NaN) },
// new go.Binding("text", "n")
// )
// )
// );
myDiagram.nodeTemplateMap.add("M",
$(go.Node, "Vertical", {
/* selectable: true, */
click: function (e, obj) {
/* console.log(obj); */
console.log("Clicked on " + obj.part.data.key);
jQuery.fancybox.open({
src: '#form1',
type: 'inline',
opts: {
touch: false,
afterShow: function (instance, current) {
console.info('done!');
}
}
});
}
// selectionChanged: function(part) {
// var shape = part.elt(0);
// // shape.fill = part.isSelected ? "red" : "white";
// console.log('selectionChanged');
// console.log(part);
// }
},
$(go.Panel, "Spot",
$(go.Shape, "Circle", {
width: 45,
strokeWidth: 1,
fill: "#aac8ff",
portId: ""
}),
$(go.Panel, "Spot", {
isClipping: true
},
$(go.Shape, "Circle", {
width: 40,
strokeWidth: 0
}),
$(go.Picture, {
width: 40,
height: 40,
imageStretch: go.GraphObject.UniformToFill
},
new go.Binding("source", "gender", findHeadShot)
),
$(go.Panel,
$(go.Shape, {
stroke: null,
strokeWidth: 0,
fill: "gray"
},
new go.Binding("geometry", "", function () {
return go.Geometry.parse("F M38 0 L40 0 40 2 2 40 0 40 0 38z");
})
),
new go.Binding("visible", "", function (data) {
return data.dead === true;
})
)
),
new go.Binding("opacity", "", function (data) {
return data.dead === true ? 0.2 : 1;
})
),
$(go.TextBlock, {
textAlign: "center",
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "name")
),
$(go.TextBlock, {
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "birthday")
),
$(go.TextBlock, {
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "title"),
new go.Binding("visible", "", function (data) {
return data.title !== undefined;
})
)
)
);
// myDiagram.nodeTemplateMap.add("F", // female
// $(go.Node, "Vertical", {
// locationSpot: go.Spot.Center,
// locationObjectName: "ICON"
// },
// $(go.Panel, {
// name: "ICON"
// },
// $(go.Shape, "Circle", {
// width: 40,
// height: 40,
// strokeWidth: 2,
// fill: "white",
// portId: ""
// })
// ),
// $(go.TextBlock, {
// textAlign: "center",
// maxSize: new go.Size(80, NaN)
// },
// new go.Binding("text", "name")
// )
// )
// );
myDiagram.nodeTemplateMap.add("F",
$(go.Node, "Vertical", {
click: function (e, obj) {
/* console.log(obj); */
console.log("Clicked on " + obj.part.data.key);
jQuery.fancybox.open({
src: '#form1',
type: 'inline',
opts: {
touch: false,
afterShow: function (instance, current) {
console.info('done!');
}
}
});
}
// selectionChanged: function(part) {
// var shape = part.elt(0);
// // shape.fill = part.isSelected ? "red" : "white";
// console.log('selectionChanged');
// console.log(part);
// }
},
$(go.Panel, "Spot",
$(go.Shape, "Circle", {
width: 45,
strokeWidth: 1,
fill: "#ffaaca",
portId: ""
}),
$(go.Panel, "Spot", {
isClipping: true
},
$(go.Shape, "Circle", {
width: 40,
strokeWidth: 0
}),
$(go.Picture, {
width: 40,
height: 40,
imageStretch: go.GraphObject.UniformToFill
},
new go.Binding("source", "gender", findHeadShot)
),
$(go.Panel,
$(go.Shape, {
stroke: null,
strokeWidth: 0,
fill: "gray"
},
new go.Binding("geometry", "", function () {
return go.Geometry.parse("F M38 0 L40 0 40 2 2 40 0 40 0 38z");
})
),
new go.Binding("visible", "", function (data) {
return data.dead === true;
})
)
),
new go.Binding("opacity", "", function (data) {
return data.dead === true ? 0.2 : 1;
})
),
$(go.TextBlock, {
textAlign: "center",
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "name")
),
$(go.TextBlock, {
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "birthday")
),
$(go.TextBlock, {
maxSize: new go.Size(80, NaN),
margin: new go.Margin(5, 0, 0, 0)
},
new go.Binding("text", "title"),
new go.Binding("visible", "", function (data) {
return data.title !== undefined;
})
)
)
);
// the representation of each label node -- nothing shows on a Marriage Link
myDiagram.nodeTemplateMap.add("LinkLabel",
$(go.Node, {
selectable: false,
width: 1,
height: 1,
fromEndSegmentLength: 20
})
);
// for parent-child relationships
myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
curviness: 15,
layerName: "Background",
selectable: false,
fromSpot: go.Spot.Bottom,
toSpot: go.Spot.Top
},
$(go.Shape, {
strokeWidth: 2
})
);
// for marriage relationships
myDiagram.linkTemplateMap.add("Marriage",
$(go.Link, {
selectable: false
},
$(go.Shape, {
strokeWidth: 2,
stroke: "blue"
})
));
setupDiagram(myDiagram, [{
key: 0,
name: "陳俊德",
birthday: '2000-01-01',
gender: "M",
father: -10,
//mother: -11,
wife: 1,
title: '本人'
},
{
key: 1,
name: "Alice",
birthday: '2000-01-01',
gender: "F",
father: -12,
mother: -13,
title: '妻子'
},
{
key: 2,
name: "陳中啟",
birthday: '2000-01-01',
gender: "M",
father: 1,
mother: 0,
wife: 3,
title: '兒子'
},
{
key: 3,
name: "Barbara",
birthday: '2000-01-01',
gender: "F"
},
{
key: 4,
name: "陳凱諭",
birthday: '2000-01-01',
gender: "M",
father: 1,
mother: 0,
wife: 5,
title: '兒子'
},
{
key: 5,
name: "Brooke",
birthday: '2000-01-01',
gender: "F",
title: '兒媳'
},
// {
// key: 6,
// name: "陳伊菁",
// birthday: '2000-01-01',
// gender: "F",
// father: 1,
// mother: 0,
// title: '女兒'
// },
{
key: 7,
name: "陳芝慧",
birthday: '2000-01-01',
gender: "F",
father: 1,
mother: 0,
title: '女兒'
},
{
key: 8,
name: "陳潔音",
birthday: '2000-01-01',
gender: "F",
father: 1,
mother: 0,
husband: 9,
title: '女兒'
},
{
key: 9,
name: "Chris",
birthday: '2000-01-01',
gender: "M",
title: '女婿'
},
{
key: 10,
name: "Ellie",
birthday: '2000-01-01',
gender: "F",
father: 3,
mother: 2
},
{
key: 11,
name: "Dan",
birthday: '2000-01-01',
gender: "M",
father: 3,
mother: 2
},
{
key: 12,
name: "Elizabeth",
birthday: '2000-01-01',
gender: "F",
husband: 13
},
{
key: 13,
name: "David",
birthday: '2000-01-01',
gender: "M",
father: 5,
mother: 4
},
{
key: 14,
name: "Emma",
birthday: '2000-01-01',
gender: "F",
father: 5,
mother: 4
},
{
key: 15,
name: "Evan",
birthday: '2000-01-01',
gender: "M",
father: 8,
mother: 9
},
{
key: 16,
name: "Ethan",
birthday: '2000-01-01',
gender: "M",
father: 8,
mother: 9
},
{
key: 17,
name: "Eve",
birthday: '2000-01-01',
gender: "F",
husband: 16
},
{
key: 18,
name: "Emily",
birthday: '2000-01-01',
gender: "F",
father: 8,
mother: 9
},
{
key: 19,
name: "Fred",
birthday: '2000-01-01',
gender: "M",
father: 17,
mother: 16
},
{
key: 20,
name: "Faith",
birthday: '2000-01-01',
gender: "F",
father: 17,
mother: 16
},
{
key: 21,
name: "Felicia",
birthday: '2000-01-01',
gender: "F",
father: 12,
mother: 13
},
{
key: 22,
name: "Frank",
birthday: '2000-01-01',
gender: "M",
father: 12,
mother: 13
},
{
key: 10000,
name: "aaaaaaaa1",
birthday: '2000-01-01',
gender: "M",
// father: 12,
// mother: 13
},
{
key: 10001,
name: "aaaaaaaa2",
birthday: '2000-01-01',
gender: "M",
// father: 12,
// mother: 13
},
{
key: 10002,
name: "aaaaaaaa3",
birthday: '2000-01-01',
gender: "M",
// father: 12,
// mother: 13
},
{
key: 10003,
name: "aaaaaaaa4",
birthday: '2000-01-01',
gender: "M",
// father: 12,
// mother: 13
},
{
key: 10004,
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0