js画图开发库--mxgraph--[orgchart-组织结构图.html]

chwshuang

浏览: 759956 次
性别:
来自: 北京

最近访客更多访客>>

wangchunheme

amateurlee

smallInt

liudongyang123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

mxgraph

js画图开发库 mxgraph orgchart 组织结构图.html]

js画图开发库--mxgraph--[orgchart-组织结构图.html]

组织结构图：移动，添加，修改，删除，右键下拉菜单功能。

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>监控台</title>

	<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- 引入支持库文件 -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>
	<!-- 示例代码 -->
	<script type="text/javascript">
		// 使阴影变亮
		mxConstants.SHADOWCOLOR = '#C0C0C0';
		
		//  程序在此方法中启动 
		function main()
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 解决IE不兼容的样式
				var container = document.createElement('div');
				container.style.position = 'absolute';
				container.style.overflow = 'hidden';
				container.style.left = '0px';
				container.style.top = '0px';
				container.style.right = '0px';
				container.style.bottom = '0px';

				var outline = document.getElementById('outlineContainer');

				mxEvent.disableContextMenu(container);

				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(container);
					new mxDivResizer(outline);
				}

				// 设置渐变的背景
			    if (mxClient.IS_GC || mxClient.IS_SF)
			    {
			    	container.style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
			    }
			    else if (mxClient.IS_NS)
			    {
			    	container.style.background = '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';  
			    }
			    else if (mxClient.IS_IE)
			    {
			    	container.style.filter = 'progid:DXImageTransform.Microsoft.Gradient('+
			                'StartColorStr=\'#FFFFFF\', EndColorStr=\'#E7E7E7\', GradientType=0)';
			    }

				document.body.appendChild(container);

				// 在容器中创建图形
				var graph = new mxGraph(container);
				
				// 元素是否移动
				graph.setCellsMovable(false);
				// 元素大小自动变化
				graph.setAutoSizeCells(true);
				graph.setPanning(true);
				graph.panningHandler.useLeftButtonForPanning = true;

				// 右键点击元素时显示下拉菜单 
				// 右键点击非元素的背景时显示另外一种菜单
				graph.panningHandler.selectOnPopup = false;

				// 创建大纲
				var outln = new mxOutline(graph, outline);
				
				//在触摸屏设备上禁用工具提示
				graph.setTooltips(!mxClient.IS_TOUCH);
				// Set some stylesheet options for the visual appearance of vertices
				var style = graph.getStylesheet().getDefaultVertexStyle();
				style[mxConstants.STYLE_SHAPE] = 'label';
				
				style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
				style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
				style[mxConstants.STYLE_SPACING_LEFT] = 54;
				
				style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
				style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
				style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
				
				style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
				style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
				style[mxConstants.STYLE_FONTSIZE] = '12';
				style[mxConstants.STYLE_FONTSTYLE] = '1';
				
				style[mxConstants.STYLE_SHADOW] = '1';
				style[mxConstants.STYLE_ROUNDED] = '1';
				style[mxConstants.STYLE_GLASS] = '1';
				
				style[mxConstants.STYLE_IMAGE] = 'editors/images/dude3.png';
				style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
				style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
				style[mxConstants.STYLE_SPACING] = 8;

				// 修改默认连接线样式
				style = graph.getStylesheet().getDefaultEdgeStyle();
				style[mxConstants.STYLE_ROUNDED] = true;
				style[mxConstants.STYLE_STROKEWIDTH] = 3;
				style[mxConstants.STYLE_EXIT_X] = 0.5; // center
				style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
				style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
				style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
				style[mxConstants.STYLE_ENTRY_Y] = 0; // top
				style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
				
				// 禁用以下几个为直线
				style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

				// 按回车或者返回键是停止编辑 
				var keyHandler = new mxKeyHandler(graph);

				// 启用布局中的子元素随父元素个更新、修改、生成而变化
				var layout = new mxCompactTreeLayout(graph, false);
				layout.useBoundingBox = false;
				layout.edgeRouting = false;
				layout.levelDistance = 60;
				layout.nodeDistance = 16;

				// 启用元素向下移动
				layout.isVertexMovable = function(cell)
				{
					return true;
				};

				var layoutMgr = new mxLayoutManager(graph);

				layoutMgr.getLayout = function(cell)
				{
					if (cell.getChildCount() > 0)
					{
						return layout;
					}
				};

				// 创建右键下拉菜单
				graph.panningHandler.factoryMethod = function(menu, cell, evt)
				{
					return createPopupMenu(graph, menu, cell, evt);
				};

				// 修正首选大小的错误
				var oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
				graph.getPreferredSizeForCell = function(cell)
				{
					var result = oldGetPreferredSizeForCell.apply(this, arguments);

					if (result != null)
					{
						result.width = Math.max(120, result.width - 40);
					}

					return result;
				};

				// 创建默认窗体
				var parent = graph.getDefaultParent();

				// 开启更新事务
				graph.getModel().beginUpdate();
				try
				{
					var w = graph.container.offsetWidth;
					var v1 = graph.insertVertex(parent, 'treeRoot',
						'Organization', w/2 - 30, 20, 140, 60, 'image=editors/images/house.png');
					graph.updateCellSize(v1);
					addOverlays(graph, v1, false);
				}
				finally
				{
					// 结束事务更新
					graph.getModel().endUpdate();
				}

				var content = document.createElement('div');
				content.style.padding = '4px';

				var tb = new mxToolbar(content);

				tb.addItem('Zoom In', 'images/zoom_in32.png',function(evt)
				{
					graph.zoomIn();
				});

				tb.addItem('Zoom Out', 'images/zoom_out32.png',function(evt)
				{
					graph.zoomOut();
				});
				
				tb.addItem('Actual Size', 'images/view_1_132.png',function(evt)
				{
					graph.zoomActual();
				});

				tb.addItem('Print', 'images/print32.png',function(evt)
				{
					var preview = new mxPrintPreview(graph, 1);
					preview.open();
				});

				tb.addItem('Poster Print', 'images/press32.png',function(evt)
				{
					var pageCount = mxUtils.prompt('Enter maximum page count', '1');

					if (pageCount != null)
					{
						var scale = mxUtils.getScaleForPageCount(pageCount, graph);
						var preview = new mxPrintPreview(graph, scale);
						preview.open();
					}
				});

				wnd = new mxWindow('Tools', content, 0, 0, 200, 66, false);
				wnd.setMaximizable(false);
				wnd.setScrollable(false);
				wnd.setResizable(false);
				wnd.setVisible(true);
			}
		};

