254 строки
11 KiB
HTML
254 строки
11 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Essential JS 1 : Multiple Parent</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||
|
|
<script src="../scripts/ej.web.all.min.js"></script>
|
||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||
|
|
<script src="../scripts/jsrender.min.js"></script>
|
||
|
|
<script src="../scripts/diagramscripts/diagramcommon.js"></script>
|
||
|
|
<style>
|
||
|
|
#resizeBorder {
|
||
|
|
stroke: black;
|
||
|
|
stroke-width: 3px;
|
||
|
|
stroke-dasharray: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#nw-resize, #n-resize, #ne-resize, #w-resize, #e-resize, #sw-resize, #s-resize, #se-resize {
|
||
|
|
fill: none;
|
||
|
|
stroke: transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="content-container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="cols-sample-area">
|
||
|
|
<div id="diagram"></div>
|
||
|
|
</div>
|
||
|
|
<div id="Propertiespanel">
|
||
|
|
<div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<b>Layout Settings</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 aligntop" style="margin-right:-25px;">
|
||
|
|
Orientation
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input type="text" id="orientation" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 aligntop" style="margin-right:-25px;">
|
||
|
|
Margin X
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input type="text" id="marginX" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 aligntop" style="margin-right:-25px;">
|
||
|
|
Margin Y
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input type="text" id="marginY" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<b>Spacing</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 aligntop" style="margin-right:-25px;">
|
||
|
|
Horizontal
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input type="text" id="horizontalSpacing" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 aligntop" style="margin-right:-25px;">
|
||
|
|
Vertical
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input type="text" id="verticalSpacing" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="list">
|
||
|
|
<ul>
|
||
|
|
<li value="toptobottom">Top-Bottom</li>
|
||
|
|
<li value="lefttoright">Left-Right</li>
|
||
|
|
<li value="righttoleft">Right-Left</li>
|
||
|
|
<li value="bottomtotop">Bottom-Top</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
//region Initialize controls
|
||
|
|
|
||
|
|
//Diagram Control
|
||
|
|
|
||
|
|
var data = [
|
||
|
|
{ "Name": "node11", "fillColor": "#ff6329" },
|
||
|
|
{ "Name": "node12", "ReportingPerson": ["node114"], "fillColor": "#669be5" },
|
||
|
|
{ "Name": "node13", "ReportingPerson": ["node12"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node14", "ReportingPerson": ["node12"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node15", "ReportingPerson": ["node12"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node16", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||
|
|
{ "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"], "fillColor": "#ff9400" },
|
||
|
|
{ "Name": "node18", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||
|
|
{ "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node21", "fillColor": "#ff6329" },
|
||
|
|
{ "Name": "node22", "ReportingPerson": ["node114"], "fillColor": "#669be5" },
|
||
|
|
{ "Name": "node23", "ReportingPerson": ["node22"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node24", "ReportingPerson": ["node22"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node25", "ReportingPerson": ["node22"], "fillColor": "#30ab5c" },
|
||
|
|
{ "Name": "node26", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||
|
|
{ "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"], "fillColor": "#ff9400" },
|
||
|
|
{ "Name": "node28", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||
|
|
{ "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"], "fillColor": "#99bb55" },
|
||
|
|
{ "Name": "node31", "fillColor": "#ff6329" },
|
||
|
|
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"], "fillColor": "#941100" },
|
||
|
|
{ "Name": "node116", "ReportingPerson": ["node12", "node22"], "fillColor": "#30ab5c" },
|
||
|
|
];
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
//Initializes diagram control
|
||
|
|
$("#diagram").ejDiagram(
|
||
|
|
{
|
||
|
|
height: "550px", width: "100%",
|
||
|
|
tool: ej.datavisualization.Diagram.Tool.SingleSelect,
|
||
|
|
layout: { type: "hierarchicaltree", horizontalSpacing: 40, verticalSpacing: 40, marginX: 0, marginY: 0 },
|
||
|
|
defaultSettings: {
|
||
|
|
node: {
|
||
|
|
constraints: ej.datavisualization.Diagram.NodeConstraints.Select | ej.datavisualization.Diagram.NodeConstraints.PointerEvents, fillColor: "#88C65C",
|
||
|
|
width: 40, height: 40, borderColor: "#5e5e5e", borderWidth: 1,
|
||
|
|
cornerRadius: 7,
|
||
|
|
},
|
||
|
|
connector: {
|
||
|
|
lineColor: "#000000", constraints: ej.datavisualization.Diagram.ConnectorConstraints.None,
|
||
|
|
segments: [{ type: "orthogonal" }], targetDecorator: { width: 5, height: 5 },
|
||
|
|
cornerRadius: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectedItems: { constraints: ~ej.datavisualization.Diagram.SelectorConstraints.Rotator },
|
||
|
|
selectionChange: "selectionChanged",
|
||
|
|
dataSourceSettings: { id: "Name", parent: "ReportingPerson", dataSource: data },
|
||
|
|
pageSettings: { scrollLimit: "diagram" },
|
||
|
|
snapSettings: { snapConstraints: ej.datavisualization.Diagram.SnapConstraints.None }
|
||
|
|
});
|
||
|
|
$("#diagram").ejDiagram("instance").fitToPage();
|
||
|
|
|
||
|
|
$("#Propertiespanel").ejPropertiesPanel();
|
||
|
|
|
||
|
|
//Drop down to change the orientation
|
||
|
|
$("#orientation").ejDropDownList({
|
||
|
|
watermarkText: "Orientation",
|
||
|
|
text: "Top-Bottom",
|
||
|
|
targetID: "list",
|
||
|
|
width: "130px",
|
||
|
|
"change": function (args) {
|
||
|
|
$("#diagram").ejDiagram({
|
||
|
|
layout: {
|
||
|
|
orientation: args.value,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$("#diagram").ejDiagram("instance").fitToPage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//Numeric text box to change the horizontal spacing
|
||
|
|
$("#horizontalSpacing").ejNumericTextbox(
|
||
|
|
{
|
||
|
|
watermarkText: "Horizontal Spacing",
|
||
|
|
value: 40,
|
||
|
|
minValue: 1,
|
||
|
|
maxValue: 10000,
|
||
|
|
width: "130px",
|
||
|
|
"change": function (args) {
|
||
|
|
$("#diagram").ejDiagram({
|
||
|
|
layout: {
|
||
|
|
horizontalSpacing: args.value
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//Numeric text box to change the vertical spacing
|
||
|
|
$("#verticalSpacing").ejNumericTextbox(
|
||
|
|
{
|
||
|
|
watermarkText: "Vertical Spacing",
|
||
|
|
value: 40,
|
||
|
|
minValue: 1,
|
||
|
|
maxValue: 10000,
|
||
|
|
width: "130px",
|
||
|
|
"change": function (args) {
|
||
|
|
$("#diagram").ejDiagram({
|
||
|
|
layout: {
|
||
|
|
verticalSpacing: args.value
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//Numeric text box to change the margin x
|
||
|
|
$("#marginX").ejNumericTextbox(
|
||
|
|
{
|
||
|
|
watermarkText: "Margin X",
|
||
|
|
value: 0,
|
||
|
|
minValue: -160,
|
||
|
|
maxValue: 10000,
|
||
|
|
width: "130px",
|
||
|
|
"change": function (args) {
|
||
|
|
$("#diagram").ejDiagram({
|
||
|
|
layout: {
|
||
|
|
marginX: args.value
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//Numeric text box to change the margin y
|
||
|
|
$("#marginY").ejNumericTextbox(
|
||
|
|
{
|
||
|
|
watermarkText: "Margin Y",
|
||
|
|
value: 0,
|
||
|
|
minValue: 0,
|
||
|
|
maxValue: 10000,
|
||
|
|
width: "130px",
|
||
|
|
"change": function (args) {
|
||
|
|
$("#diagram").ejDiagram({
|
||
|
|
layout: {
|
||
|
|
marginY: args.value
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|