原创:用Html画WorkFlow流程图经验分享

做MIS系统无非就是天天围绕着用户满意度在转,最近两天就一直在为流程的图形化忙晕了,最开始想用一些目前比较前沿的技术(如:Silverlight,Flex...)来画,不过因时间及环境关系放弃了,改用以下最原始的方式.

功夫不负有心人,折腾了个像模像样的,先上效果图:

(可以生成任意多分支路由的流程图,单人图表示或汇聚节点,多人图表示与汇聚节点,+号图表示节点为嵌套子流程,箭头图标表示路由分支...)

 

图形生成原理及思路:

1.在最外层嵌套一个table,并设置为居中显示;

2.计算当前流程要占用表格行及列数(算法:行数=节点数; 列数=分支大于2的节点数*2+1);

3.数据分析整理:

主要目的是为了生成一个如下结构的数据表,字段列表:(节点描述(包括类型及名称),所在行,所在列,元素类型,是否为该类型最后一个元素)

4.有了上面这张表的数据后,生成图形就非常简单了,用两个for循环嵌套,在对应的行和列里放入你要画的节点图即可.

这一步骤有一些细节需要处理,就是判断什么时侯画不带箭头的线以及什么时侯不需要画箭头..

 

部分代码如下:

 

代码

// 生成流程图
  flowStr.Append( " <table align='center'> \r\n " );
   for  ( int  m  =   1 ; m  <=  row; m ++ )
  {
        flowStr.Append( " <tr> \r\n " );
         for  ( int  n  =   1 ; n  <=  col; n ++ )
        {
             flowStr.Append( " <td align='center'> " );
             DataRow[] dr  =  flowdt.Select( " Row= "   +  m  +   "  and Col= "   +  n);
              if  (dr  !=   null   &&  dr.Length  ==   1 )
             {
                   string  nodeDesc  =  dr[ 0 ][ " NodeDesc " ].ToString();
                   string  eleType  =  dr[ 0 ][ " EleType " ].ToString();
                   bool  isLast  =  Convert.ToBoolean(dr[ 0 ][ " IsLast " ]);
                  flowStr.Append(GenTableCol(nodeDesc, eleType, isLast));
             }
         　　 flowStr.Append( " </td> \r\n " );
         }
         flowStr.Append( " </tr> \r\n " );
   }
   flowStr.Append( " </table> " );

 

OK,到此就可以预览流程图了,效果还勉强可以凑合...

哪位还有没有更好的方法呢? 欢迎一起探讨!

 

 

转载于:https://www.cnblogs.com/allen_he/archive/2009/11/27/1612018.html