使用bootstrap 和 gooflow 完成demo

參考?Jquery版API文檔?

用到最主要的兩個數據結構定義

1、描述單個節點信息的Json結構體。

NodeItem?類型：Json Object

描述單個節點信息的Json結構體。

屬性類型默認值描述

name	String	('node_'+序列號)	節點的顯示名稱。
left	Number	0	節點相對于工作區的左邊距，單位像素。
top	Number	0	節點相對于工作區的頂距，單位像素。
width	Number	104	節點寬度，單位像素；僅非圓形節點時有效。
height	Number	26	節點高度，單位像素；僅非圓形節點時有效。
type	String	''	必填項：節點類型名稱，可用戶自定義；其對應的圖標樣式為'ico_'+節點類型；? 類型名中如果有' round'，則為圓形節點，如果有' mix'，則為復合節點(變換背景色)。
marked	Boolean	(undefined)	節點是否已被標注。
alt	Boolean	(undefined)	在編輯模式下節點是否被用戶編輯過。
areaId	String	(undefined)	該節點所屬分組泳道的id，當為undefined時表示不屬于任何分組。
color	String	(undefined)	選填項。該節點對象特有的背景顏色，優先級高于GooFlow.color.node。
fontColor	String	(undefined)	選填項。該節點對象特有的文字顏色，優先級高于GooFlow.color.font。
……	Object	(undefined)	任意類型、任意數量的自定義屬性，由用戶根據需要自行添加。

? ??

2、描述單條連線信息的Json結構體。

LineItem?類型：Json Object

描述單條連線信息的Json結構體。

屬性類型默認值描述

name	String	(undefiend)	連線的顯示名稱，未定義時連線上無文字。
from	String	(undefiend)	必填項，連線的起始節點id。
to	String	(undefiend)	必填項，連線的目標節點id。
type	String	sl	連線類型，取值有三種：'sl'直線；'lr'中段可左右移動的折線'；'tb'中段可上下移動的折線。
M	Number	(undefiend)	一種抽象值，單位為像素。 當type='lr'時為必填項，表示中段線相對于工作區的X坐標值； 當type='tb'時為必填項，表示中段線相對于工作區的Y坐標值。 當type='sl'時無任何意義。
marked	Boolean	(undefined)	連線是否已被標注。
alt	Boolean	(undefined)	在編輯模式下連線是否被用戶編輯過。
dashed	Boolean	(undefined)	是否為虛線樣式，當為undefined時表示默認實線。
noArrow	Boolean	(undefined)	是否有箭頭，當為undefined時表示默認為有向線，反之則為無向線段。
color	String	(undefined)	選填項。該連線對象特有的線條顏色，優先級高于GooFlow.color.line。
fontColor	String	(undefined)	選填項。該連線對象特有的文字顏色，優先級高于GooFlow.color.lineFont。
……	Object	(undefined)	任意類型、任意數量的自定義屬性，由用戶根據需要自行添加。

?

?

一、創建兩個div 布局

? ? 1、引入 js 和 css 文件 參考 GooFlow入門使用

? ? 2、一個 div 初始化 GooFlow 實例，另一個一個顯示信息

<div class="col-md-8" ><div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div></div><div class="col-md-4" ><form id="flowsuperviseItemForm"><div class="form-group"><table class="table table-hover table-bordered table-condensed" style="width: 99%" id="configtable"><tr><th colspan="2" >節點屬性</th></tr><tr><th>節點ID：</th><td><input type="text" class="form-control form-group-sm" id="ele_id" name="compid" readonly="readonly"/></td></tr><tr><th>名稱：</th><td><input type="text" class="form-control form-group-sm" id="ele_name" name="name" /></td></tr><tr><th>類型：</th><td><input type="text" class="form-control form-group-sm" id="ele_type" name="type" /></td></tr><tr><th>屬性：</th><td><input type="text" class="form-control form-group-sm" id="ele_model" name="model"/></td></tr><tr><th>左邊距：</th><td><input type="text" class="form-control form-group-sm" id="ele_left" name="left" comptype="node" /></td></tr><tr><th>上邊距：</th><td><input type="text" class="form-control form-group-sm" id="ele_top" name="top" comptype="node"/></td></tr><tr><th>寬度：</th><td><input type="text" class="form-control form-group-sm" id="ele_width" name="width" comptype="node" /></td></tr><tr><th>高度：</th><td><input type="text" class="form-control form-group-sm" id="ele_height" name="height" comptype="node" /></td></tr><tr><th colspan="2">連接屬性</th></tr><tr><th>起始節點：</th><td><input type="text" class="form-control form-group-sm" id="ele_from" name="from" comptype="line" /></td></tr><tr><th>結束節點：</th><td><input type="text" class="form-control form-group-sm" id="ele_to" name="to" comptype="line" /></td></tr><tr><th>是否虛線：</th><td><input type="text" class="form-control form-group-sm" id="ele_dash" name="dash" comptype="line" /></td></tr><tr id="sxsx"><th colspan="2"> 自定義配置屬性<a href="javascript:showDialog('url')"><div style="float: right;cursor:pointer;" title="配置"><i class="icon-settings"></i>&nbsp; </div></a></th></tr><tr><th>姓名</th><td><input type="text" class="form-control" placeholder="姓名"/></td></tr><tr><th>性別</th><td><input type="text" class="form-control" placeholder="性別"/></td></tr><tr><th colspan="2"><input type="reset" class="btn-default" value="重置"/><input type="button" class="btn-primary" value="確定" onclick="editflowsuperviseItem()"/></th></tr></table></div></form></div>

