原创:用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,到此就可以预览流程图了,效果还勉强可以凑合...

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