// 创建右键点击菜单
function createPopupMenu(graph, menu, cell, evt)
{
	var model = graph.getModel();

	if (cell != null)
	{
		if (model.isVertex(cell))
		{
			menu.addItem('Add child', 'editors/images/overlays/check.png', function()
			{
				addChild(graph, cell);
			});
		}

		menu.addItem('Edit label', 'editors/images/text.gif', function()
		{
			graph.startEditingAtCell(cell);
		});

		if (cell.id != 'treeRoot' &&
			model.isVertex(cell))
		{
			menu.addItem('Delete', 'editors/images/delete.gif', function()
			{
				deleteSubtree(graph, cell);
			});
		}

		menu.addSeparator();
	}

	menu.addItem('Fit', 'editors/images/zoom.gif', function()
	{
		graph.fit();
	});

	menu.addItem('Actual', 'editors/images/zoomactual.gif', function()
	{
		graph.zoomActual();
	});

	menu.addSeparator();

	menu.addItem('Print', 'editors/images/print.gif', function()
	{
		var preview = new mxPrintPreview(graph, 1);
		preview.open();
	});

	menu.addItem('Poster Print', 'editors/images/print.gif', function()
	{
		var pageCount = mxUtils.prompt('Enter maximum page count', '1');

		if (pageCount != null)
		{
			var scale = mxUtils.getScaleForPageCount(pageCount, graph);
			var preview = new mxPrintPreview(graph, scale);
			preview.open();
		}
	});
};
// 添加元素右上角的删除图标
function addOverlays(graph, cell, addDeleteIcon)
{
	var overlay = new mxCellOverlay(new mxImage('images/add.png', 24, 24), 'Add child');
	overlay.cursor = 'hand';
	overlay.align = mxConstants.ALIGN_CENTER;
	overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
	{
		addChild(graph, cell);
	}));
	
	graph.addCellOverlay(cell, overlay);

	if (addDeleteIcon)
	{
		overlay = new mxCellOverlay(new mxImage('images/close.png', 30, 30), 'Delete');
		overlay.cursor = 'hand';
		overlay.offset = new mxPoint(-4, 8);
		overlay.align = mxConstants.ALIGN_RIGHT;
		overlay.verticalAlign = mxConstants.ALIGN_TOP;
		overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
		{
			deleteSubtree(graph, cell);
		}));
	
		graph.addCellOverlay(cell, overlay);
	}
};
// 添加子元素
function addChild(graph, cell)
{
	var model = graph.getModel();
	var parent = graph.getDefaultParent();
	var vertex;

	model.beginUpdate();
	try
	{
		vertex = graph.insertVertex(parent, null, 'Double click to set name');
		var geometry = model.getGeometry(vertex);

		// Updates the geometry of the vertex with the
		// preferred size computed in the graph
		var size = graph.getPreferredSizeForCell(vertex);
		geometry.width = size.width;
		geometry.height = size.height;

		// Adds the edge between the existing cell
		// and the new vertex and executes the
		// automatic layout on the parent
		var edge = graph.insertEdge(parent, null, '', cell, vertex);

		// Configures the edge label "in-place" to reside
		// at the end of the edge (x = 1) and with an offset
		// of 20 pixels in negative, vertical direction.
		edge.geometry.x = 1;
		edge.geometry.y = 0;
		edge.geometry.offset = new mxPoint(0, -20);

		addOverlays(graph, vertex, true);
	}
	finally
	{
		model.endUpdate();
	}
	
	return vertex;
};
// 删除树中的子元素
function deleteSubtree(graph, cell)
{
	// Gets the subtree from cell downwards
	var cells = [];
	graph.traverse(cell, true, function(vertex)
	{
		cells.push(vertex);
		
		return true;
	});

	graph.removeCells(cells);
};
	</script>
