gooflow的流程设计
為何使用gooflow:1、兼容性好
? ? ? ? ? ? ? ? ? ? ? ?2、擴(kuò)展點(diǎn)很多可以個(gè)性化設(shè)計(jì)
? ? ? ? ? ? ? ? ? ? ? ?3、配有api文檔
? ? ? ? ? ? ? ? ? ? ? ?4、json格式的數(shù)據(jù)傳輸
由于最近項(xiàng)目需要，急需設(shè)計(jì)一個(gè)流程，考慮到時(shí)間問(wèn)題，和用戶(hù)個(gè)性化的需求，沒(méi)辦法跟現(xiàn)在項(xiàng)目的后臺(tái)集成，所以考慮到選擇一款jquery插件，并通過(guò)存儲(chǔ)過(guò)程來(lái)集成現(xiàn)在的業(yè)務(wù)模塊。
?
直接上圖了：
雙擊節(jié)點(diǎn)可以選擇人員
雙擊連接線可以選擇條件
使用gooflow版本為0.4的 網(wǎng)上可以搜到 另外當(dāng)前版本有些bug需要自己改。需要提供幫助的可以加我QQ:512948935
gooflow版本為0.6
后臺(tái)使用的是mvc+spring+NHibernate,主要是保存比較麻煩。
?前臺(tái)js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | <script type="text/javascript"> ????var?property = { ????????toolBtns: ["start",?"end",?"task"], ????????haveHead:?true, ????????headBtns: ["save",?"undo",?"redo",?"reload"],?//如果haveHead=true，則定義HEAD區(qū)的按鈕 ????????haveTool:?true, ????????haveGroup:?true, ????????useOperStack:?true ????}; ????var?remark = { ????????cursor:?"選擇指針", ????????direct:?"轉(zhuǎn)換連線", ????????start:?"開(kāi)始結(jié)點(diǎn)", ????????end:?"結(jié)束結(jié)點(diǎn)", ????????task:?"任務(wù)結(jié)點(diǎn)", ????????group:?"組織劃分框編輯開(kāi)關(guān)" ????}; ????var?gooFlow, focusId, flow_title, flowID; ????$(function?() { ????????gooFlow = $.createGooFlow($("#flow"), property); ????????flow_title = getUrlParam1("title"); ????????flowID = getUrlParam("flowID"); ????????if?(flow_title !=?"") { ????????????//自適應(yīng)調(diào)整 ????????????gooFlow.reinitSize($(this).width() - 5, $(parent).height() - 25); ????????????gooFlow.setTitle(flow_title +?"·流程繪制"); ????????????parent.$('#div_layout').layout('panel',?'center').panel({ ????????????????onResize:?function?(width, height) { ????????????????????gooFlow.reinitSize(width - 5, height - 30); ????????????????} ????????????}); ????????} ????????else ????????????gooFlow.reinitSize($(this).width() - 5, $(this).height() - 5); ????????if?(flowID ==?"") flowID = 0; ????????gooFlow.setNodeRemarks(remark); ????????//新建流程 ????????gooFlow.onBtnNewClick =?function?() { ????????????gooFlow.clearData(); ????????} ????????//保存流程 ????????gooFlow.onBtnSaveClick =?function?() { ????????????var?h = gooFlow.$bgDiv.height(); ????????????$("<div class=\"datagrid-mask\"></div>").css({ display:?"block", width:?"100%", height: h }).appendTo(gooFlow.$bgDiv); ????????????$("<div class=\"datagrid-mask-msg\"></div>").html("數(shù)據(jù)正在保存中，請(qǐng)稍候……").appendTo(gooFlow.$bgDiv).css({ ????????????????display:?"block", ????????????????left: (gooFlow.$bgDiv.width() - 200) / 2, ????????????????top: (h - 45) / 2 ????????????}); ????????????var?obj = gooFlow.exportAlter(); ????????????//節(jié)點(diǎn) ????????????var?nodeData =?""; ????????????for?(var?i?in?obj.nodes) { ????????????????var?id = gooFlow.$nodeData[i].ID ==?null?? 0 : gooFlow.$nodeData[i].ID; ????????????????var?userID = gooFlow.$nodeData[i].userID ==?null?? 0 : gooFlow.$nodeData[i].userID; ????????????????nodeData +=?'{"ID": '?+ id +?'' ?????????????????????????????????????+?',"FlowID": '?+ flowID +?'' ?????????????????????????????????????+?',"NodeID": "'?+ i +?'"' ?????????????????????????????????????+?',"UserID": "'?+ userID +?'"' ?????????????????????????????????????+?',"UserName": "'?+ gooFlow.$nodeData[i].name +?'"' ?????????????????????????????????????+?',"NodeType":? "'?+ gooFlow.$nodeData[i].type +?'"' ?????????????????????????????????????+?',"NodeLeft":? '?+ gooFlow.$nodeData[i].left +?'' ?????????????????????????????????????+?',"NodeTop":? '?+ gooFlow.$nodeData[i].top +?'' ?????????????????????????????????????+?',"NodeWidth":? '?+ gooFlow.$nodeData[i].width +?'' ?????????????????????????????????????+?',"NodeHeight":? '?+ gooFlow.$nodeData[i].height +?'' ?????????????????????????????????????+?',"Marked": false},'; ????????????} ????????????if?(nodeData !=?"") { ????????????????nodeData =?"["?+ $.trimend(nodeData,?',') +?"]"; ????????????} ????????????//連接線 ????????????var?lineData =?""; ????????????for?(var?i?in?obj.lines) { ????????????????var?id = gooFlow.$lineData[i].ID ==?null?? 0 : gooFlow.$lineData[i].ID; ????????????????var?conditionID = gooFlow.$lineData[i].conditionID ==?null?? 0 : gooFlow.$lineData[i].conditionID; ????????????????var?lineM = gooFlow.$lineData[i].M ==?null?? 0 : gooFlow.$lineData[i].M; ????????????????lineData +=?'{"ID": '?+ id +?'' ??????????????????????????????????+?',"FlowID": '?+ flowID +?'' ?????????????????????????????????????+?',"LineID": "'?+ i +?'"' ?????????????????????????????????????+?',"ConditionID": '?+ conditionID +?'' ?????????????????????????????????????+?',"ConditionName": "'?+ gooFlow.$lineData[i].name +?'"' ?????????????????????????????????????+?',"LineType":? "'?+ gooFlow.$lineData[i].type +?'"' ?????????????????????????????????????+?',"LineFrom":? "'?+ gooFlow.$lineData[i].from +?'"' ?????????????????????????????????????+?',"LineTo":? "'?+ gooFlow.$lineData[i].to +?'"' ?????????????????????????????????????+?',"LineM":? '?+ lineM +?'' ?????????????????????????????????????+?',"Marked": false},'; ????????????} ????????????if?(lineData !=?"") { ????????????????lineData =?"["?+ $.trimend(lineData,?',') +?"]"; ????????????} ????????????//區(qū)域 ????????????var?areaData =?""; ????????????for?(var?i?in?obj.areas) { ????????????????var?id = gooFlow.$areaData[i].ID ==?null?? 0 : gooFlow.$areaData[i].ID; ????????????????areaData +=?'{"ID": '?+ id +?'' ?????????????????????????????????????+?',"FlowID": '?+ flowID +?'' ?????????????????????????????????????+?',"AreaID": "'?+ i +?'"' ?????????????????????????????????????+?',"AreaName":? "'?+ gooFlow.$areaData[i].name +?'"' ?????????????????????????????????????+?',"AreaLeft":? '?+ gooFlow.$areaData[i].left +?'' ?????????????????????????????????????+?',"AreaTop":? '?+ gooFlow.$areaData[i].top +?'' ?????????????????????????????????????+?',"AreaWidth":? '?+ gooFlow.$areaData[i].width +?'' ?????????????????????????????????????+?',"AreaHeight":? '?+ gooFlow.$areaData[i].height +?'' ?????????????????????????????????????+?',"AreaColor":? "'?+ gooFlow.$areaData[i].color +?'"' ?????????????????????????????????????+?',"Marked": false},'; ????????????} ????????????if?(areaData !=?"") { ????????????????areaData =?"["?+ $.trimend(areaData,?',') +?"]"; ????????????} ????????????if?(nodeData ==?""?&& lineData ==?""?&& areaData ==?"") { ????????????????$('.datagrid-mask-msg').remove(); ????????????????$('.datagrid-mask').remove(); ????????????????return; ????????????} ????????????$.ajax({ ????????????????type:?"post", ????????????????url:?"/HR/BacthSave", ????????????????data: { node: nodeData, line: lineData, area: areaData }, ????????????????success:?function?(data) { ????????????????????if?(data.status == 1) { ????????????????????????jqAlert('保存成功.',?'info',?"reload"); ????????????????????} ????????????????????else ????????????????????????jqAlert('保存失敗:'?+ data,?'error') ????????????????????$('.datagrid-mask-msg').remove(); ????????????????????$('.datagrid-mask').remove(); ????????????????} ????????????}); ????????} ????????//刷新 ????????gooFlow.onFreshClick =?function?() { ????????????location.reload(); ????????} ????????//單元節(jié)點(diǎn)雙擊事件 ????????gooFlow.$workArea.delegate(".ico + td",?"dblclick", { inthis: gooFlow },?function?(e) { ????????????var?newId = $(this).parents(".GooFlow_item").attr("id"); ????????????var?$frame = $("#frame_choose_aud"); ????????????if?($frame.attr("src") == undefined) { ????????????????focusId = newId; ????????????????$frame.attr("src",?"/HR/BaseFlowChooseEmp"); ????????????} ????????????else?{ ????????????????if?(focusId != newId) { ????????????????????focusId = newId; ????????????????????window.frames["choose_aud"].initData(); ????????????????} ????????????} ????????????$("#div_win_choose_aud").window('open'); ????????}); ????????//單元連接線雙擊事件 ????????var?tmpClk =?"PolyLine"; ????????if?(GooFlow.prototype.useSVG !=?"") ????????????tmpClk =?"g"; ????????$(gooFlow.$draw).delegate(tmpClk,?"dblclick", { inthis: gooFlow },?function?(e) { ????????????if?(GooFlow.prototype.useSVG !=?"") { ????????????????var?$frame = $("#frame_choose_con"); ????????????????if?($frame.attr("src") == undefined) { ????????????????????focusId =?this.id; ????????????????????$frame.attr("src",?"/HR/BaseFlowCondition?typeID="?+ getUrlParam("typeID")); ????????????????} ????????????????else?{ ????????????????????if?(focusId !=?this.id) { ????????????????????????focusId =?this.id; ????????????????????????window.frames["choose_con"].unselect(); ????????????????????} ????????????????} ????????????????$("#div_win_choose_con").window('open'); ????????????} ????????}); ????????//操作單元?jiǎng)h除事件 ????????gooFlow.onItemDel =?function?(id, type) { ????????????var?delItem = gooFlow.getItemInfo(id, type); ????????????if?(delItem.ID !=?null) { ????????????????uiConfirm("確定要?jiǎng)h除該單元嗎.",?function?() { ????????????????????$.post("/HR/DeleteFlowItem", {?"id": id,?"type": type },?function?(data) { ????????????????????????if?(data.status == 1) { ????????????????????????????delItem.ID =?null; ????????????????????????????if?(type ==?"node") ????????????????????????????????gooFlow.delNode(id); ????????????????????????????else?if?(type ==?"line") ????????????????????????????????gooFlow.delLine(id); ????????????????????????????else?if?(type ==?"area") ????????????????????????????????gooFlow.delArea(id); ????????????????????????????return?true; ????????????????????????} ????????????????????????else ????????????????????????????jqAlert('刪除失敗:'?+ data,?'error') ????????????????????}); ????????????????}); ????????????} ????????????else ????????????????return?true ????????} ????????//初始化人員選擇窗體 ????????showMyWindow($("#div_win_choose_aud"),?'選擇人員信息',?'icon-edit',?'', 900, 450,?true); ????????//初始化人員選擇窗體 ????????showMyWindow($("#div_win_choose_con"),?'選擇條件信息',?'icon-edit',?'', 900, 450,?true); ????????//加載數(shù)據(jù) ????????var?h = gooFlow.$bgDiv.height(); ????????$("<div class=\"datagrid-mask\"></div>").css({ display:?"block", width:?"100%", height: h }).appendTo(gooFlow.$bgDiv); ????????$("<div class=\"datagrid-mask-msg\"></div>").html("圖形正在加載中，請(qǐng)稍候……").appendTo(gooFlow.$bgDiv).css({ ????????????display:?"block", ????????????left: (gooFlow.$bgDiv.width() - 200) / 2, ????????????top: (h - 45) / 2 ????????}); ????????var?para = {?"type":?"get",?"url":?"/HR/LoadWorkArea?flowID="?+ flowID,?"success": onLoadSuccess,?"error": onLoadError }; ????????gooFlow.loadDataAjax(para); ????}); ????function?onLoadSuccess(msg) { ????????$('.datagrid-mask-msg').remove(); ????????$('.datagrid-mask').remove(); ????} ????function?onLoadError(status, errorThrown) { ????????$('.datagrid-mask-msg').remove(); ????????$('.datagrid-mask').remove(); ????} ????function?backAudChoose(row) { ????????gooFlow.setName(focusId, row.user_truename +?"("?+ row.user_no +?")",?"node"); ????????var?focusNode = gooFlow.getItemInfo(focusId,?"node"); ????????focusNode.name = row.user_truename +?"("?+ row.user_no +?")"; ????????focusNode.userID = row.ID; ????????$("#div_win_choose_aud").window('close'); ????} ????function?backConChoose(row) { ????????gooFlow.setName(focusId, row.ConditionName,?"line") ????????var?focusLine = gooFlow.getItemInfo(focusId,?"line"); ????????focusLine.name = row.ConditionName; ????????focusLine.conditionID = row.ID; ????????$("#div_win_choose_con").window('close'); ????} </script> |
后臺(tái)處理
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | #region BaseFlowPicture ???????public?ActionResult BaseFlowPicture() ???????{ ???????????return?View(); ???????} ???????public?ActionResult BacthSave(string?node =?"",?string?line =?"",?string?area =?"") ???????{ ???????????try ???????????{ ???????????????if?(node !=?"") ???????????????{ ???????????????????List<Q_HR_WorkFlow_Node> nodes = JSONStringToList<Q_HR_WorkFlow_Node>(node); ???????????????????int?s = nodes.Where(c => c.NodeType ==?"start").Count(); ???????????????????int?e = nodes.Where(c => c.NodeType ==?"end").Count(); ???????????????????if?(s != 1) ???????????????????????throw?new?Exception("請(qǐng)?jiān)O(shè)置一個(gè)開(kāi)始節(jié)點(diǎn)."); ???????????????????if?(e != 1) ???????????????????????throw?new?Exception("請(qǐng)?jiān)O(shè)置一個(gè)結(jié)束節(jié)點(diǎn)."); ???????????????????Q_HR_WorkFlow_NodeManage.BatchSave(nodes); ???????????????} ???????????????if?(line !=?"") ???????????????{ ???????????????????List<Q_HR_WorkFlow_Line> lines = JSONStringToList<Q_HR_WorkFlow_Line>(line); ???????????????????Q_HR_WorkFlow_LineManage.BatchSave(lines); ???????????????} ???????????????if?(area !=?"") ???????????????{ ???????????????????List<Q_HR_WorkFlow_Area> areas = JSONStringToList<Q_HR_WorkFlow_Area>(area); ???????????????????Q_HR_WorkFlow_AreaManage.BatchSave(areas); ???????????????} ???????????????return?Json(new?{ status = 1 }, JsonRequestBehavior.AllowGet); ???????????} ???????????catch?(Exception ex) ???????????{ ???????????????return?Content(ex.Message); ???????????} ???????} ???????public?string?LoadWorkArea(int?flowID = 0) ???????{ ???????????DataTable nodes = Q_HR_WorkFlow_NodeManage.GetList(flowID); ???????????DataTable lines = Q_HR_WorkFlow_LineManage.GetList(flowID); ???????????IList<Q_HR_WorkFlow_Area> areas = Q_HR_WorkFlow_AreaManage.GetList(flowID); ???????????string?jsonStr =?"{"; ???????????string?alt; ???????????//jsonStr += "\"initNum\":" + Q_HR_WorkFlow_NodeManage.GetInitNum() + ","; ???????????if?(nodes.Rows.Count > 0) ???????????{ ???????????????jsonStr +=?"\"nodes\":{"; ???????????????foreach?(DataRow row?in?nodes.Rows) ???????????????{ ???????????????????alt =?"false"; ???????????????????if?(row["NodeType"].ToString() ==?"start"?|| row["NodeType"].ToString() ==?"end") ???????????????????????alt =?"true"; ???????????????????jsonStr +=?"\""?+ row["NodeID"] +?"\":{" ???????????????????????????+?"\"ID\":"?+ row["ID"] +?"" ???????????????????????????+?",\"name\":\""?+ row["UserName"] +?"("?+ row["user_no"] +?")\"" ???????????????????????????+?",\"userID\":"?+ row["UserID"] +?"" ???????????????????????????+?",\"type\":\""?+ row["NodeType"] +?"\"" ???????????????????????????+?",\"left\":"?+ row["NodeLeft"] +?"" ???????????????????????????+?",\"top\":"?+ row["NodeTop"] +?"" ???????????????????????????+?",\"width\":"?+ row["NodeWidth"] +?"" ???????????????????????????+?",\"height\":"?+ row["NodeHeight"] +?"" ???????????????????????????+?",\"alt\":"?+ alt +?"" ???????????????????????????+?",\"mark\":"?+ row["Marked"].ToString().ToLower() +?"" ???????????????????????????+?"},"; ???????????????} ???????????????jsonStr = jsonStr.TrimEnd(',') +?"},"; ???????????} ???????????if?(lines.Rows.Count > 0) ???????????{ ???????????????jsonStr +=?"\"lines\":{"; ???????????????foreach?(DataRow row?in?lines.Rows) ???????????????{ ???????????????????jsonStr +=?"\""?+ row["LineID"] +?"\":{" ???????????????????????????+?"\"ID\":"?+ row["ID"] +?"" ???????????????????????????+?",\"name\":\""?+ row["ConditionName"] +?"\"" ???????????????????????????+?",\"conditionID\":"?+ row["ConditionID"] +?"" ???????????????????????????+?",\"type\":\""?+ row["LineType"] +?"\"" ???????????????????????????+?",\"from\":\""?+ row["LineFrom"] +?"\"" ???????????????????????????+?",\"to\":\""?+ row["LineTo"] +?"\"" ???????????????????????????+?",\"M\":"?+ row["LineM"] +?"" ???????????????????????????+?",\"mark\":"?+ row["Marked"].ToString().ToLower() +?"" ???????????????????????????+?"},"; ???????????????} ???????????????jsonStr = jsonStr.TrimEnd(',') +?"},"; ???????????} ???????????if?(areas.Count > 0) ???????????{ ???????????????jsonStr +=?"\"areas\":{"; ???????????????foreach?(Q_HR_WorkFlow_Area area?in?areas) ???????????????{ ???????????????????jsonStr +=?"\""?+ area.AreaID +?"\":{" ???????????????????????????+?"\"ID\":"?+ area.ID +?"" ???????????????????????????+?",\"name\":\""?+ area.AreaName +?"\"" ???????????????????????????+?",\"left\":"?+ area.AreaLeft +?"" ???????????????????????????+?",\"top\":"?+ area.AreaTop +?"" ???????????????????????????+?",\"width\":"?+ area.AreaWidth +?"" ???????????????????????????+?",\"height\":"?+ area.AreaHeight +?"" ???????????????????????????+?",\"color\":\""?+ area.AreaColor +?"\"" ???????????????????????????+?"},"; ???????????????} ???????????????jsonStr = jsonStr.TrimEnd(',') +?"},"; ???????????} ???????????jsonStr = jsonStr.TrimEnd(',') +?"}"; ???????????return?jsonStr; ???????} ???????public?ActionResult DeleteFlowItem(string?id,?string?type) ???????{ ???????????try ???????????{ ???????????????if?(type.Equals("node")) ???????????????????Q_HR_WorkFlow_NodeManage.DeleteFlowNode(id, type); ???????????????else?if?(type.Equals("line")) ???????????????????Q_HR_WorkFlow_LineManage.DeleteFlowLine(id, type); ???????????????else?if?(type.Equals("area")) ???????????????????Q_HR_WorkFlow_AreaManage.DeleteFlowArea(id, type); ???????????????return?Json(new?{ status = 1 }, JsonRequestBehavior.AllowGet); ???????????} ???????????catch?(Exception ex) ???????????{ ???????????????return?Content(ex.Message); ???????????} ???????} ???????#endregion |
?
| 屬性名稱(chēng) | 作用 |
| $id | 裝載整個(gè)UI的DOM對(duì)象的ID。 |
| $bgDiv | 最父框架的DIV。 |
| $tool | 左側(cè)工具欄JQ對(duì)象。 |
| $head | 頂部欄標(biāo)題標(biāo)簽及工具欄按鈕。 |
| $title | 載入的流程圖的名稱(chēng)。 |
| $nodeRemark | 左側(cè)工具欄中每一種結(jié)點(diǎn)或按鈕的說(shuō)明文字,JSON格式,key為按鈕類(lèi)型名,value為用戶(hù)自定義文字說(shuō)明。 |
| $nowType | 當(dāng)前要繪制的對(duì)象類(lèi)型，開(kāi)始時(shí)為“cursor”，即不繪制任何元素，只是作為鼠標(biāo)指針進(jìn)行元素選定。 |
| $lineData={} | 轉(zhuǎn)換線數(shù)據(jù)Map集，以id為key,value為詳細(xì)數(shù)據(jù)JSON對(duì)象。 |
| $lineCount=0 | 轉(zhuǎn)換線數(shù)據(jù)的數(shù)量。 |
| $nodeData={} | 節(jié)點(diǎn)數(shù)據(jù)Map集，以id為key,value為詳細(xì)數(shù)據(jù)JSON對(duì)象。 |
| $nodeCount=0 | 節(jié)點(diǎn)數(shù)據(jù)的數(shù)量。 |
| $areaData={} | 分組區(qū)數(shù)據(jù)Map集，以id為key,value為詳細(xì)數(shù)據(jù)JSON對(duì)象。 |
| $areaCount=0 | 分組區(qū)數(shù)據(jù)的數(shù)量。 |
| $lineDom={} | 轉(zhuǎn)換線DOM展示對(duì)象Map集，以id為key,value為詳細(xì)在DOM對(duì)象。 |
| $nodeDom={} | 節(jié)點(diǎn)JQ展示對(duì)象Map集，以id為key,value為詳細(xì)在JO對(duì)象。 |
| $areaDom={} | 分組區(qū)JQ展示對(duì)象Map集，以id為key,value為詳細(xì)在JO對(duì)象。 |
| $max | 計(jì)算默認(rèn)ID值的起始SEQUENCE，默認(rèn)不填時(shí)為1。 |
| $focus | 當(dāng)前被選定的結(jié)點(diǎn)/轉(zhuǎn)換線ID,如果沒(méi)選中或者工作區(qū)被清空,則為""。 |
| $cursor | 鼠標(biāo)指針在工作區(qū)內(nèi)的樣式，初始時(shí)為default。 |
| $editable | 當(dāng)前工作區(qū)是否可編輯，即是編輯模式還是僅瀏覽模式。 |
| $workArea | 裝載結(jié)點(diǎn)/線條/分組區(qū)域的工作區(qū)。 |
| $draw | 畫(huà)矢量線條的容器，處于工作區(qū)中。 |
| $group | 僅用來(lái)裝配分組區(qū)域DOM元素的容器，處于工作區(qū)中。 |
| $ghost | 專(zhuān)門(mén)用在移動(dòng)、重置大小等操作時(shí)，給用戶(hù)操作的半透明浮動(dòng)區(qū)。 |
| $textArea | 雙擊操作對(duì)象后出現(xiàn)的浮動(dòng)文本域，用來(lái)寫(xiě)重命名方法setName所需的新名稱(chēng)傳參。 |
| $lineMove | 操作移動(dòng)折線的中段時(shí)用到的浮動(dòng)DIV |
| $lineOper | 選定一條轉(zhuǎn)換線后出現(xiàn)的浮動(dòng)操作欄，有改變線的樣式和刪除線等按鈕。 |
| //以下是當(dāng)初始化的參數(shù)property.useOperStack=true且$editable=true時(shí),才存在的屬性: | |
| $undoStack=[] | “撤銷(xiāo)操作”棧。 |
| $redoStack=[] | 重做操作棧。 |
| $isUndo | 事務(wù)操作標(biāo)志位，內(nèi)部調(diào)用 |
| $deletedItem={} | 在流程圖的編輯操作中被刪除掉的元素ID集合,元素ID為KEY,元素類(lèi)型(node,line.area)為VALUE |
?
[GooFlow對(duì)象供使用者調(diào)用的方法集]
| 方法名稱(chēng) | 作用 |
| setNodeRemarks(remark) | 設(shè)定左側(cè)工具欄中每一種結(jié)點(diǎn)或按鈕的說(shuō)明文字,傳參是JSON格式,key為按鈕類(lèi)型名,value為用戶(hù)自定義文字說(shuō)明。 |
| switchToolBtn(type) | 切換左邊工具欄按鈕,傳參type表示切換成哪種類(lèi)型的按鈕 |
| addNode(id,json) | 增加一個(gè)結(jié)點(diǎn),傳參json內(nèi)容結(jié)構(gòu)與$nodeData的每個(gè)屬性單元一樣。 |
| getItemInfo(id,type) | 根據(jù)id這個(gè)KEY，和要獲取的數(shù)據(jù)類(lèi)型type(有”node”,”line”,”area”三種取值),返回相應(yīng)的結(jié)點(diǎn)json數(shù)據(jù)單元 |
| blurItem() | 取消所有結(jié)點(diǎn)/連線被選定的狀態(tài) |
| focusItem(id,bool) | 選定某個(gè)結(jié)點(diǎn)/轉(zhuǎn)換線；傳參bool:TRUE決定了要觸發(fā)選中事件，FALSE則不觸發(fā)選中事件，多用在程序內(nèi)部調(diào)用。 |
| moveNode(id,left,top) | 移動(dòng)一個(gè)結(jié)點(diǎn)到一個(gè)新的位置 |
| setName(id,name,type) | 設(shè)置結(jié)點(diǎn)/連線/分組區(qū)域的文字信息；傳參id為序列，name為新的名稱(chēng)，type為更名對(duì)象的數(shù)據(jù)類(lèi)型(有”node”,”line”,”area”三種取值) |
| resizeNode(id,width,height) | 重新設(shè)置結(jié)點(diǎn)的尺寸,開(kāi)始/結(jié)束類(lèi)型的結(jié)點(diǎn)不支持該方法 |
| delNode(id) | 刪除結(jié)點(diǎn) |
| setTitle(text) | 設(shè)置流程圖的名稱(chēng) |
| loadData(data) | 載入一組數(shù)據(jù)JSON格式的流程圖數(shù)據(jù)，傳參data中有title,nodes,lines,areas四個(gè)KEY的數(shù)據(jù),還有一個(gè)可選屬性數(shù)據(jù)initNum：ID起始序列號(hào)最大數(shù)字+1——由于繪制的新單元的ID都是按一定序列號(hào)及規(guī)則自動(dòng)生成的，為了防止新載入的數(shù)據(jù)的ID與編輯時(shí)新加入的ID值有重復(fù),將給設(shè)計(jì)器對(duì)象對(duì)于新生成單元的ID序列一個(gè)新的起始序列號(hào);如果傳參JSON中沒(méi)有這個(gè)屬性,也可以在調(diào)用loadData方法前修改設(shè)計(jì)器對(duì)象的$max屬性值（其實(shí)loadData方法執(zhí)行時(shí)會(huì)檢查傳參中如果有initNum時(shí)，將自動(dòng)給設(shè)計(jì)器對(duì)象的$max賦上此值）； nodes,lines,areas都為一組{key:value}式的Map數(shù)據(jù)，內(nèi)容結(jié)構(gòu)分別與GooFlow對(duì)象屬性中的$nodeData,$lineData,$areaData一致. |
| loadDataAjax(para) | 用AJAX方式，遠(yuǎn)程讀取一組數(shù)據(jù); 參數(shù)para為JSON結(jié)構(gòu)，與JQUERY中$.ajax()方法的傳參一樣 需要后臺(tái)異步返回JSON格式的msg結(jié)果,其內(nèi)容格式與loadData方法的傳參一樣。 |
| exportData() | 把畫(huà)好的結(jié)束導(dǎo)出到一個(gè)本函數(shù)返回的變量中(其實(shí)也可以直接訪問(wèn)GooFlow對(duì)象的$nodeData,$lineData,$areaData這三個(gè)JSON屬性) |
| exportAlter() | //只把本次編輯流程圖中作了變更(包括增刪改)的元素導(dǎo)出到一個(gè)變量中,以方便用戶(hù)每次編輯載入的流程圖后只獲取變更過(guò)的數(shù)據(jù) |
| transNewId(oldId,newId,type) | 變更元素的ID,一般用于快速保存后,將后臺(tái)返回新元素的ID更新到頁(yè)面中;type為元素類(lèi)型(節(jié)點(diǎn),連線,區(qū)塊) |
| clearData() | 清空工作區(qū)及已載入的數(shù)據(jù) |
| destrory() | 銷(xiāo)毀自己 |
| addLine(id,json) | 增加一條線，傳參json內(nèi)容結(jié)構(gòu)與$lineData的每個(gè)屬性單元一樣。 |
| setLineType(id,newType) | 重新設(shè)置連線的樣式. 傳參newType的取值有："sl"直線, "lr"中段可左右移動(dòng)型折線, "tb"中段可上下移動(dòng)型折線 |
| setLineM(id,M) | 設(shè)置折線中段的X坐標(biāo)值（可左右移動(dòng)時(shí)）或Y坐標(biāo)值（可上下移動(dòng)時(shí)）；直線不支持此方法 |
| delLine(id) | 刪除轉(zhuǎn)換線 |
| markItem(id,type,mark) | //用顏色標(biāo)注/取消標(biāo)注一個(gè)結(jié)點(diǎn)或轉(zhuǎn)換線，常用于顯示重點(diǎn)或流程的進(jìn)度。 ?????? //這是一個(gè)在編輯模式中無(wú)用,但是在純?yōu)g覽模式中非常有用的方法，實(shí)際運(yùn)用中可用于跟蹤流程的進(jìn)度。 //傳參：id是操作單元對(duì)象唯一序列號(hào);type是操作單元類(lèi)型(“node”或者”line”,分組區(qū)域不支持此方法);mark為布爾值,表示是否標(biāo)注/取消標(biāo)注某個(gè)ID值的數(shù)據(jù)單元對(duì)象 |
| addArea(id,json) | 增加一個(gè)分組區(qū)域，傳參json內(nèi)容結(jié)構(gòu)與$areaData的每個(gè)屬性單元一樣。 |
| moveArea(id,left,top) | 移動(dòng)分組區(qū)域到新的位置上. |
| delArea(id) | 刪除分組區(qū)域 |
| setAreaColor(id,color) | 設(shè)置分組區(qū)域的顏色,傳參color為顏色樣式,只有”red”,”yellow”,”blue”,”green”四種取值 |
| resizeArea(id,width,height) | 重新設(shè)置區(qū)分組區(qū)域的尺寸 ?????? |
| reinitSize(width,height) | 重構(gòu)整個(gè)流程圖設(shè)計(jì)器的寬高，在瀏覽器窗口大小改變或者父容器寬高改變時(shí)，執(zhí)行這個(gè)方法能讓設(shè)計(jì)器重新適應(yīng)新的寬高顯示。 |
| //以下是當(dāng)初始化的參數(shù)property.useOperStack=true時(shí),才存在的方法: | |
| pushOper(funcName,paras) | 僅供內(nèi)部方法調(diào)用的方法:把對(duì)工作區(qū)內(nèi)的數(shù)據(jù)單元編輯操作(增/刪/改/重命名/移動(dòng)/標(biāo)注等)加入整條管理?xiàng)Ｖ?好進(jìn)入撤銷(xiāo)/重做的控制； 注意:將為了節(jié)省瀏覽器內(nèi)存空間,undo/redo中的操作緩存棧,最多只可放40步操作;超過(guò)40步時(shí),將自動(dòng)刪掉最舊的一個(gè)緩存。 |
| pushExternalOper (func,jsonPara) | //將外部的方法加入到GooFlow對(duì)象的事務(wù)操作堆棧中,在過(guò)后的undo/redo操作中可以進(jìn)行控制，一般用于對(duì)流程圖以外的附加信息進(jìn)行編輯的事務(wù)撤銷(xiāo)/重做控制； //傳參func為要執(zhí)行方法對(duì)象,jsonPara為外部方法僅有的一個(gè)面向字面的JSON傳參或者數(shù)據(jù),由JSON對(duì)象或數(shù)組帶入所有要傳的信息； //提示:為了讓外部方法能夠被UNDO/REDO,需要在編寫(xiě)這些外部方法實(shí)現(xiàn)時(shí),加入對(duì)該方法執(zhí)行后效果回退的另一個(gè)執(zhí)行方法的pushExternalOper。 |
| undo() | 撤銷(xiāo)最近一次操作 |
| redo() | 重做最近一次被撤銷(xiāo)的操作 |
總結(jié)
以上是生活随笔為你收集整理的gooflow的流程设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C++排序之stable_sort()的
- 下一篇： 如何利用openSsl来计算一个文件的m