博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
决策树Ecotree（转）
阅读量：5055 次
发布时间：2019-06-12

本文共 14201 字，大约阅读时间需要 47 分钟。

最近工作中开发的项目中有这样一个需求，对工艺路线和工序进行增删改查的操作。

下面我就简单介绍一下，工艺路线和工序的关系，首先：工艺路线是由许多个工序组成的。

例如我们一个工艺路线的名字叫包水饺，那么它的子工序由和面+拌陷+干皮+包饺子等等吧

那吧就构成了这样的一道工艺路线：

包水饺-----和面-------拌陷------干皮----包饺子

流程就先介绍到这里。

今天的主题主要是Ecotree树的实现

下面我就先展示一下我已经建立好的一张工艺路线图

 

 

这张一个查询出来的已经建立好的所有的工艺路线

功能：可以查询工艺路线 可以新增工艺路线 可以编辑工艺路线 可以修改工艺路线 可以删除工艺路线 可以提交工艺路线（工艺路线一旦提交，就不能进行编辑删除等操作了，只能查看）

下面这张图片是点击江中集体查看后的结果：

工艺路线不能在被修改，可以看到文本框都变灰了，下面的图形是一个层次树，只能进行查看操作，不能新增工序节点

同理也不能修改，删除节点

 

 

下面这张图片是点击了江中集体编辑后显示的页面，基本上和上面的一面是一模一样的，只不过，在这张页面中，我们可以对子工序进行增加节点 删除节点，编辑节点的操作。可以看到图片上文字的下面多出了一个超链接，我们点击超链接，可以进行相应的操作

下面这张图片显示的是点击了江中小舟后出现的一个操作菜单：主要功能是：新增节点，编辑节点，插入节点，和删除节点

 

 

下面这张图片显示的就是点击了新增节点后显示的图片：

 

这是新增菜单，我单独拿了出来，主要是让大家看到后续后续里面的选择项，选择项中就是所有的工序节点

下面这张图片显示的是点击编辑菜单后出现的效果：

我们可以对其工序节点的名称，编码，说明进行相应的修改。

下面这张图片显示的是点击插入菜单选项后出现的效果，可以看到和编辑操作菜单没有什么两样，只不过，这里的菜单选择中的数据是null的。我们可以填入数据，点击保存后，就会在江中小舟节点下面多了一个子节点。

同理还有一个删除菜单选项，这里我就不多说了，想必大家心里很清楚，点击删除后，此节点就会消失了，不过我还是想在啰嗦一下，因为在整个功能中，就属删除节点最麻烦了，首先你要先考虑到你点击的节点有没有子节点，如果没有子节点，就直接将此节点删除就ok了， 如果有子节点，还要判断一下，此节点是不是根节点，如果是根节点，也很好办，就将所有的节点清空就ok了，如果不是根节点，就稍微有点麻烦一些了，首先你要找到你删除节点的父节点，和所有的子节点，让后将所有的子节点的父节点设为你删除节点的父节点就ok了。

ok功能展示完了，下面我就大致讲一下我写这个东东的一个过程：

首先我们要先创建一个决策树：代码如下

Sql代码
  1. <script>
  2. var myTree = null;
  4. function CreateTree() {
  5. myTree = new ECOTree('myTree','myTreeContainer');
  6. myTree.config.colorStyle = ECOTree.CS_LEVEL;
  7. myTree.config.nodeFill = ECOTree.NF_FLAT;
  8. myTree.config.useTarget = false;
  9. myTree.config.selectMode = ECOTree.SL_MULTIPLE;
  10. myTree.config.defaultNodeWidth = 65;
  11. myTree.config.defaultNodeHeight = 20;
  12. myTree.config.iSubtreeSeparation = 30;
  13. myTree.config.iSiblingSeparation = 20;
  14. myTree.config.iLevelSeparation = 30;
  16. myTree.add(1,-1,'Node O');
  17. myTree.add(3,1,'Node F');
  18. myTree.add(2,1,'Node E');
  19. myTree.add(4,1,'Node N');
  20. myTree.add(5,2,'Node A');
  21. myTree.add(6,2,'Node D');
  22. myTree.add(7,4,'Node G');
  23. myTree.add(8,4,'Node M');
  24. myTree.add(9,6,'Node B');
  25. myTree.add(10,6,'Node C');
  26. myTree.add(11,8,'Node H');
  27. myTree.add(12,8,'Node I');
  28. myTree.add(13,8,'Node J');
  29. myTree.add(14,8,'Node K');
  30. myTree.add(15,8,'Node L');
  32. myTree.UpdateTree();
  33. }
  34. </script>

 