</head>

<!-- 页面载入时启动程序 -->
<body onload="main();">

	<!-- 创建带轮廓的容器 -->
	<div id="outlineContainer"
		style="z-index:1;position:absolute;overflow:hidden;top:0px;right:0px;width:160px;height:120px;background:transparent;border-style:solid;border-color:lightgray;">
	</div>
	
</body>
</html>

查看图片附件

分享到：

js画图开发库--mxgraph--[offpage-关闭页 ... | js画图开发库--mxgraph--[orthogonal-正 ...

2013-03-09 21:45
浏览 11528
评论(4)
分类:Web前端
查看更多

4 楼 az12xc34 2015-05-20

谢谢，省了我很多的工作时间。

3 楼 guyezi123 2014-06-26

今天我查orgchart的时候看到您的帖子，非常惊奇。我也想过这方面的功能，无一例外，都不能很好的实现，兴奋异常的copy下来，发现并不能实现所看到的图样，看到少了一些js和图片，。。。。内心非常复杂，不知道您能不能及时看到我的留言，如果看到了并且可以发一些demo给我，我将非常感谢。email:guyezi123@163.com

2 楼 chwshuang 2013-11-06

xchsh12345 写道

我在orgchart.html上添加了一个收缩的方法(toggleSubtree)就是单击父节点,隐藏子节点;再点击,就展开;

问题是:orgchart.html页面加载的时候这个树就是完全展开的,如何让他加载后默认是收缩的状态呢
lz了解这个问题吗

不知道。现在在做后台开发，这方面的都淡化了。

1 楼 xchsh12345 2013-10-11

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论