js画图开发库-mxgraph-[editing-编者内容(多段).html] _HTML/CSS

js画图开发库--mxgraph--[editing-编辑内容(多段).html]
?js画图开发库--mxgraph--[editing-编辑内容(多段).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 main(container)
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 在容器中创建图形
				var graph = new mxGraph(container);
				graph.setHtmlLabels(true);
				
				// 添加键盘监听处理程序
				var keyHandler = new mxKeyHandler(graph);
				
				// 根据鼠标点击位置返回内容
				var getFieldnameForEvent = function(cell, evt)
				{
					if (evt != null)
					{
						// Finds the relative coordinates inside the cell
						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;
							
							// Returns second if mouse in second half of cell
							if (point.y > state.height / 2)
							{
								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);
					
					tr1.appendChild(td1);
					tr2.appendChild(td2);
					body.appendChild(tr1);
					body.appendChild(tr2);
					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 = 'First value';
				value.second = 'Second value';
				
				// 在图形中创建默认组件 
				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 onload="main(document.getElementById('graphContainer'))">
	<p>
	  双击上/下一半的单元格的编辑不同区域的对象
	</p>
	<!-- 创建带网格壁纸和曲线的一个容器  -->
	<div id="graphContainer"
		style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif')">
	</div>
</body>
</html>