这样就创建了一个决策树。

但是实际项目开发过程中，不能这么创建，因为这是静态的，没有任何意义，我们要动态的出创建决策树。

下面我就主要将一下如何动态创建决策树。

来我们一步步创建。

Sql代码
  1. var myTree = null;
  2. var bk=-1;
  3. var savenum=0;
  4. /*创建Ecotree*/
  5. function CreateTree()
  6. {
  7. myTree = new ECOTree('myTree','myTreeContainer');
  8. myTree.config.colorStyle = ECOTree.CS_LEVEL;
  9. myTree.config.nodeFill = ECOTree.NF_FLAT;
  10. myTree.config.useTarget = true;
  11. ///myTree.config.selectMode = ECOTree.SL_MULTIPLE;
  12. //myTree.config.defaultNodeWidth = 65;
  13. //myTree.config.defaultNodeHeight = 20;
  14. //myTree.config.iSubtreeSeparation = 30;
  15. //myTree.config.iSiblingSeparation = 20;
  16. //myTree.config.iLevelSeparation = 30;
  17. #foreach($m in $!queryNode)
  18. myTree.add('$m.PROCID','$m.NEXTPROCID','$m.PROCNAME',null,null,null,null,'javascript:open();','test');
  19. #end
  20. myTree.UpdateTree();
  21. close();
  22. } 