input 中的 name 名和數據結構定義的屬性名保持一致（需要什么顯示什么），也可以自定義 name 名 。例如 節點id 和 屬性等

input? 也可以自定義屬性（用于業務處理），例如 comtype 屬性等

?

二、js 初始化 GooFlow 實例

?1、需要用到 事件鉤子 和 內部屬性等，舉兩個，其他參考文檔

? ? ? 1.1 組件獲得焦點事件

this.onItemFocus()?返回值：boolean

當操作某個元素（節點/連線）被由不選中變成選中時，觸發的方法。

傳參：( id, type )

名稱類型/格式描述

id	String	元素的id，唯一標識。
type	String	元素的種類，有'node'節點、'line'連線兩種

? ?? 1.2? 組件失去焦點事件

this.onItemBlur()?返回值：boolean

當操作某個元素（節點/連線）被由選中變成不選中時，觸發的方法。

傳參：( id, type )

名稱類型/格式描述

id	String	元素的id，唯一標識。
type	String	元素的種類，有'node'節點、'line'連線兩種。

?2、在獲取失去焦點時，回顯和刪除 form 表單的信息

<script type="text/javascript">var options = {//width:800,//height:500,//initLabelText: "流程圖",toolBtns: ["start round mix", "end round mix", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveHead: true,headLabel: true,headBtns: ["new", "save", "undo", "redo", "reload", "print", "exportImg"],//如果haveHead=true，則定義HEAD區的按鈕haveTool: true,haveDashed: true,haveGroup: true,useOperStack: true};//設定左側工具欄中每一種節點或按鈕的說明文字GooFlow.prototype.remarks.toolBtns = {cursor: "選擇指針",direct: "連接線",dashed: "連接線（虛線）",start: "開始節點","end": "結束節點","task": "事項節點",group: "區塊編輯開關"};//設定頂部欄中每個按鈕的說明文字GooFlow.prototype.remarks.headBtns = {"new": "新建流程",open: "打開流程",save: "保存結果",undo: "撤銷",redo: "重做",reload: "重置流程",print: "打印流程圖",exportImg: "導出流程圖"};GooFlow.prototype.remarks.extendRight = "工作區向右擴展";GooFlow.prototype.remarks.extendBottom = "工作區向下擴展";var superviseDataStr; //全局模板初始流程圖數據字符串var flowsuperviseTemp; //GooFlow實例本身//模擬數據//superviseDataStr = "";$(document).ready(function () {flowsuperviseTemp = $.createGooFlow($("#flowsuperviseTemp"), options); //用jquery擴展方法初始化GooFlow//flowsuperviseTemp = GooFlow.init("#flowsuperviseTemp",options);; //用jquery擴展方法初始化GooFlowflowsuperviseTemp.setTitle("事項流程圖");//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr)); //初始流程圖數據//組件獲得焦點事件flowsuperviseTemp.onItemFocus = function(id, type){var $form = $("#flowsuperviseItemForm");$form[0].reset();$form.find("input[name='compid']").val(id);$form.find("input[name='model']").val(type);var obj;if(type == "line"){obj = this.$lineData[id];}else if(type == "node"){obj=this.$nodeData[id];}$.each(obj, function (i, n) {$form.find("input[name='"+i+"']").val(n);});//alert(id + ":" + type);return true;}//組件失去焦點事件flowsuperviseTemp.onItemBlur=function(id, type){var $form = $("#flowsuperviseItemForm");$form[0].reset();return true;};//保存按鈕事件flowsuperviseTemp.onBtnSaveClick = function () {saveflowsupervise();}//組件刪除事件(默認是取消的)flowsuperviseTemp.onItemDel=function(id,type){this.blurItem(); //取消所選節點/連線被選定的狀態。return true;}//重置按鈕事件flowsuperviseTemp.onFreshClick = function () {flowsuperviseTemp.clearData();//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr));}//打印事件flowsuperviseTemp.onPrintClick = function () {flowsuperviseTemp.print(1);}//導出圖片事件var exportName = "事項流程圖";//flowsuperviseTemp.setNodeRemarks(GooFlow.prototype.remarks.toolBtns);flowsuperviseTemp.onExportImgClick = function () {flowsuperviseTemp.exportDiagram(exportName);}}); </script>

三、保存節點信息

<script type="text/javascript">function saveflowsupervise() {var nodeCount = flowsuperviseTemp.$nodeCount; //節點數（包含開始結束節點數）if(nodeCount > 0){var flowchart = JSON.stringify(flowsuperviseTemp.exportData());console.log(flowchart);alert(flowchart);}else{alert("請先繪制流程圖");}}function editflowsuperviseItem(){var $form = $("#flowsuperviseItemForm");//獲取節點ID 和 屬性（node/line）var comp_id = $form.find("input[name='compid']").val();var comp_model = $form.find("input[name='model']").val();if(comp_id){var flowchartdata = flowsuperviseTemp.exportData();if(comp_model && comp_model == "node"){$.each(flowchartdata.nodes, function (i, n) {if(i == comp_id){//將form表單信息更新到node節點事項各個屬性中$form.find("input").each(function(){if($(this).prop('name') && $(this).prop('name') != 'compid'){//組件ID 不相等就不修改了if(!($(this).attr('comptype')) || $(this).attr('comptype')=='node'){n[$(this).prop('name')] = $(this).val();// name 名 和 節點屬性對應，把值放進去，跟回顯信息相反// alert($(this).prop('name') + ":" + $(this).val());}}});//n['name'] = $form.find("input[name='name']").val();flowchartdata.nodes[i]=n;}});}if(comp_model && comp_model=='line'){$.each(flowchartdata.lines, function (i, n) {if(i == comp_id){//將form表單信息更新到line節點事項各個屬性中$form.find("input").each(function(){if($(this).prop('name') && $(this).prop('name') != 'compid'){//組件ID就不修改了if(!($(this).attr('comptype')) || $(this).attr('comptype')=='line'){if($(this).prop('name') == "dash"){if($(this).val() == "false"){n[$(this).prop('name')]=false;}if($(this).val() == "true"){n[$(this).prop('name')]=true;}}else{n[$(this).prop('name')]=$(this).val();}}}});// n['name']=$form.find("input[name='name']").val();flowchartdata.lines[i]=n;}});}flowsuperviseTemp.clearData();flowsuperviseTemp.loadData(flowchartdata);}else{alert('請先選擇節點！');}} </script>

?1、 確定按鈕 保存單個節點的信息到節點實例中

?2、流程圖保存按鈕?

? ? 獲取 json 結構的流程數據， ajax 請求 交互后臺

3、用到一些 GooFlow de 內部屬性

??

? ?

{"title":"事項流程圖","nodes":{"1553438226938":{"name":"開始","left":267,"top":88,"type":"start round mix","width":28,"height":28,"alt":true},"1553438229007":{"name":"結束","left":277,"top":412,"type":"end round mix","width":28,"height":28,"alt":true},"1553438231623":{"name":"節點1","left":"237","top":"169","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"張三","xb":"男"},"1553438232544":{"name":"節點2左","left":"107","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"李四","xb":"女"},"1553438233100":{"name":"節點2右","left":"382","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"王五","xb":"男"},"1553438235571":{"name":"節點3","left":"242","top":"333","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"趙柳","xb":"不詳"}},"lines":{"1553438237966":{"type":"sl","from":"1553438226938","to":"1553438231623","name":"","dash":false},"1553438238928":{"type":"sl","from":"1553438231623","to":"1553438233100","name":"","dash":false},"1553438240303":{"type":"sl","from":"1553438231623","to":"1553438232544","name":"","dash":false},"1553438241365":{"type":"sl","from":"1553438232544","to":"1553438235571","name":"","dash":false},"1553438243677":{"type":"sl","from":"1553438233100","to":"1553438235571","name":"","dash":false},"1553438245066":{"type":"sl","from":"1553438235571","to":"1553438229007","name":"","dash":false}},"areas":{},"initNum":13 }

大體 GooFlow 的一個 節點信息 與 自定義字段的 回顯/保存 有了一點了解,

多查看文檔 end ~?

?

總結

以上是生活随笔為你收集整理的GooFlow获取节点/线信息和自定义节点属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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