js画图--mxgraph--codec.html 编辑框

最新推荐文章于 2024-04-27 05:36:48 发布

iteye_17920

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript HTML 学习笔记文章标签： js画图 mxgraph codec.html 编辑框

本文链接：https://blog.youkuaiyun.com/iteye_17920/article/details/82478433

学习笔记同时被 3 个专栏收录

42 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏


 


<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>Editing example for mxGraph</title>
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>
	<!-- 引入支持库文件 -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>
	<!-- 示例代码 -->
	<script type="text/javascript">
		// 程序在此方法中启动
		function main(container)
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported()) {
				mxUtils.error('浏览器不支持!', 200, false);
			} else {
				// 在对象中创建图形
				var graph = new mxGraph(container);
				graph.setHtmlLabels(true);
				
				// 在图形对象中添加按键监听
				var keyHandler = new mxKeyHandler(graph);
				// 鼠标事件触发，返回选中对象字段名称
				var getFieldnameForEvent = function(cell, evt) {
					if (evt != null) {
						// 获得事件在元素内的坐标 
						var point = mxUtils.convertPoint(graph.container,
								evt.clientX, evt.clientY);
						var state = graph.getView().getState(cell);
						
						if (state != null)
						{
							point.x -= state.x;
							point.y -= state.y;
							
							// 判断事件坐标位置
							//if (point.y > state.height / 3)
							if (point.y > state.height / 3) {
								if(point.y > ((state.height / 3)*2)){
									return 'three';
								}
								return 'second';
							}
						}
					}
					return 'first';
				};
				
				// 返回含有上下内容的表格
				graph.getLabel = function(cell) {
					var table = document.createElement('table');
					table.style.height = '100%';
					table.style.width = '100%';
					
					var body = document.createElement('tbody');
					var tr1 = document.createElement('tr');
					var td1 = document.createElement('td');
					td1.style.fontSize = '12px';
					mxUtils.write(td1, cell.value.first);
					
					var tr2 = document.createElement('tr');
					var td2 = document.createElement('td');
					td2.style.fontSize = '12px';
					mxUtils.write(td2, cell.value.second);
					
					var tr3 = document.createElement('tr');
					var td3 = document.createElement('td');
					td3.style.fontSize = '12px';
					mxUtils.write(td3, cell.value.three);
					
					tr1.appendChild(td1);
					tr2.appendChild(td2);
					tr3.appendChild(td3);
					body.appendChild(tr1);
					body.appendChild(tr2);
					body.appendChild(tr3);
					table.appendChild(body);
					
					return table;
				};
				 
				// 返回要编辑的内容
				graph.getEditingValue = function(cell, evt) {
					evt.fieldname = getFieldnameForEvent(cell, evt);
					return cell.value[evt.fieldname] || '';
				};
								
				// 标签内容改变时触发元素内值更新
				graph.labelChanged = function(cell, newValue, trigger) {
					var name = (trigger != null) ? trigger.fieldname : null;
					if (name != null) {
						// Clones the user object for correct undo and puts
						// the new value in the correct field.
						var value = mxUtils.clone(cell.value);
						value[name] = newValue;
						newValue = value;
						
						mxGraph.prototype.labelChanged.apply(this, arguments);
					}
				};
				
				// 给示例对象赋值
				var value = new Object();
				value.first = '上部内容';
				value.second = '中部内容';
				value.three = '下部内容'; 
				
				// 获得默认元对象
				var parent = graph.getDefaultParent();
								
				// 在图形中添加元对象
				//开启事务
				graph.getModel().beginUpdate();
				try {
					var v1 = graph.insertVertex(parent, null, value, 100, 60, 120, 80, 'overflow=fill;');
				}
				finally
				{
					// 结束事务
					graph.getModel().endUpdate();
				}
			}
		};
	</script>
</head>

<!-- 页面载入时启动程序 -->
<body οnlοad="main(document.getElementById('graphContainer'))">
	<p>
	 双击上(下)一半的单元格的编辑不同领域的对象。
	</p>
	<!-- 创建一个带网格背景的容器 -->
	<div id="graphContainer"
		style="overflow:hidden;position:relative;width:321px;height:241px;background:url('../examples/editors/images/grid.gif')">
	</div>
</body>
</html>

特别要注意的是div id='graphContainer'这个容器背景url地址的写法要引用正确。