VML施用-利用ECOTree绘制树形结构图 _Web前端

VML应用-利用ECOTree绘制树形结构图

1、基本概念

VML的全称是Vector Markup Language(矢量可标记语言)，VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。具体内容可以上网搜索。

网址1：http://www.w3.org/TR/1998/NOTE-VML-19980513

2、利用VML实现树形结构图

通过后台数据库查询，查询销售流向。

3、自己动手绘制流程图

效果如图：

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<style type="text/css">
  v\:*{
  behavior:url(#default#VML);
  }
    
  v\:RoundRect{
  text-align:center;
  position:relative;
  }
    
  v\:TextBox{
  vertical-align:middle;
  font-size:13px;
  }
  </style>
</head>
<body>
<div class="grid" align="center">
<table class="gridbody" cellpadding="1" cellspacing="0" rules="all">
	<tr class="gridtitle">
		<td align="left" colspan="7">供货商所有关联销售信息查询</td>
	</tr>
	<tr class="griditem">
	<td>
<center>
<script>

	//第一层树结构
	var incv = new Array();
	incv[0] = "1";
	incv[1] = "IOS111052500018";
	incv[2] = "临沂新程金锣肉制品集团有限公司";

	//第二层树结构
	var dcv=new Array(); //定义一维数组    
	
	dcv[0]=new Array(); //将每一个子元素又定义为数组    
	dcv[0][0]='2';
	dcv[0][1]='5000100003';
	dcv[0][2]='华联超市经七超市金锣专柜';

	dcv[1]=new Array(); //将每一个子元素又定义为数组    
	dcv[1][0]='3';
	dcv[1][1]='5000100002';
	dcv[1][2]='华联超市世购超市金锣专柜';

	dcv[2]=new Array(); //将每一个子元素又定义为数组    
	dcv[2][0]='4';
	dcv[2][1]='5000100001';
	dcv[2][2]='华联超市嘉华超市金锣专柜';

	document.write(drawXX(incv,dcv)); 

	function drawXX(iobj,dobj){
		v1 = 20+40*(dobj.length-1);
		v2 = v1/2;
		v3 = v2 - 12;

		//alert("start -- ");
		var start = "<v:group coordsize='600,800' style='width:600px;height:800px;'>";
		var is="<v:RoundRect style='width:300px;height:28px;left:0px;top:"
			+     v3
			+    "px' align='center'>"
			+    "<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/><v:TextBox >"
			+     iobj[1] + "(" + iobj[2] + ")"
			+    "</a></v:TextBox></v:RoundRect>";
		var ls="";
		ls +="<v:line from='300," + v2 + "' to='340," + v2 + "' />"
		ls +="<v:line from='340,20' to='340," + v1 + "' />"

		var ds ="";
			for(var i=0;i<dobj.length;i++){
				ds +="<v:line from='340," + (20+i*40) + "' to='380," + (20+i*40) + "' />"
				ds +="<v:RoundRect style='width:280px;height:28px;left:380px;top:" + (8+i*40) + "px;' align='center'>"
				ds +="<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/>";
				ds +="<v:TextBox >" + dobj[i][1] +"("+ dobj[i][2] +")" + "</v:TextBox>";
				ds +="</v:RoundRect>";
			}

		var end = "</v:group>";

		var draws = start + is + ls + ds + end;

		return draws;
	}
</script>

</center>
</td>
</tr>
</table>
</div>
</body>
</html>

4、利用ECOTree提供的js 实现更为复杂的树形结构图

附件 graphic_javascript_tree_src.zip

效果如图：

<%@ page language="java"%>
<%@ page contentType="text/html;charset=GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>

<html xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<title></title>
		<script type="text/javascript" src="../js/ECOTree.js"></script>
		<link rel="stylesheet" href="<c:url value='/css/ECOTree.css' />" />
		<link rel="stylesheet" href="<c:url value='/css/style.css' />" />	
		<style type="text/css">
		  v\:*{
		  behavior:url(#default#VML);
		  }
		    
		  v\:RoundRect{
		  text-align:center;
		  position:relative;
		  }
		    
		  v\:TextBox{
		  vertical-align:middle;
		  font-size:13px;
		  }
		  </style>
		<script>
			var t = null;
			
			function CreateTree() {
				t = new ECOTree('t','recallTreeDiv');						
				t.config.iRootOrientation = ECOTree.RO_LEFT;
				t.config.defaultNodeWidth = 246;
				t.config.defaultNodeHeight = 36;
				t.config.iSubtreeSeparation = 20;
				t.config.iSiblingSeparation = 10;										
				t.config.linkType = 'B';
				t.config.useTarget = false;
				t.config.nodeFill = ECOTree.NF_GRADIENT;
				t.config.colorStyle = ECOTree.CS_LEVEL;
				//t.config.levelColors = ["#966E00","#BC9400","#D9B100","#FFD700"];
				//t.config.levelBorderColors = ["#FFD700","#D9B100","#BC9400","#966E00"];
				t.config.nodeColor = "#FFD700";
				t.config.nodeBorderColor = "#FFD700";
				t.config.linkColor = "#5555FF";

				<%
				java.util.List list = (java.util.List)request.getAttribute("recallList"); 
				for(int i=0;i<list.size();i++) {
					Object obj = list.get(i);
					org.mcp.data.logic.BackwardNode2 backwardNode = (org.mcp.data.logic.BackwardNode2)obj;
				%>
				t.add('<%=backwardNode.getBatch()%>','<%=backwardNode.getPbatch()%>','<%=backwardNode.getBatch()%><br/><%=backwardNode.getEnterName()%>');
				<%
				}
				%>
				t.UpdateTree();
			}									
		</script>
	</head>
	<body onload="CreateTree();">
	
	<h4>供货商所有关联销售流向信息示意图&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返 回" onclick="javascript:window.history.go(-1)"></h4>
	<div id="recallTreeDiv"></div>
	</body>
</html>