先上个效果图。
以上效果为自己拖拽画布效果，可在每一个任务节点上去配置对应的name,function.
具体代码。
1.js,css引用
2。HTML JS
<script type="text/javascript">
$(function () {
var module = GetQueryString("ModuleID");
var Eid = $("#PosID").val();
$('#myflow')
.myflow(
{
basePath: "",
restore: eval(""),
tools: {
save: {
onclick: function (data) {
$.ajax({
type: "post",
url: "../Controllers/HumanResource/PubliceShow.ashx?ActionType=AddFlow",
data: {
"data": data,
"moduleid": module,
"Eid": Eid
},
success: function (data) {
// FunctionJson = eval("(" + data + ")"); ;
if (data == 'error') {
layer.alert('流程图保存失败，需要满足开始，结束，任务三个节点同时存在。', {
icon: 2
});
}
if (data == 'waring') {
layer.alert('流程图保存失败。', {
icon: 2
});
}
if (data == 'OK') {
layer.alert('流程图保存成功。', {
icon: 0
});
window.location.href = "ChartFlow.aspx";
}
}
});
}
}
}
});
});
</script>
<style type="text/css">
body
{
margin: 0;
pading: 0;
text-align: left;
font-family: Arial, sans-serif, Helvetica, Tahoma;
font-size: 12px;
line-height: 1.5;
color: black;
background-image: url(../MasterPager/js/myflow-min/img/bg.png);
}
.node
{
width: 70px;
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
}
.mover
{
border: 1px solid #ddd;
}
.selected
{
background-color: #ddd;
}
.state
{
}
#myflow_props table
{
}
#myflow_props th
{
letter-spacing: 2px;
text-align: left;
padding: 6px;
background: #ddd;
}
#myflow_props td
{
background: #fff;
padding: 6px;
}
#pointer
{
background-repeat: no-repeat;
background-position: center;
}
#path
{
background-repeat: no-repeat;
background-position: center;
}
#task
{
background-repeat: no-repeat;
background-position: center;
}
#state
{
background-repeat: no-repeat;
background-position: center;
}
</style>
<section class="content-header">
<h1>
流程图定制
</h1>
</section>
<div ));
break;
case '}':
StringBuilder oPop = stack.Pop();
oGet.Add(oPop.ToString());
stack.Peek().Append(oPop.ToString());
stack.Peek().Append(cPut);
break;
default:
stack.Peek().Append(cPut);
break;
}
}
while (stack.Count > 0)
{
StringBuilder oPop = stack.Pop();
oGet.Add(oPop.ToString());
}
return oGet;
}
要点：当我们将要保存的value取去来时，会发现这是一个稍微比较复杂的json串，或者说是一个不是贴别规范的json串比较合适。
我将任务开始节点的名称取关键字段temp3，temp2,保证生成数据时，能够有唯一条件供我筛选。
下面是将保存在数据库的数据，在显示的截图。
在查看页面就是一个很简单的数据输出，并且不显示其他的图列，属性等信息。
有需要的同学，可以私聊我，给你们源码demo。有好多功能正在研究中，希望大家能够衍生出更好，更实际的功能。