在组织结构图中完全缩小后,“放大”功能无效。 不确定是否有任何css阻止放大功能。 是否可以在getorgchart中调试此功能。所有javascript和css文件都已添加并添加,如下所示。获取到组织结构图的数据是通过ajax调用完成的。
function org_chart() {
$.ajax({
type: "post",
datatype: "json",
url: 'getOrgChartData',
data: {
'Id': Id
},
success: function(data) {
var datasource = data.List;
getOrgChart.themes.Theme1 = {
size: [470, 80],
toolbarHeight: 0,
textPoints: [{
x: 225,
y: 50,
width: 450
}, {
x: 225,
y: 80,
width: 450
}],
textPointsNoImage: [{
x: 225,
y: 50,
width: 450
}, {
x: 225,
y: 80,
width: 450
}],
expandCollapseBtnRadius: 20,
box: '<rect x="0" y="0" height="80" width="470" rx="10" ry="10" />',
text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>'
};
var orgChart = new getOrgChart(document.getElementById("org-container"), {
theme: "Theme1",
idField: "id",
parentIdField: "parent_id",
primaryFields: ["name"],
photoFields: ["icon"],
gridView: true,
linkType: "M",
dataSource: datasource,
enableGridView: false,
enableZoom: true,
enableEdit: false,
enableSearch: true,
enableMove: true,
enableDetailsView: false,
enablePrint: false,
enableZoomOnNodeDoubleClick: true,
enableExportToImage: false,
expandToLevel: 2,
scale: 0.5,
layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
clickNodeEvent: function(sender, args) {
var id = args.node.id;
var nodes = sender.nodes;
var selectedKey = args.node.data.key;
$.each(nodes, function(idx, node) {
var nodeId = node.data.key;
console.log(nodeId, selectedKey);
var fillOpacity = selectedKey.indexOf(nodeId) == 0 ? "1" : "0.4";
$('#org-container g[data-node-id = "' + node.id + '"] > rect').css({
'fill-opacity': fillOpacity,
'stroke-width': '5',
'stroke-dasharray': '0'
});
});
$('#org-container g[data-node-id = "' + id + '"] > rect').css({
'fill-opacity': '1',
'stroke-width': '10',
'stroke-dasharray': '20,5',
'animation': 'dash 1s infinite linear'
});
}
});
}
});
}
&#13;
<link href="../css/jquery.multiselect.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="../css/jstree-3.2.1.style.css" />
<link rel="stylesheet" type="text/css" href="../css/getorgchart.css" />
<script type="text/javascript" src="../js/jquery-1.12.4-min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.11.2.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.3.0.min.js"></script>
<script src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/jquery.multiselect.js"></script>
<script type="text/javascript" src="../js/d3.v5.min.js"></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jstree-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/getorgchart.js"></script>
&#13;