纯JavaScript实现HTML业务流程图

流程！又是流程！

流程无时无处存在我们的身边，最近项目当中需要使用一种在网页上生成流程的工具，并且工具支持鼠标事件和样式表。

在网上搜索大多数都是工作流的生成的XML，在XML内附带位置信息的基础上采用一个名为WZ_Grahpic矢量库进行链接。和自己的业务在原理上类似，但是业务千差万别。

那么，这次给大家带来的是一个简单，方便，实用的JQuery插件，废话不多说，看预览效果图

网页代码：

 

<div id="spanBefore">
	<div class="before" begin=-1 id="1" next="2,3,11">环节一</div>
	<div class="before" id="2" next="4">环节二</div>
	<div class="before" id="3" next="5">环节三</div>
	<div class="before" id="4" next="6">环节四</div>
	<div class="before" id="5" next="6">环节五</div>
	<div class="before" id="6" next="7,8">环节六</div>
	<div class="before" id="7" next="9">环节七</div>
	<div class="before" id="8" next="10,11">环节八</div>
	<div class="before" id="9" next="12">环节九</div>
	<div class="before" id="10" next="12">环节10</div>
	<div class="before" id="11" next="12">环节11</div>
	<div class="before" id="12" next="-1">环节12</div>
</div>

<div style="padding:30px;border:1px dotted black;">
<div style="position:relative; width:300px; height:300px;" id="draw"></div>
</div>
<input type=button value='生成流程图' onclick="createFlow();" />

 

<script type="text/javascript">
	var createFlow = function(){
		$("#spanBefore").flow({hover:function(){
			$(this).addClass("hover");
		},remove:function(){
			$(this).removeClass("hover");
		},click:function(){
			alert($(this).attr("id") + "->" + $(this).attr("next") + " Click");
		}});
	}
</script>

 从HTML结构当中，不难看出非常，每个class属性为before的div层为一个节点，起点节点含有begin＝－1的属性。每个节点的下一节点在next属性当中填写，当存在多分支时，采用“，”分割。

 

具体演示程序和代码以及插件见下载

 

评论

5 楼 hjl416148489 2017-09-22  

666，web在线流程图下载：http://www.sucaihuo.com/js/77.html

4 楼 hongjiazhai 2016-12-28  

在哪里下载
             

3 楼 ckxlnd 2015-09-26  

东西没有了么？

2 楼 wenhai_zhang 2014-07-14  

请问一下，这个是什么插件，怎么在网上搜不到呢？谢谢！

1 楼 lhdaotian 2009-11-02  

你的这个流程图控件非常不错，我引用了。
但在用的过程中发现一些问题，不知应该怎么解决，请博主赐教。
一、当“环节一”的next同时指向“环节二”和“环节三”时，环节一直接穿过环节二，指向了环节三。能不能让其绕过环节二指向环节三？
上述问题的HTML代码如下：
<div id="spanBefore">
<div class="before" begin=-1 id="1" next="2,3">环节一</div>
<div class="before" id="2" next="3">环节二</div>
<div class="before" id="3" next="4">环节三</div>
<div class="before" id="4" next="5">环节四</div>
<div class="before" id="5" next="-1">环节五</div>
</div>

二、当某一环节的next逆向指回其前边的某一环节时，会发生 out of memory 错误。因为在流程审批过程中可能会使用到环节三指回到环节二的情况，请问这时应该如何处理？上述问题的HTML代码如下：
<div id="spanBefore">
<div class="before" begin=-1 id="1" next="2">环节一</div>
<div class="before" id="2" next="3">环节二</div>
<div class="before" id="3" next="4,2">环节三</div>
<div class="before" id="4" next="5">环节四</div>
<div class="before" id="5" next="-1">环节五</div>
</div>