源文地址: http://www.cnblogs.com/wangxiaohuo/archive/2008/07/07/1237796.html
[
个人看了一下点儿心得:文章中在流程表达与或跟踪时我个人认为,最好以XML做为接口,在业务(c#)中不要做任何的分析(用c# StringBulder再拼写VML)那样显得条例不是很清晰,且很被动(我认为所有的UI可以通过js辅助来实现表达优点提高性能)
]
我们常常要在web上显示流程图,网上比较难找,到处要收费,自己琢磨了一个, 比较简单,包括开始节点,结束结点,两种节点框图(节点、容器)和两种特殊线(跳线、返回线), 使用xml文件或xml字串作为数据源,没有多少需求分析,给有心人参考,也收集一些建议,源码过段时间整理再放上。 demo代码 效果图如下:
数据源说明:
xml数据源
<?xml version="1.0" encoding="utf-8" ?>
<root>
<Attributes>
<Width>120</Width>--节点宽度
<Height>60</Height>--节点高度
</Attributes>
<TaskNodes>
<Task>
<TaskType>Start</TaskType>--开始节点
<TaskCode>Start</TaskCode>--代码
<TaskStatus>Completed</TaskStatus>--是否完成
</Task>
<Task>
<TaskType>Normal</TaskType>--单节点
<TaskCode>OpenForm</TaskCode>
<Title>
<TitleLine>開單</TitleLine>--节点文字第一行
<TitleLine>劉XX</TitleLine>--节点文字第二行
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>GroupApprove</TaskCode>
<Title>
<TitleLine>組級審覈</TitleLine>
<TitleLine>王XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>SectionApprove</TaskCode>
<Title>
<TitleLine>劉級審覈</TitleLine>
<TitleLine>劉XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>MulApprove</TaskType>--复合结点
<TaskCode>ManageApprove</TaskCode>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove0</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>趙XX</TitleLine>
</Title>
<TaskStatus>False</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove1</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>吳XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove2</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>湯XX</TitleLine>
</Title>
<TaskStatus>False</TaskStatus>
</Task>
</Task>
<Task>
<TaskType>End</TaskType>
<TaskCode>End</TaskCode>
<TaskStatus>Completed</TaskStatus>
</Task>
</TaskNodes>
<Lines>
<Line>
<LineType>Back</LineType>--返回线
<LineStart>GroupApprove</LineStart>--起始节点
<LineEnd>OpenForm</LineEnd>--结束节点
</Line>
<Line>
<LineType>Back</LineType>
<LineStart>SectionApprove</LineStart>
<LineEnd>OpenForm</LineEnd>
</Line>
<Line>
<LineType>Back</LineType>
<LineStart>ManageApprove</LineStart>
<LineEnd>OpenForm</LineEnd>
</Line>
<Line>
<LineType>Break</LineType>--跳线
<LineStart>OpenForm</LineStart>
<LineEnd>SectionApprove</LineEnd>
</Line>
<Line>
<LineType>Break</LineType>
<LineStart>GroupApprove</LineStart>
<LineEnd>ManageApprove</LineEnd>
</Line>
</Lines>
</root>
链接处理:
Code
Dictionary<string, string> dicMap = DrawCommon.GetMapXmlString(x, y, w, h, sbXmlString.ToString());
foreach (string TaskCode in dicMap.Keys) 
{
string[] arr = dicMap[TaskCode].ToString().Split('&');
sbMap.Append("<area target=/"blank/" href=/"" + Request.ApplicationPath + "/Detail_workflow.aspx?TaskCode=" + TaskCode + "/" shape=/"rect/" coords=/"" + arr[0] + ", " + arr[1] + ", " + Convert.ToString(Convert.ToInt32(arr[0]) + Convert.ToInt32(arr[2])) + ", " + Convert.ToString(Convert.ToInt32(arr[1]) + Convert.ToInt32(arr[3])) + "/">");
}
sbMap.Append("</map>");
divMap.InnerHtml = sbMap.ToString();