`

js画图开发库--mxgraph--[tree-树形结构图.html]

js画图开发库mxgraphtree树形结构图 
阅读更多

 js画图开发库--mxgraph--[tree-树形结构图.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">
		/*
			定义一个树节点
		*/
		function TreeNodeShape() { };

		TreeNodeShape.prototype = new mxCylinder();
		TreeNodeShape.prototype.constructor = TreeNodeShape;

		// 定义的上边缘部分的长度。
		TreeNodeShape.prototype.segment = 20;

		// 根据状态显示元素
		TreeNodeShape.prototype.apply = function(state)
		{
			mxCylinder.prototype.apply.apply(this, arguments);
			this.state = state;
		};
		
		TreeNodeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
		{
			var graph = this.state.view.graph;
			var hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
			
			if (isForeground)
			{
				if (hasChildren)
				{
					// 这里使用的是元素范围外边距
					path.moveTo(w / 2, h + this.segment);
					path.lineTo(w / 2, h);
					path.end();
				}	
			}
			else
			{
				path.moveTo(0, 0);
				path.lineTo(w, 0);
				path.lineTo(w, h);
				path.lineTo(0, h);
				path.close();
			}
		};
		
		mxCellRenderer.prototype.defaultShapes['treenode'] = TreeNodeShape;

		// 自定义元素边框 
		mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source)
		{
			var pt = null;
			
			if (source)
			{
				pt = new mxPoint(start.x + start.width / 2,
						start.y + start.height + TreeNodeShape.prototype.segment);
			}
			else
			{
				pt = new mxPoint(start.x + start.width / 2, start.y);
			}

			edge.setAbsoluteTerminalPoint(pt, source);
		};
	</script>

	<!-- 实例代码 -->
	<script type="text/javascript">
		// 程序在此方法中启动 
		function main()
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 定义新图标
				mxGraph.prototype.collapsedImage = new mxImage(mxClient.imageBasePath + '/collapsed.gif', 9, 9);
				mxGraph.prototype.expandedImage = new mxImage(mxClient.imageBasePath + '/expanded.gif', 9, 9);
				
				// 解决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';
				
				if (mxClient.IS_IE)
				{
					new mxDivResizer(container);
				}
				
				document.body.appendChild(container);
			
				// 在容器中创建图形
				var graph = new mxGraph(container);

				// 修改默认样式
				var style = graph.getStylesheet().getDefaultVertexStyle();
				style[mxConstants.STYLE_SHAPE] = 'treenode';
				style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
				style[mxConstants.STYLE_SHADOW] = true;
				
				style = graph.getStylesheet().getDefaultEdgeStyle();
				style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
				style[mxConstants.STYLE_ROUNDED] = true;
				
				// 设置自动调整大小
				graph.setAutoSizeCells(true);
				graph.setPanning(true);
				graph.panningHandler.useLeftButtonForPanning = true;

				// 按下回车或者Tab 键停止编辑
				var keyHandler = new mxKeyHandler(graph);
				
				// 在树布局中添加子元素的更新、添加、删除监听程序
				var layout = new mxCompactTreeLayout(graph, false);
				layout.useBoundingBox = false;
				layout.edgeRouting = false;
				layout.levelDistance = 30;
				layout.nodeDistance = 10;

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

				// 禁用如何菜单操作
				graph.setCellsSelectable(false);

				// 定义折叠功能
				graph.isCellFoldable = function(cell)
				{
					return this.model.getOutgoingEdges(cell).length > 0;
				};

				// 定义折叠图标位置
				graph.cellRenderer.getControlBounds = function(state)
				{
					if (state.control != null)
					{
						var oldScale = state.control.scale;
						var w = state.control.bounds.width / oldScale;
						var h = state.control.bounds.height / oldScale;
						var s = state.view.scale;			

						return new mxRectangle(state.x + state.width / 2 - w / 2 * s,
							state.y + state.height + TreeNodeShape.prototype.segment * s - h / 2 * s,
							w * s, h * s);
					}
					
					return null;
				};

				// 覆写折叠函数
				graph.foldCells = function(collapse, recurse, cells)
				{
					this.model.beginUpdate();
					try
					{
						toggleSubtree(this, cells[0], !collapse);
						this.model.setCollapsed(cells[0], collapse);

						// 执行折叠操作
						layout.execute(graph.getDefaultParent());
					}
					finally
					{
						this.model.endUpdate();
					}
				};
				
				// 创建默认窗体
				var parent = graph.getDefaultParent();
								
				// 添加更新事务
				graph.getModel().beginUpdate();
				try
				{
					var w = graph.container.offsetWidth;
					var root = graph.insertVertex(parent, 'treeRoot', 'Root', w/2 - 30, 20, 60, 40);

					var v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', root, v1);
					
					var v2 = graph.insertVertex(parent, 'v2', 'Child 2', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', root, v2);

					var v3 = graph.insertVertex(parent, 'v3', 'Child 3', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', root, v3);
					
					var v11 = graph.insertVertex(parent, 'v11', 'Child 1.1', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v1, v11);
					
					var v12 = graph.insertVertex(parent, 'v12', 'Child 1.2', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v1, v12);
					
					var v21 = graph.insertVertex(parent, 'v21', 'Child 2.1', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v2, v21);
					
					var v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v2, v22);
					
					var v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v22, v221);
					
					var v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v22, v222);

					var v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);
					graph.insertEdge(parent, null, '', v3, v31);
				}
				finally
				{
					// 结束更新事务
					graph.getModel().endUpdate();
				}
			}
		};

		// 元素展开折叠遍历子元素
		function toggleSubtree(graph, cell, show)
		{
			show = (show != null) ? show : true;
			var cells = [];
			
			graph.traverse(cell, true, function(vertex)
			{
				if (vertex != cell)
				{
					cells.push(vertex);
				}

				// 停止递归，如果元素被删除
				return vertex == cell || !graph.isCellCollapsed(vertex);
			});

			graph.toggleCells(show, cells, true);
		};
	</script>
</head>

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

 

 

  • 大小: 7.9 KB
分享到：
| js画图开发库--mxgraph--[windows-窗口展 ...
评论
1 楼 cgx456 2014-04-25  
很感谢楼主，看了您几篇关于mxgraph的文章，正是我所需要的，再根据用户实际需求，最终完成了，所以，特意在这写下评论，以表感谢！
发表评论

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

相关推荐

    mxgraph.MXGRAPH..MXGRAPH..

    MXGRAPH通常指的是一个开源的JavaScript图形库，用于创建可交互的图表和流程图，但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息，我可以提供如下内容： MXGRAPH是一个强大的图形编辑框架，主要用于创建富...

    mxgraph开发包

    `mxGraph` 是一个强大的、可扩展的JavaScript图形库，主要用于创建交互式的图表和流程图。它由JGraph公司开发，支持Java和JavaScript环境，同时兼容HTML5。mxGraph的核心特性包括图形绘制、布局算法、事件处理和丰富...

    js画图框架--mxgraph--入门

    **JS画图框架——mxGraph 入门指南** 在网页应用中，图形界面设计和交互已经成为不可或缺的一部分。JavaScript，作为最广泛使用的客户端脚本语言，自然也提供了多种库和框架来实现这一目标。其中，mxGraph 是一个...

    mxGraph绘图软件js库（版本1.9.1.3,破解版）

    十分强大的js绘图工具，适用于设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。这是破解过的源js库。

    mxGraph：在HTML页面中制作流程图的JS插件

    mxGraph是一款强大的JavaScript库，专为在Web应用中创建交互式和可编辑的图形界面而设计，特别是用于绘制流程图、组织结构图、网络拓扑图等。它以其丰富的功能集、灵活性和高性能而在IT领域受到广泛欢迎。下面将详细...

    mxGraph开发入门指南.pdf

    它支持Web应用程序，允许用户在网页上动态创建和编辑图表，例如流程图、组织结构图、网络图等。mxGraph具有许多特性，包括跨浏览器兼容性、丰富的样式和格式选项、支持撤销和重做操作以及可以通过API进行程序化控制...

    mxGraph中文文档.md

    mxgraph.js中文文档是一个官方的api，翻译来源于sunflower(github: https://github.com/SunInfoFE)，提供给更多的开发者参考和共享源码资源！

    mxgraph editor

    **mxgraph Editor** 是一款基于JavaScript的开源图形编辑器，专为绘制流程图、工作流、拓扑图等图表设计。它使用了mxGraph库，一个功能强大的图形渲染和操作库，提供了丰富的图形编辑功能。 **mxGraph核心概念：** ...

    vue-mxgraph-example-master (2).zip

    mxGraph是一个功能强大的JavaScript库，用于创建可交互的图形编辑器，支持绘制流程图、网络拓扑图等各种图表。 首先，让我们深入了解Vue.js的核心概念。Vue采用组件化的开发方式，将UI拆分为可复用的模块，每个模块...

    mxGraph绘图插件

    mxGraph是一款强大的JavaScript图形库，主要用于创建交互式图表和图形应用程序。它提供了丰富的API和功能，使得开发者能够轻松地在Web浏览器中构建复杂的图形编辑器和流程图工具。这款库以其灵活性、性能和易用性...

    在线画图wwwdrawio网站的源码基于mxGraph开发

    2. **文件结构**：压缩包中的`jgraph-drawio-e6d99f2`目录包含了源码的各个模块，例如`src/js`存放JavaScript代码，`src/css`存储样式文件，`src/images`包含各种图形资源，`src/json`保存预设的图形模板。...

    mxGraph JS 绘图组件

    mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM 流 　程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 　javescript 写的前端程序,也包括多个和后端程序(java/C#等等)...

    mxGraph插件，java代码xml导出成图片

    在前端部分，mxGraph允许用户通过JavaScript代码动态构建图形，这些图形可以是流程图、组织结构图等。用户可以自定义节点、连接线以及它们的样式。绘制完成后，mxGraph能够将当前的图形状态序列化为XML格式，这方便...

    mxgraph-demo-源码.rar

    mxGraph 是一个强大的 JavaScript 图形库，它允许开发者在 Web 浏览器中创建和编辑图形界面。这个名为 "mxgraph-demo-源码" 的压缩包包含了 mxGraph 的示例源代码，为我们提供了一个深入理解 mxGraph 功能和实现原理...

    mxgraph.zip

    mxGraph是一款强大的JavaScript库，专用于创建交互式图形应用程序，如流程图、拓扑图和其他可视化图表。在本文中，我们将深入探讨mxgraph.js的核心功能、Node API的使用以及如何结合XML文件进行数据解析和图形展示。...

    基于mxGraph来做的一款web的绘制流程图的javascript库工具mxGraph_gpx.zip

    总结来说，mxGraph是一个功能强大的JavaScript库，适合开发Web上的流程图编辑工具。这个压缩包可能提供了一个基于mxGraph和Vue的实现案例，对于学习和理解如何在Web应用中整合和使用mxGraph是非常有价值的。通过深入...

    mxgraph-svg2shape：mxGraph SVG到Shape的转换工具

    mxgraph-svg2shape 一套将SVG文件转换为mxGraph资源的工具。 该存储库基于： SVG to XML mxGraph stencil definition translation tool. ... 添加 ：将XML mxGraph模具定义转换为一组相应JavaScript /

    mxgraph-1_10_4_0

    mxGraph是一个功能强大的JavaScript图形库，主要用于创建交互式图表、流程图、网络拓扑图等。其最新版本1_10_4_0提供了丰富的功能，不仅包括源代码，还附带了详尽的文档和示例，方便开发者快速理解和应用。 一、...

    huiger123-mxgraph-master.zip

    mxGraph是一款强大的JavaScript图形库，主要用于创建交互式和可自定义的图表、流程图和模型。这个开源项目，"huiger123-mxgraph-master.zip"，包含了mxGraph的源代码，允许开发者深入理解其内部工作原理并进行扩展。...

Magicbox
Global site tag (gtag.js) - Google Analytics