最近做项目要弄工作流程
要找一个流程控件,现在比较好的就是GooFlow 网上有些列子,大部分都不太完全
看我的
左边就是流程图的一些图标
开始,结束等节点,线条可以直接吸附,
就是画完流程图之后,点击保存就把所有的数据保存为json数据字符串.
我是保存到数据库,流程建立完成之后
调用json就可以还原流程图.
<script>
var flowData = {};
$(function () {
initialPage();
})
//初始化页面
function initialPage() {
initFlowInfo();
bindingFlow();
}
function bindingFrm() {
if (frmData.FrmName == undefined) {
return false;
}
return true;
}
/*=========流程设计(begin)==================================================================*/
var FlowDesignPanel;
var FlowDesignObject;//
var LineId;
var nodePramData = [];
function initFlowInfo() {
FlowDesignPanel = $('#FlowPanel').flowdesign({
height: ($(window).height() - 37),
widht: 1000,
OpenNode: function (object) {
FlowDesignObject = object;
if (object.$nodeData[object.$focus].type == 'startround') {
return false;
}
dialogOpen({
id: "FlowLineForm",
title: '节点设置【' + object.$nodeData[object.$focus].name + '】',
url: '/FlowManage/FlowDesign/FlowNodeForm',
width: "750px",
height: "430px",
callBack: function (iframeId) {
top.frames[iframeId].AcceptClick();
}
});
},
OpenLine: function (id, object) {
FlowDesignObject = object;
LineId = id;
var _line = object.$lineData[id];
var _fromNode = object.$nodeData[_line.from];
if (_fromNode.type == "shuntnode") {
dialogTop("前一个节点是分流节点无法设置流转条件", "error");
return false;
}
dialogOpen({
id: "FlowNodeForm",
title: '流转条件设置',
url: '/FlowManage/FlowDesign/FlowLineForm',
width: "750px",
height: "430px",
callBack: function (iframeId) {
top.frames[iframeId].AcceptClick();
}
});
}
});
}
function setFlowInfo(data) {
FlowDesignPanel.loadData(data);
}
function callBackNode(id, data, _nodePramData) {
nodePramData = _nodePramData;
FlowDesignPanel.SetNodeEx(id, data);
}
function callBackLine(id, data) {
FlowDesignPanel.SetLineEx(id, data);
}
/*=========流程设计(end)====================================================================*/
/*=========创建完成(begin)==================================================================*/
function finishbtn() {
var data = JSON.stringify({ "Flow": FlowDesignPanel.exportData() });//获取控件数据,绑定控件数据
}
function LoadTest() {
$.ajax({
url: "flow.js",//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function (data) {//请求成功完成后要执行的方法
setFlowInfo(data.Flow);
}
})
}
/*=========创建完成(end)====================================================================*/
</script>
<div id="FlowPanel" style="margin: 0px;">
</div>
<div class="form-button" id="wizard-actions">
<a id="btn_caogao" onclick="LoadTest();" class="btn btn-info">加载文件</a>
<a id="btn_finish" class="btn btn-success" onclick="finishbtn();">保存</a>
</div>
这个就是核心的脚本代码,具体全部源码,等和项目切割之后,做成demo,分享链接出来.
也可以直接通过来源联系我