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

最新推荐文章于 2020-12-23 09:46:08 发布
最新推荐文章于 2020-12-23 09:46:08 发布
阅读量2.4k 收藏
点赞数
分类专栏： 工作小记

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代码 复制代码  收藏代码
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">  
  4. <title>Insert title here</title>  
  5. <style type="text/css">  
  6.   v\:*{   
  7.   behavior:url(#default#VML);   
  8.   }   
  9.        
  10.   v\:RoundRect{   
  11.   text-align:center;   
  12.   position:relative;   
  13.   }   
  14.        
  15.   v\:TextBox{   
  16.   vertical-align:middle;   
  17.   font-size:13px;   
  18.   }   
  19.   </style>  
  20. </head>  
  21. <body>  
  22. <div class="grid" align="center">  
  23. <table class="gridbody" cellpadding="1" cellspacing="0" rules="all">  
  24.     <tr class="gridtitle">  
  25.         <td align="left" colspan="7">供货商所有关联销售信息查询</td>  
  26.     </tr>  
  27.     <tr class="griditem">  
  28.     <td>  
  29. <center>  
  30. <script>  
  31.   
  32.     //第一层树结构   
  33.     var incv = new Array();   
  34.     incv[0] = "1";   
  35.     incv[1] = "IOS111052500018";   
  36.     incv[2] = "临沂新程金锣肉制品集团有限公司";   
  37.   
  38.     //第二层树结构   
  39.     var dcv=new Array(); //定义一维数组       
  40.        
  41.     dcv[0]=new Array(); //将每一个子元素又定义为数组       
  42.     dcv[0][0]='2';   
  43.     dcv[0][1]='5000100003';   
  44.     dcv[0][2]='华联超市经七超市金锣专柜';   
  45.   
  46.     dcv[1]=new Array(); //将每一个子元素又定义为数组       
  47.     dcv[1][0]='3';   
  48.     dcv[1][1]='5000100002';   
  49.     dcv[1][2]='华联超市世购超市金锣专柜';   
  50.   
  51.     dcv[2]=new Array(); //将每一个子元素又定义为数组       
  52.     dcv[2][0]='4';   
  53.     dcv[2][1]='5000100001';   
  54.     dcv[2][2]='华联超市嘉华超市金锣专柜';   
  55.   
  56.     document.write(drawXX(incv,dcv));    
  57.   
  58.     function drawXX(iobj,dobj){   
  59.         v1 = 20+40*(dobj.length-1);   
  60.         v2 = v1/2;   
  61.         v3 = v2 - 12;   
  62.   
  63.         //alert("start -- ");   
  64.         var start = "<v:group coordsize='600,800' style='width:600px;height:800px;'>";   
  65.         var is="<v:RoundRect style='width:300px;height:28px;left:0px;top:"  
  66.             +     v3   
  67.             +    "px' align='center'>"   
  68.             +    "<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/><v:TextBox >"   
  69.             +     iobj[1] + "(" + iobj[2] + ")"   
  70.             +    "</a></v:TextBox></v:RoundRect>";   
  71.         var ls="";   
  72.         ls +="<v:line from='300," + v2 + "' to='340," + v2 + "' />"   
  73.         ls +="<v:line from='340,20' to='340," + v1 + "' />"   
  74.   
  75.         var ds ="";   
  76.             for(var i=0;i<dobj.length;i++){   
  77.                 ds +="<v:line from='340," + (20+i*40) + "' to='380," + (20+i*40) + "' />"   
  78.                 ds +="<v:RoundRect style='width:280px;height:28px;left:380px;top:" + (8+i*40) + "px;' align='center'>"   
  79.                 ds +="<v:shadow on='True' type='single' color='#b3b3b3' offset='5px,5px'/>";   
  80.                 ds +="<v:TextBox >" + dobj[i][1] +"("+ dobj[i][2] +")" + "</v:TextBox>";   
  81.                 ds +="</v:RoundRect>";   
  82.             }   
  83.   
  84.         var end = "</v:group>";   
  85.   
  86.         var draws = start + is + ls + ds + end;   
  87.   
  88.         return draws;   
  89.     }   
  90. </script>  
  91.   
  92. </center>  
  93. </td>  
  94. </tr>  
  95. </table>  
  96. </div>  
  97. </body>  
  98. </html>  
<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

效果如图：



 

 

Html代码 复制代码  收藏代码
  1. <%@ page language="java"%>  
  2. <%@ page contentType="text/html;charset=GBK"%>  
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>  
  4. <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>  
  5. <%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>  
  6.   
  7. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  8.     <head>  
  9.         <title></title>  
  10.         <script type="text/javascript" src="../js/ECOTree.js"></script>  
  11.         <link rel="stylesheet" href="<c:url value='/css/ECOTree.css' />" />  
  12.         <link rel="stylesheet" href="<c:url value='/css/style.css' />" />      
  13.         <style type="text/css">  
  14.           v\:*{   
  15.           behavior:url(#default#VML);   
  16.           }   
  17.                
  18.           v\:RoundRect{   
  19.           text-align:center;   
  20.           position:relative;   
  21.           }   
  22.                
  23.           v\:TextBox{   
  24.           vertical-align:middle;   
  25.           font-size:13px;   
  26.           }   
  27.           </style>  
  28.         <script>  
  29.             var t = null;   
  30.                
  31.             function CreateTree() {   
  32.                 t = new ECOTree('t','recallTreeDiv');                          
  33.                 t.config.iRootOrientation = ECOTree.RO_LEFT;   
  34.                 t.config.defaultNodeWidth = 246;   
  35.                 t.config.defaultNodeHeight = 36;   
  36.                 t.config.iSubtreeSeparation = 20;   
  37.                 t.config.iSiblingSeparation = 10;                                          
  38.                 t.config.linkType = 'B';   
  39.                 t.config.useTarget = false;   
  40.                 t.config.nodeFill = ECOTree.NF_GRADIENT;   
  41.                 t.config.colorStyle = ECOTree.CS_LEVEL;   
  42.                 //t.config.levelColors = ["#966E00","#BC9400","#D9B100","#FFD700"];   
  43.                 //t.config.levelBorderColors = ["#FFD700","#D9B100","#BC9400","#966E00"];   
  44.                 t.config.nodeColor = "#FFD700";   
  45.                 t.config.nodeBorderColor = "#FFD700";   
  46.                 t.config.linkColor = "#5555FF";   
  47.   
  48.                 <%   
  49.                 java.util.List list = (java.util.List)request.getAttribute("recallList");    
  50.                 for(int i=0;i<list.size();i++) {   
  51.                     Object obj = list.get(i);   
  52.                     org.mcp.data.logic.BackwardNode2 backwardNode = (org.mcp.data.logic.BackwardNode2)obj;   
  53.                 %>  
  54.                 t.add('<%=backwardNode.getBatch()%>','<%=backwardNode.getPbatch()%>','<%=backwardNode.getBatch()%><br/><%=backwardNode.getEnterName()%>');   
  55.                 <%   
  56.                 }   
  57.                 %>  
  58.                 t.UpdateTree();   
  59.             }                                      
  60.         </script>  
  61.     </head>  
  62.     <body onload="CreateTree();">  
  63.        
  64.     <h4>供货商所有关联销售流向信息示意图&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返 回" onclick="javascript:window.history.go(-1)"></h4>  
  65.     <div id="recallTreeDiv"></div>  
  66.     </body>  
  67. </html>  
彷徨的石头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ecoTree经典js组织结构图
09-10
变色，展开，变换方向，线形变换等多功能于一身，经典
ECOTree树形控件
11-20
ECOTree可用于项目中报表开发的树形控件，展示树形层次结构等，有例子
ECO tree
flash8627的专栏
08-17 3748
最近公司用到Eco tree,感觉还不错，就贴出来跟大家分享，主要的功能是tree，但请注意，此tree非比tree,里面还有一个小tree,用于缩略图的效果。具体代码如下，不做过多解释：   主文件HTML             ECOTree Advanced
VML+XML绘制树型图表(Create a Tree Graph by VML+XML)
weixin_30275415的博客
09-10 90
VML(Vector Markup Language) is an application of Extensible Markup Language (XML) 1.0 which defines a format for the encoding of vector information together with additional markup to describe how that...
层次树Ecotree的实现
zhengun的专栏
08-26 211
最近工作中开发的项目中有这样一个需求，对工艺路线和工序进行增删改查的操作。 下面我就简单介绍一下，工艺路线和工序的关系，首先：工艺路线是由许多个工序组成的。 例如我们一个工艺路线的名字叫包水饺，那么它的子工序由和面+拌陷+干皮+包饺子等等吧 那吧就构成了这样的一道工艺路线：                                       包水饺-----和面-------拌陷-...
ecotree.js
01-19
ecotree.js
ecotree.js实现组织机构树
09-03
使用ecotree.js，不用excanvas.js，实现组织机构树，不能拖拽，只能展示。
EcoTree树型展示控件
06-20
EcoTree树型展示控件，因为是vml的，必须在IE兼容模式下运行。这个树非常适合做组织结构的展示，可以横向也可以竖向，大家可以参考学习下东西，可能项目中应用不太适合。
VML 基本教程（包含树形图，饼状图，柱形图的做法）
verry1230的专栏
03-25 459
http://www.itlearner.com/code/vml/
JS树(ECOTree),直接可运行
01-22
ECOTree,js生成树,js自定义树，漂亮，可自定义操作
js绘制的 ECOTree，支持IE，FF
09-25
完全由js绘制，支持IE，FF，效果像MindManager软件绘制出来的意义，很适合做流程图展示
ECO tree组织关系的js.rar
11-23
ECO tree组织关系的js.rar
ECOTree层次树
07-13
ECOTree层次树
一种JS做的树
11-26
var myTree = null; function CreateTree() { myTree = new ECOTree('myTree','myTreeContainer'); myTree.config.colorStyle = ECOTree.CS_LEVEL; myTree.config.nodeFill = ECOTree.NF_FLAT; myTree.config.selectMode = ECOTree.SL_NONE; //是否允许给节点加链接，是否允许给节点加图片 myTree.config.useTarget = false; myTree.config.useImg = true; 　　//设置节点的大小和间隔 myTree.config.defaultNodeWidth = 95; myTree.config.defaultNodeHeight = 140; myTree.config.iSubtreeSeparation = 50; myTree.config.iSiblingSeparation = 15; myTree.config.iLevelSeparation = 30; //此处通过从数据库或其它地方读取节点信息，生成添加节点的代码 //参数前三位是必须的； //第一位是本节点id，第二位是父节点id、根节点的父节点为-1，第三位为节点文本； //第四位为节点上显示的图片/照片、图片放到img下并在数据库中记录名称即可，未设参数则取默认图片； //第五位为超链接、最好是访问统一程序传入本节点id； //第六、七位为节点的个性化宽、高。 myTree.add('01',-1,'总裁','./img/0.jpg','http://www.jq-school.com'); myTree.add('02','01','技术副总裁','./img/1.jpg'); myTree.add('03','01','总裁助理','./img/2.jpg','http://www.jq-school.com',95,130); myTree.add('04','01','分公司','./img/3.jpg','http://www.jq-school.com',95,130); myTree.add('0201','02','技术经理','./img/4.jpg','http://www.jq-school.com',95,130); myTree.add('0202','02','技术员','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0301','03','秘书','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0302','03','助理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0401','04','总经理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0402','04','财务','./img/7.jpg','http://www.jq-school.com',95,130); myTree.UpdateTree(); } 包含有例子和源码。
决策树Ecotree
weixin_43880379的博客
08-26 148
是由许多个工序组成的。 例如我们一个工艺路线的名字叫包水饺，那么它的子工序由和面+拌陷+干皮+包饺子等等吧 那吧就构成了这样的一道工艺路线：                                       包水饺-----和面-------拌陷------干皮----包饺子 流程就先介绍到这里。 今天的主题主要是Ecotree树的实现 下面我就先展示一下我已经建立好的一张工艺路线图      这张一个查询出来的已经建立好的所有的工艺路线 功能：可以查询工艺路线  可以新增工艺
ECOtree的中文文档(电脑翻译)
weixin_30329623的博客
12-26 274
介绍 本文介绍了一个JavaScript组件，它使用Internet Explorer 6+中的（矢量标记语言）或Firefox 1.5+中的元素在屏幕上呈现树。VML 有很多的JavaScript树，其中大多数具有更好的跨浏览器兼容性，更快，更好的优化。此代码的目标是展示Walker布局算法的客户端实现（请参阅参考资料），不再需要代码优化。简而言之，这个组件是在算法之后诞生...
vml时序表_VML应用-利用ECOTree绘制树形结构图
weixin_34481252的博客
12-23 140
1、基本概念VML的全称是Vector Markup Language(矢量可标记语言)，VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。具体内容可以上网搜索。2、利用VML实现树形结构图通过后台数据库查询，查询销售流向。3、自己动手绘制流程图效果如图：Insert title herev\:*{behavi...
VML教程：矢量图形语言与动态效果在IE中的应用
VML系列教程由银海军工事业部提供，针对初学者设计，主要讲解如何在Internet Explorer（IE）浏览器环境下利用VML（Vector Markup Language，矢量可标记语言）进行Web绘图和动态效果实现。VML最初由微软在IE5.0中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值