一个简单的WEB流程图组件[demo]

我们常常要在web上显示流程图,网上比较难找,到处要收费,自己琢磨了一个,

比较简单,包括开始节点，结束结点，两种节点框图(节点、容器)和两种特殊线（跳线、返回线）,

使用xml文件或xml字串作为数据源，

没有多少需求分析,给有心人参考,也收集一些建议，源码过段时间整理再放上。

demo代码

效果图如下:

<?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>

链接处理：

Dictionary<string, string> dicMap = DrawCommon.GetMapXmlString(x, y, w, h, sbXmlString.ToString());

foreach (string TaskCode in dicMap.Keys)

sbMap.Append("</map>");

divMap.InnerHtml = sbMap.ToString();