您如何影响层次结构 Kendo UI 图中连接器的位置
How do you influence position of connectors in a heirarchical Kendo UI Diagram
我正在使用 Kendo UI's diagramming component
构建组织结构图
我不希望用户能够编辑图表,因为它是他们之前输入的位置的只读表示,但我确实希望以特定方式显示图表。
我使用的布局类型是 tree
,子类型是 down
。我正在使用 HeirarchicalDataSource
作为 dataSource
图表的默认绘制方式如下所示:
然而,我的老板需要它看起来像这样:
因此父节点的所有子节点都来自底部连接器。
我看不出有什么办法可以通过编程来影响它。请帮忙。
关闭编辑很容易,只需传递给您的选项即可 editable: false
。要使布局与您发布的布局相似,请使用两个变量:horizontalSeparation
、verticalSeparation
在 layout
下
http://dojo.telerik.com/uNOVa/2
function createDiagram() {
$("#diagram").kendoDiagram({
editable: false,
dataSource: {
data: diagramNodes(),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 60,
verticalSeparation: 40
},
shapeDefaults: {
width: 40,
height: 40
}
});
}
function diagramNodes() {
var root = { name: "0", items: [] };
addNodes(root, [3, 2, 2]);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
$(document).ready(function() {
$("#subtype").change(function() {
$("#diagram").getKendoDiagram().layout({
subtype: $(this).val(),
type: "tree",
horizontalSeparation: 30,
verticalSeparation: 20
});
});
});
$(document).ready(createDiagram);
$(document).bind("kendo:skinChange", createDiagram);
还有另一种类型的渲染连接:
connectionDefaults: {
type: "polyline"
}
您可以在这里查看:http://dojo.telerik.com/uNOVa/3
您还可以修复与阵列的连接:
connections
一个例子在这里:
example
我正在使用 Kendo UI's diagramming component
构建组织结构图我不希望用户能够编辑图表,因为它是他们之前输入的位置的只读表示,但我确实希望以特定方式显示图表。
我使用的布局类型是 tree
,子类型是 down
。我正在使用 HeirarchicalDataSource
作为 dataSource
图表的默认绘制方式如下所示:
然而,我的老板需要它看起来像这样:
因此父节点的所有子节点都来自底部连接器。
我看不出有什么办法可以通过编程来影响它。请帮忙。
关闭编辑很容易,只需传递给您的选项即可 editable: false
。要使布局与您发布的布局相似,请使用两个变量:horizontalSeparation
、verticalSeparation
在 layout
http://dojo.telerik.com/uNOVa/2
function createDiagram() {
$("#diagram").kendoDiagram({
editable: false,
dataSource: {
data: diagramNodes(),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 60,
verticalSeparation: 40
},
shapeDefaults: {
width: 40,
height: 40
}
});
}
function diagramNodes() {
var root = { name: "0", items: [] };
addNodes(root, [3, 2, 2]);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
$(document).ready(function() {
$("#subtype").change(function() {
$("#diagram").getKendoDiagram().layout({
subtype: $(this).val(),
type: "tree",
horizontalSeparation: 30,
verticalSeparation: 20
});
});
});
$(document).ready(createDiagram);
$(document).bind("kendo:skinChange", createDiagram);
还有另一种类型的渲染连接:
connectionDefaults: {
type: "polyline"
}
您可以在这里查看:http://dojo.telerik.com/uNOVa/3
您还可以修复与阵列的连接: connections 一个例子在这里: example