GooFlow .net 工作流程图 jquery 流程 mvc

最近做项目要弄工作流程
要找一个流程控件,现在比较好的就是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,分享链接出来.
也可以直接通过来源联系我

来源:http://www.zhruanjian.com/