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/