最近做項目要弄工作流程
要找一個流程控件,現在比較好的就是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",//請求方式為getdataType: "json", //返回數據格式為jsonsuccess: 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/

總結

以上是生活随笔為你收集整理的GooFlow .net 工作流程图 jquery 流程 mvc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。