放大功能在getOrgChart中不起作用

时间:2018-06-19 06:31:48

标签: getorgchart

在组织结构图中完全缩小后,“放大”功能无效。 不确定是否有任何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;
&#13;
&#13;

0 个答案:

没有答案