var myTree = null; 	var bk=-1; 	var savenum=0; 	/*创建Ecotree*/ 	function CreateTree()  	{ 		myTree = new ECOTree('myTree','myTreeContainer'); 		myTree.config.colorStyle = ECOTree.CS_LEVEL; 		myTree.config.nodeFill = ECOTree.NF_FLAT; 		myTree.config.useTarget = true; 		///myTree.config.selectMode = ECOTree.SL_MULTIPLE; 		//myTree.config.defaultNodeWidth = 65; 		//myTree.config.defaultNodeHeight = 20; 		//myTree.config.iSubtreeSeparation = 30; 		//myTree.config.iSiblingSeparation = 20; 		//myTree.config.iLevelSeparation = 30; 		#foreach($m in $!queryNode) 		  myTree.add('$m.PROCID','$m.NEXTPROCID','$m.PROCNAME',null,null,null,null,'javascript:open();','test'); 		 #end 		myTree.UpdateTree(); 		close(); 	}

 

有得人可能会不明白这里的#foreach($m in $!queryNode)的写法，其实我一开始也没接触过这个东西，还是工作以后，接触到的，这是velocity的语法，集合的遍历，当页面加载的时候，我们就让它去调用此方法，如果集合是null的，就会先创建一个没有任何节点的决策树。

我们从新建工艺路线开始：

点击新建

你可以输入工艺路线的名称 编码 说明和生效状态

我们输入一下内容后，点击保存：

点击保存执行的sql

 

Sql代码
  1. /*保存工艺路线*/
  2. function save()
  3. {
  4. document.getElementById("btnSave").setAttribute("disabled","true");
  5. document.getElementById("btnSave").setAttribute("readOnly","true");
  6. document.all.form1.action="isExsitGylx.aspx";
  7. document.all.form1.target="saveframe";
  8. document.all.form1.submit();
  9. } 
/*保存工艺路线*/	function save()	{ 		document.getElementById("btnSave").setAttribute("disabled","true");		document.getElementById("btnSave").setAttribute("readOnly","true");	                document.all.form1.action="isExsitGylx.aspx";                               document.all.form1.target="saveframe";                               document.all.form1.submit();	}

保存的时候，先判断编码是否存在

 

Sql代码
  1. <web:page>
  2. <web:sql>isGylxExsit</web:sql>
  3. <web:db>Login</web:db>
  4. <web:template>template/synear/gylx/isExsitGylx.vm</web:template>
  5. </web:page> 
      
     
      isGylxExsit
       
     
      Login
     
     
      template/synear/gylx/isExsitGylx.vm

 

isGylxExsit的sql语句是这样的

Sql代码
  1. <!--新增工艺路线之前查询编码是否存在 如果存在提示错误-->
  2. <select id="isGylxExsit" parameterClass="java.util.Map" resultClass="java.util.HashMap">
  3. selectcount(*) plannum from sn_procline sp where sp.proclinecode=#form_proclinecode#
  4. </select>

 

查询成功后，然后跳转到isExsitGylx.vm这个页面

Java代码
  1. <html>
  2. <head>
  3. <title>系统操作结果</title>
  4. <script type="text/javascript">
  5. var feenum='0';
  6. #foreach($m in $isGylxExsit)
  7. feenum="$m.PLANNUM";
  8. #end
  9. if(parseInt(feenum)>0) {
  10. alert("编码不能重复");
  11. parent.submitok=false;
  12. parent.chongfu();
  14. }elseif(feenum=='0'){
  16. parent.testok();
  17. }else{
  19. alert("出现未知错误！");
  20. parent.submitok=false;
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html> 
	系统操作结果

如果编码重复了，就重新返回此页面然后调用chongfu()这个函数，代码如下

Sql代码
  1. /*编码重复了*/
  2. function chongfu()
  3. {
  4. document.getElementById("btnSave").removeAttribute("disabled");
  5. document.getElementById("btnSave").removeAttribute("readOnly");
  6. } 
/*编码重复了*/	function chongfu()	{		document.getElementById("btnSave").removeAttribute("disabled");		document.getElementById("btnSave").removeAttribute("readOnly");	}

编码重复以后重新将保存按钮的只读状态移除

如果编码不重复，就重新返回此页面，让后调用testok()这个函数，代码如下

Sql代码
  1. /*保存工艺路线到数据库成功*/
  2. function testok()
  3. {
  5. if(savenum>0) bk=bk-1;
  6. savenum++;
  7. document.form1.proclineid.value=getTimeStr();
  8. document.all.form1.action="addGylxsave.aspx";
  9. document.all.form1.target="saveframe";
  10. document.all.form1.submit();
  11. } 
/*保存工艺路线到数据库成功*/	function testok()	{		if(savenum>0) bk=bk-1;	 savenum++;	  document.form1.proclineid.value=getTimeStr();	  document.all.form1.action="addGylxsave.aspx";	  document.all.form1.target="saveframe";                 document.all.form1.submit();	}

编码不重复才将表单提交到数据库中，表单提交到addGxlxsave.aspx中，代码如下：

Java代码
  1. <web:page>
  2. <web:sql>addGxsave</web:sql>
  3. <web:sql_type>update</web:sql_type>
  4. <web:db>Login</web:db>
  5. <web:successMsg>数据保存成功！</web:successMsg>
  6. <web:failMsg>数据保存失败！</web:failMsg>
  7. <web:url>parent.saveok()</web:url>
  8. <web:target>parent</web:target>
  9. <web:template>template/synear/common/message.vm</web:template>
  10. </web:page> 
      
     
      addGxsave
      
     
      update
       
     
      Login
       
     
      数据保存成功！
       
     
      数据保存失败！
       
     
      parent.saveok()
       
     
      parent
       
     
      template/synear/common/message.vm

此时数据库会执行名称为addGxsave的sql语句，代码如下

Sql代码
  1. <!--新增工艺路线保存操作-->
  2. <update id="addGylxsave" parameterClass="java.util.Map">
  3. insertinto SN_PROCLINE values(#form_proclineid#,#form_proclinename#,#form_proclinecode#,#form_memo#,#form_fstatus#)
  4. </update> 
     
    
      insert into SN_PROCLINE values(#form_proclineid#,#form_proclinename#,#form_proclinecode#,#form_memo#,#form_fstatus#)

如果保存成功，就执行<web:successMsg>数据保存成功！</web:successMsg>

弹出数据保存成功对话框，同理如果保存失败，弹出保存失败对话框

如果保存成功，就再次返回到本页面，去调用saveok（）这个函数，代码如下

Sql代码
  1. /*初始保存工序成功*/
  2. function saveok()
  3. {
  4. document.getElementById("btnSave2").removeAttribute("readOnly");
  5. document.getElementById("btnSave2").removeAttribute("disabled");
  6. document.getElementById("div2").style.display="none";
  7. pname=document.getElementById("procname").value;
  8. pmemo=document.getElementById("procmemo").value;
  9. pleadtime=document.getElementById("leadtime").value;
  10. add1();
  11. if(savenum>0) bk=bk-1;
  12. savenum++;
  13. myTree.add(document.all.form3.procid.value,document.all.form3.nextprocid.value,document.getElementById("procname").value,null,null,null,null,"javascript:open();",'test');
  14. myTree.UpdateTree();
  15. } 
/*初始保存工序成功*/ 	function saveok() 	{		document.getElementById("btnSave2").removeAttribute("readOnly");		document.getElementById("btnSave2").removeAttribute("disabled");		document.getElementById("div2").style.display="none";		pname=document.getElementById("procname").value; 		pmemo=document.getElementById("procmemo").value; 		pleadtime=document.getElementById("leadtime").value; 		  add1(); 		  if(savenum>0) bk=bk-1; 		  savenum++; 		  myTree.add(document.all.form3.procid.value,document.all.form3.nextprocid.value,document.getElementById("procname").value,null,null,null,null,"javascript:open();",'test'); 		  myTree.UpdateTree(); 	}

保存成功后，将保存按钮的属性设为只读，同时将一个隐藏的div显示出来，目的是编写子工序，效果图如下

接下来我们就新增一个子工序

代码如下

Sql代码
  1. /*初始工序保存*/
  2. function save2()
  3. {
  4. document.getElementById("btnSave2").setAttribute("disabled","true");
  5. document.getElementById("btnSave2").setAttribute("readOnly","true");
  6. var cid2=document.getElementById("procname").value;
  7. document.all.form3.proclineid.value=document.form1.proclineid.value;
  8. document.all.form3.nextprocid.value=document.getElementById("nextname").value;
  9. document.all.addform.nextprocid.value=document.getElementById("nextname").value;
  10. pcid=getTimeStr();
  11. document.all.form3.procid.value=pcid;
  12. document.all.addform.procid.value=pcid;
  13. var p=parentnode.length;
  14. parentnode[p]=new Array(pcid,document.all.form3.nextprocid.value,cid2);
  15. p++;
  16. var c=childrennode.length;
  17. childrennode[c]=new Array(document.all.form3.nextprocid.value,pcid,cid2);
  18. c++;
  19. document.all.form3.action="addGxSave.aspx";
  20. document.all.form3.target="saveframe";
  21. document.all.form3.submit();
  22. } 
/*初始工序保存*/ 	function save2() 	{ 		document.getElementById("btnSave2").setAttribute("disabled","true");		document.getElementById("btnSave2").setAttribute("readOnly","true"); 		var cid2=document.getElementById("procname").value; 		document.all.form3.proclineid.value=document.form1.proclineid.value; 		document.all.form3.nextprocid.value=document.getElementById("nextname").value; 		document.all.addform.nextprocid.value=document.getElementById("nextname").value; 	    pcid=getTimeStr(); 		document.all.form3.procid.value=pcid; 		document.all.addform.procid.value=pcid; 		var p=parentnode.length; 		parentnode[p]=new Array(pcid,document.all.form3.nextprocid.value,cid2); 		p++; 		var c=childrennode.length; 		childrennode[c]=new Array(document.all.form3.nextprocid.value,pcid,cid2); 		c++; 		document.all.form3.action="addGxSave.aspx"; 		document.all.form3.target="saveframe"; 		document.all.form3.submit(); 	}

 

没保存一个节点，就将数据保存到两个数组中parentnode和childrennode

parentnode的构成由子工序节点id，父节点id，子工序名称

childrennode的构成由父节点id,子工序节点id,子工序名字

目的是为了，在不刷新页面的情况下，动态新增节点，从数组中取出数据

表单被提交到addGxSave.aspx中代码如下

Java代码
  1. <web:page>
  2. <web:sql>addGxsave</web:sql>
  3. <web:sql_type>update</web:sql_type>
  4. <web:db>Login</web:db>
  5. <web:successMsg>数据保存成功！</web:successMsg>
  6. <web:failMsg>数据保存失败！</web:failMsg>
  7. <web:url>parent.saveok()</web:url>
  8. <web:target>parent</web:target>
  9. <web:template>template/synear/common/message.vm</web:template>
  10. </web:page> 
      
     
      addGxsave
      
     
      update
       
     
      Login
       
     
      数据保存成功！
       
     
      数据保存失败！
       
     
      parent.saveok()
       
     
      parent
       
     
      template/synear/common/message.vm

 

保存成功后,页面不刷新，重新返回到本页面，让后弹出一个数据保存成功对话框，让后调用parent.saveok()函数

代码如下

Sql代码
  1. /*初始保存工序成功*/
  2. function saveok()
  3. {
  4. document.getElementById("btnSave2").removeAttribute("readOnly");
  5. document.getElementById("btnSave2").removeAttribute("disabled");
  6. document.getElementById("div2").style.display="none";
  7. pname=document.getElementById("procname").value;
  8. pmemo=document.getElementById("procmemo").value;
  9. pleadtime=document.getElementById("leadtime").value;
  10. add1();
  11. if(savenum>0) bk=bk-1;
  12. savenum++;
  13. myTree.add(document.all.form3.procid.value,document.all.form3.nextprocid.value,document.getElementById("procname").value,null,null,null,null,"javascript:open();",'test');
  14. myTree.UpdateTree();
  15. } 
/*初始保存工序成功*/ 	function saveok() 	{		document.getElementById("btnSave2").removeAttribute("readOnly");		document.getElementById("btnSave2").removeAttribute("disabled");		document.getElementById("div2").style.display="none";		pname=document.getElementById("procname").value; 		pmemo=document.getElementById("procmemo").value; 		pleadtime=document.getElementById("leadtime").value; 		  add1(); 		  if(savenum>0) bk=bk-1; 		  savenum++; 		  myTree.add(document.all.form3.procid.value,document.all.form3.nextprocid.value,document.getElementById("procname").value,null,null,null,null,"javascript:open();",'test'); 		  myTree.UpdateTree(); 	}

同时在页面上创建一个工序节点，效果如下

保存成功后页面变为：

让后点击节点上面的超链接，出弹出一个操作菜单

代码如下

Sql代码
  1. <div id="dd" class="easyui-dialog" style="padding:5px;width:120px;height:180px;"
  2. title="工序菜单" iconCls="icon-ok"
  3. buttons="#dlg-buttons">
  4. <input type="button" value="新增节点" οnclick="add()"><br>
  5. <input type="button" value="编辑节点" οnclick="edit()"><br>
  6. <input type="button" value="插入节点" οnclick="insert()"><br>
  7. <input type="button" value="删除节点" οnclick="del()"><br>
  8. </div>

然后调用

Sql代码
  1. $('#dd').dialog('open'); 
$('#dd').dialog('open');

就出出现下面的界面

点击插入节点

代码如下

Sql代码
  1. <div id="insert" class="easyui-dialog" style="padding:5px;width:260px;height:180px;"
  2. title="插入工序" iconCls="icon-ok"
  3. buttons="#dlg-buttons">
  4. <form id="insertform"name="insertform">
  5. <input type="hidden"name="insertid" id="insertid">
  6. <input type="hidden"name="nextinsertid" id="nextinsertid">
  7. <input type="hidden"name="proclineid" id="proclineid">
  8. 工序名称：<input type="text"size="16"name="insertname" id="insertname" ><br>
  9. 说明名称：<input type="text"size="16"name="insertmemo" id="insertmemo" ><br>
  10. 前置时间：<input type="text"size="16"name="inertleadtime" id="insertleadtime" ><br>
  11. <div style="txt-align:center;border:0 double gray; padding-top:20px">
  12. <input type="button" value=" 保 存 " id="btnSave3" οnclick="insertsave()">&nbsp;&nbsp;&nbsp;
  13. <input type="button" value=" 取 消 "name="B222" οnclick="javascript:$('#insert').dialog('close');">
  14. </form>
  15. </div> 
    
     
      
      
      工序名称：
      
      
说明名称：
      
      
前置时间：
      
      
      
          

 

效果图如下

保存成功后，就会在页面不刷新的情况下创建一个子节点

 

效果如下

 

同理在新增节点

 

转载于:https://www.cnblogs.com/wangrsh2010/archive/2012/10/29/2745541.html

你可能感兴趣的文章
Halcon一日一练：图像拼接技术
查看>>
iOS设计模式 - 中介者
查看>>
centos jdk 下载
查看>>
HDU 1028 Ignatius and the Princess III(母函数)
查看>>
token简单的使用流程。
查看>>
django创建项目流程
查看>>
Vue 框架-01- 入门篇 图文教程
查看>>
多变量微积分笔记24——空间线积分
查看>>
poi操作oracle数据库导出excel文件
查看>>
(转)Intent的基本使用方法总结
查看>>
Windows Phone开发（24）：启动器与选择器之发送短信
查看>>
JS截取字符串常用方法
查看>>
java容器---------手工实现Linkedlist 链表
查看>>
three.js 性能优化的几种方法
查看>>
《梦断代码》读书笔记（三）
查看>>
FreeMarker解析json数据
查看>>
Java8 Lambda表达应用 -- 单线程游戏server+异步数据库操作
查看>>
Codeforces 450 C. Jzzhu and Chocolate
查看>>
[Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
查看>>
ACdream 1115 Salmon And Cat (找规律&amp;&amp;打表)
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-15 06:17:42   当前IP: 13.58.217.242   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我