gooflow 自定义流程图
生活随笔
收集整理的這篇文章主要介紹了
gooflow 自定义流程图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
demo鏈接：https://pan.baidu.com/s/1mJ46mlh8v2Q1XnZ8i5DceQ 密碼：0lra
注意：本地直接打開會報錯。
不支持 file地址：?Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.at init (file:///C:/Users/24950/Desktop/gooflow/gooflow.html?size=big&edit=true:122:31)
在webstrom中打開即可。http://localhost:63342/Desktop/gooflow/index.html
?
流程圖原理：
①gooflow相關頁面，功能倒入項目。初始化流程圖，頁面封裝流程圖展示，數據獲取，保存，復制等功能
②頁面創建2個iframe窗口分別指向gooflow.html
? ? 1、小窗口展示流程圖縮略圖不可編輯，可放大
? ? 2、大窗口全屏觀看，可編輯，可縮小
? ? 3、放大功能即打開big iframe,? 縮小即關閉big iframe。 可否編輯功能控制流程圖上面的遮罩層 show/hide
③公共js封裝流程圖相關方法
? ? 1、流程圖后臺數據獲取，保存等
? ? 2、iframe跨頁面操作
// 父 --> 子 loadData：子頁面方法 document.getElementById("iframe").contentWindow.loadData(data.json, data.currentNodes); document.getElementById("bigiframe").contentWindow.loadData(data.json, data.currentNodes);// 子 --> 父 var _iframe = window.parent; var _iframe_big_div =_iframe.document.getElementById('parDiv'); _iframe_big_div.style.display = 'none';window.parent.document.getElementById("bigiframe").contentWindow.jsondata=data.json;?
代碼示例僅展示一部分，詳細請下載代碼查看！
gooflow.html： 流程圖頁面
<!DOCTYPE html> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery網頁在線流程圖</title><meta name="keywords" content="在線流程圖,GooFlow流程圖"><META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"><META HTTP-EQUIV="expires" CONTENT="0"><link rel="stylesheet" type="text/css" href="gooflow/common.css"><!--[if lt IE 9]> <?import namespace="v" implementation="#default#VML" ?><![endif]--><link rel="stylesheet" type="text/css" href="gooflow/GooFlow2.css"><link rel="stylesheet" type="text/css" href="gooflow/default.css"> </head><body><div id="demo"></div><textarea id="result" row="6" style="display: none;"></textarea><div class="role_info"><input id="role_info_name"/><input id="role_info_role"/><input id="role_info_limit"/><input id="role_info_role_val"/><input id="role_info_limit_val"/></div><!-- 節點編輯 --><div class="shade_edit_disabled"></div><div class="shade"></div><div class="pop pop_node"><div class="pop_h"><span class="pop_h_title"><span class="line"></span>節點編輯</span><span class="close" onclick="nodeClose()"></span></div><div class="pop_cont"><div class="pop_cont_box"><p class="title"><span class="line"></span>基本信息</p><div class="pop_one pop450_span4"><span class="xing">*</span><div class="ipt_box"><i>節點名稱：</i><input type="text" id="node_name"></div></div><div class="pop_one pop450_span4"><span class="xing">*</span><div class="ipt_box"><i>節點角色：</i><select id="node_role" class="poprole"><!--<option value="0">團隊成員</option>--><!--<option value="1">團隊負責人</option>--><!--<option value="2">質控負責人</option>--></select></div></div><p class="title mar_top20"><span class="line"></span>選擇節點權限</p><div class="pop_one select_mb"><span class="xing">*</span><div class="ipt_box"><ul class="select_com_ul" id="node_limit"><li><input class="ipt1" value="1" name="node_limit" type="radio"><span class="sel_name">立項管理</span></li><li><input class="ipt1" value="5" name="node_limit" type="radio"><span class="sel_name">立項申請</span></li><li><input class="ipt1" value="9" name="node_limit" type="radio"><span class="sel_name">質評管理</span></li><li><input class="ipt1" value="16" name="node_limit" type="radio"><span class="sel_name">投票</span></li><li><input class="ipt1" value="17" name="node_limit" type="radio"><span class="sel_name">內核委員</span></li><li><input class="ipt1" value="18" name="node_limit" type="radio"><span class="sel_name">內核主任</span></li></ul></div></div></div></div><div class="btn_box"><span class="btn btn_cancle" onclick="nodeClose()">取消</span><span class="btn btn_sure" id="node_save">確定</span></div></div><!-- 編輯流程圖頁面 遮罩層 --><div class="shade_big_disabled"></div><!--<script type="text/javascript" src="gooflow/jquery.js"></script>--> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="gooflow/data2.js"></script> <script type="text/javascript" src="gooflow/GooFunc.js"></script> <script type="text/javascript" src="gooflow/json2.js"></script> <script type="text/javascript" src="gooflow/GooFlow.js"></script> <script type="text/javascript" src="../js/layer/layer.js"></script> <script>var demo, out, width, height, GooFlow_work_auto = false, scale = 1,headBtns, popRole, roles,node_name, node_role , node_limit, node_role_val, node_limit_val;$(document).ready(function(){init();listAuthority();});// 頁面初始化function init(){var url = window.location.href;if(url.indexOf("small") > 0){ // 小窗口流程圖展示scale = 1;width= 735;height= 345;GooFlow_work_auto = true;headBtns = ["save", "undo", "redo","copy","enlarge"];$(".shade_edit_disabled").show();}if(url.indexOf("big") > 0){ // 大窗口流程圖展示scale = 2;var _iframe = window.parent;var _div =_iframe.document.getElementById('parDiv');var width = $(_div).width();var height = $(_div).height();headBtns = ["save", "undo", "redo","copy","narrow"];$(".shade_edit_disabled").hide();};// 系統管理-流程管理頁面 遮罩層隱藏流程圖可編輯，其他頁面遮罩層默認顯示流程圖不可編輯if(url.indexOf("edit") > 0){ $(".shade_big_disabled").hide(); }var property = {width: width,height: height,scale: scale,toolBtns: ["start round", "end round", "task"],haveHead: true,headBtns: headBtns,//如果haveHead=true，則定義HEAD區的按鈕haveTool: true,haveGroup: true,useOperStack: true};var remark = {cursor: "選擇指針",direct: "結點連線",start: "開始結點","end": "結束結點",state: "狀態結點",node: "自動結點",chat: "決策結點",plug: "附加插件",fork: "分支結點","join": "聯合結點","task": "任務結點","complex mix": "復合結點",group: "組織劃分框編輯開關"};demo = $.createGooFlow($("#demo"), property);demo.setNodeRemarks(remark); // demo.clearData();demo.loadData(jsondata);// 小彈窗 流程圖禁止滾輪if(GooFlow_work_auto){ $(".GooFlow_work").css("overflow","hidden"); }roles = getRoles();for(var i=0;i<roles.length;i++){popRole+='<option value="'+ roles[i].role_id +'">'+roles[i].role_name+'</option>';}$("#node_role").append(popRole);// 線程方向彈框var popDirect = '<ul class="popdirect"><li>同意</li><li>拒絕</li><li>棄權</li></ul>';$(".GooFlow").append(popDirect);$(".poprole li").click(function(){$(".poprole li").removeClass("active");$(this).addClass("active");$("textarea").val($(this).html() +" ");$(".poprole").hide();});$(".popdirect li").click(function(){$(".popdirect li").removeClass("active");$(this).addClass("active");$("textarea").val($(this).html() +" ");$(".popdirect").hide();});}// 導出數據function Export() { // console.log(demo.exportData());document.getElementById("result").value = JSON.stringify(demo.exportData()); // console.log(document.getElementById("result").value);return document.getElementById("result").value;}// 獲取角色function getRoles(){var roles;$.ajax({url:"../role/getAllRoles",type: 'POST',async:false,success:function(data){if(data.ret.succeed){roles=data.list;}else{layer.msg(data.ret.retMsg);}}});return roles;}// 加載流程圖數據 渲染流程圖function loadData(json,currentNodes){console.log(json);demo.clearData(); demo.loadData(json,currentNodes); }// 清除流程圖數據function clearData(){ demo.clearData(); }// 流程圖 放大，縮小功能function enlarge(){var _iframe = window.parent;var _div =_iframe.document.getElementById('parDiv');_div.style.display = 'block';Export();}function narrow(){var _iframe = window.parent;var _iframe_big_div =_iframe.document.getElementById('parDiv');_iframe_big_div.style.display = 'none';// 大的流程編輯 縮放時 將數據保存到本地 以供小的流程圖預覽實時 顯示最新流程var data = Export();localStorage.setItem("jsondata",data);if(window.location.href.indexOf("edit")>0)window.parent.lcsave();}function copyFlowModel(modelId){$.ajax({url:"../workflowModel/getWithJson",data:{"id":modelId},type: 'POST',success:function(data){if(data.ret.succeed){console.log(data.json);jsondata=data.json;if(window.parent.document.getElementById("bigiframe")!=undefined&&window.parent.document.getElementById("bigiframe")!=null){window.parent.document.getElementById("bigiframe").contentWindow.jsondata=data.json;}layer.msg("成功復制到創建面板");}else{layer.msg(data.ret.retMsg);}}});}function loadCopy(){loadData(jsondata);Export();if(window.parent.document.getElementById("bigiframe")!=undefined&&window.parent.document.getElementById("bigiframe")!=null){console.log(window.parent.document.getElementById("bigiframe"));console.log('jsondata= '+jsondata);window.parent.document.getElementById("bigiframe").contentWindow.loadData(jsondata);window.parent.document.getElementById("bigiframe").contentWindow.Export();}}function bindCopy(modelId){$("#copy").click(function(){copyFlowModel(modelId);});}function unbindCopy(modelId){$("#copy").unbind();}// 節點窗口按鈕操作function nodeClose(){$(".shade,.pop_node").hide();}// 雙擊獲取節點信息function getNodeInfo(id){var jsonDate = JSON.parse( JSON.stringify(demo.exportData()));var nodeInfo = jsonDate.nodes[id];$("#node_name").val(nodeInfo.name);$("#node_role").val(nodeInfo.role);$('#node_limit input').prop("checked",false);$('#node_limit input[value="'+ nodeInfo.limit +'"]').prop("checked",true);}function listAuthority(){$.ajax({url:"../authority/getDiffAuthority",type: 'POST',async:false,success:function(data){if(data.ret.succeed){var authorities=data.clist;$('#node_limit').empty(); for(var i=0;i<authorities.length;i++){var authority=authorities[i];var html='<li><input class="ipt1" value="'+authority.authority_short_name+'" name="node_limit" type="radio"><span class="sel_name">'+authority.authority_name+'</span></li>'$('#node_limit').append(html);}}else{layer.msg(data.ret.retMsg);}}});} </script></body> </html>data2.js:? 流程圖數據結構示例，默認此數據展示
GooFunc.js，json2.js：? 流程圖默認設置，無需更改
GooFlow.js： 流程圖功能，展示相關，可自行優化項目需要
上面百度云項目優化的地方：
①頭部，左側按鈕的優化
②? 添加節點? 樣式控制
③節點，連線? 單擊雙擊事件，與節點信息彈框相關聯
//綁定雙擊編輯事件 this.$workArea.delegate(".GooFlow_item > .span","dblclick",{inthis:this},function(e){var oldTxt=this.innerHTML;var This=e.data.inthis;var id=this.parentNode.id;var t=getElCoordinate(This.$workArea[0]);// 結束節點 禁止打開彈框if(oldTxt.indexOf("歸檔") > 0) return;This.$textArea.data("id",This.$focus).focus();This.$workArea.parent().one("mousedown",function(e){ // 僅第一次雙擊不觸發if(e.button==2)return false;This.$textArea.data("id",This.$focus).focus();node_name = $("#node_name").val();node_role = $("#node_role").val();node_limit = $("#node_limit input:checked").val();node_role_val = $('#node_role option[value="'+node_role+'"]').html();node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);This.$textArea.val("").removeData("id").hide();$(".shade,.pop_node").hide();});// 角色彈框 圓圈按鈕角色選擇$(".shade,.pop_node").show();getNodeInfo(This.$textArea.data("id"));$(".pop_node .btn_sure").click(function(e){if(e.button==2)return false;node_name = $("#node_name").val();node_role = $("#node_role").val();node_limit = $("#node_limit input:checked").val();node_role_val = $('#node_role option[value="'+node_role+'"]').html();node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();if(!node_name) { layer.msg('請輸入節點名稱'); return; }if(!node_role) { layer.msg('請選擇節點角色'); return; }if(!node_limit) { layer.msg('請選擇節點權限'); return; }This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);This.$textArea.val("").removeData("id").hide();$(".shade,.pop_node").hide(); });}); this.$workArea.delegate(".ico + td","dblclick",{inthis:this},function(e){var oldTxt=this.innerHTML;var This=e.data.inthis;var id=$(this).parents(".GooFlow_item").attr("id");var t=getElCoordinate(This.$workArea[0]);This.$textArea.data("id",This.$focus).focus();This.$workArea.parent().one("mousedown",function(e){ // 僅第一次雙擊不觸發if(e.button==2)return false;This.$textArea.data("id",This.$focus).focus();node_name = $("#node_name").val();node_role = $("#node_role").val();node_limit = $("#node_limit input:checked").val();node_role_val = $('#node_role option[value="'+node_role+'"]').html();node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);This.$textArea.val("").removeData("id").hide();$(".shade,.pop_node").hide();});// 角色彈框 方框按鈕角色選擇$(".shade,.pop_node").show();getNodeInfo(This.$textArea.data("id"));$(".pop_node .btn_sure").click(function(e){if(e.button==2)return false;node_name = $("#node_name").val();node_role = $("#node_role").val();node_limit = $("#node_limit input:checked").val();node_role_val = $('#node_role option[value="'+node_role+'"]').html();node_limit_val = $('#node_limit input[value="'+node_limit+'"]').siblings("span").html();if(!node_name) { layer.msg('請輸入節點名稱'); return; }if(!node_role) { layer.msg('請選擇節點角色'); return; }if(!node_limit) { layer.msg('請選擇節點權限'); return; }This.setName(This.$textArea.data("id"),node_name,"node", node_role, node_role_val, node_limit,node_limit_val);This.$textArea.val("").removeData("id").hide();$(".shade,.pop_node").hide();});});1.小窗口預覽
<iframe class="spinfo sp_lc" src="gooflow.html?size=small" name="iframe" id="iframe" frameborder="no" scrolling="no"></iframe>2.全屏大窗口查看? 可編輯
// 流程圖大窗口 在公共js里添加，不需要每個html頁面都添加一次 if (window.location.href.indexOf("xtgl_lcgl") > 0) { // 流程圖可編輯大窗口var popBigLcDiv = '<div class="pop_big_lc" id="parDiv"><iframe name="bigiframe" id="bigiframe" class="spinfo sp_lc" src="gooflow.html?size=big:edit=true" frameborder="no" scrolling="no"></iframe></div>'; } else { // 流程圖不可編輯大窗口var popBigLcDiv = '<div class="pop_big_lc" id="parDiv"><iframe name="bigiframe" id="bigiframe" class="spinfo sp_lc" src="gooflow.html?size=big" frameborder="no" scrolling="no"></iframe></div>'; }3.全屏大窗口? 每個節點編輯
iframe 跨頁面操作示例如下：
父頁面操作子頁面：
// 流程圖 保存 function lcsave() {var datajson = JSON.parse(localStorage.getItem("jsondata"));document.getElementById("iframe").contentWindow.loadData(datajson); } /*** 展示流程進度圖*/ function showCommonFlowProgress(project_id, type) {// var project_id = $("#project_name")[0].lang;$.ajax({url : "../workflowModel/getWorkflowProgress",data : {project_id : project_id,workflow_type : type},type : "POST",success : function(data) {if (data.ret.succeed) {document.getElementById("iframe").contentWindow.loadData(data.json, data.currentNodes);document.getElementById("bigiframe").contentWindow.loadData(data.json, data.currentNodes);} else {// layer.msg(data.ret.retMsg);document.getElementById("iframe").contentWindow.clearData();document.getElementById("bigiframe").contentWindow.clearData();}}}); }子頁面操作父頁面：
// 流程圖 放大，縮小功能function enlarge(){var _iframe = window.parent;var _div =_iframe.document.getElementById('parDiv');_div.style.display = 'block';Export();}function narrow(){var _iframe = window.parent;var _iframe_big_div =_iframe.document.getElementById('parDiv');_iframe_big_div.style.display = 'none';// 大的流程編輯 縮放時 將數據保存到本地 以供小的流程圖預覽實時 顯示最新流程var data = Export();localStorage.setItem("jsondata",data);if(window.location.href.indexOf("edit")>0)window.parent.lcsave();}?
總結
以上是生活随笔為你收集整理的gooflow 自定义流程图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 3月最新彩虹发卡网完整运营版+高仿优云宝
- 下一篇： std::make_shared＜T＞/