1、修改節點（背景/字體/連線）顏色：

在 GooFlow.color.js 中自定義的鍵值對

GooFlow.prototype.color={main:"#20A0FF",font:"#15428B",node:"#C0CCDA",line:"#1D8CE0",lineFont:"#ff6600",mark:"#ff8800",mix:"#B6F700",mixFont:"#777", finishstate:"#F64A25", runningstate:#84DB1A",nodestateFont:"#FFFFFF" };

在 GooFlow.css 中添加節點（背景/字體）的樣式

.GooFlow .item_mix{background:#B6F700;color:#fff} .GooFlow .item_finishstate{background:#F64A25;color:#fff} .GooFlow .item_runningstate{background:#84DB1A;color:#fff}

在?GooFlow.js 中引入判斷

if(GooFlow.prototype.color.node){if(json.type.indexOf(" mix")>-1){this.$nodeDom[id].css({"background-color":GooFlow.prototype.color.mix,"border-color":GooFlow.prototype.color.mix});if(GooFlow.prototype.color.mixFont){this.$nodeDom[id].find("td:eq(1)").css("color",GooFlow.prototype.color.mixFont);this.$nodeDom[id].find(".span").css("color",GooFlow.prototype.color.mixFont);}}else if(json.type.indexOf(" finishstate")>-1){this.$nodeDom[id].css({"background-color":GooFlow.prototype.color.finishstate,"border-color":GooFlow.prototype.color.finishstate});if(GooFlow.prototype.color.nodestateFont){this.$nodeDom[id].find("td:eq(1)").css("color",GooFlow.prototype.color.nodestateFont);this.$nodeDom[id].find(".span").css("color",GooFlow.prototype.color.nodestateFont);}}else if(json.type.indexOf(" runningstate")>-1){this.$nodeDom[id].css({"background-color":GooFlow.prototype.color.runningstate,"border-color":GooFlow.prototype.color.runningstate});if(GooFlow.prototype.color.nodestateFont){this.$nodeDom[id].find("td:eq(1)").css("color",GooFlow.prototype.color.nodestateFont);this.$nodeDom[id].find(".span").css("color",GooFlow.prototype.color.nodestateFont);}}。。。 }

在實例組件功能模塊中修改node

?//初始流程圖數據 DataJson = $.parseJSON(projectDataStr);??? for(var key in DataJson.nodes){????//node//根據業務初始化修改node的type即可改變(背景/字體)DataJson.nodes[key].type = "task runningstate"; for(var linekey in DataJson.lines){????//line?//根據業務初始化修改line的marked即可改變連線的顏色（默認改變為橙黃色）DataJson.lines[linekey].marked=true;} }

2. 自定義節點屬性：

//組件獲得焦點事件

在表單中回顯已有需要的屬性同時表單可輸入自定義的屬性，提交表單是重新給該節點賦值：

if(gooflow_id){ var data = projectTemp.exportData();?//projectTemp為初始化GooFlow實例 if(gooflow_model&&gooflow_model=='node'){$.each(data.nodes, function (i, n) {if(i==comp_id){//這里修改節點事項各個屬性$form.find("input").each(function(){if($(this).prop('name')&&$(this).prop('name')!='gooflow_id'){//組件ID就不修改了if(!($(this).attr('modeltype'))||$(this).attr('modeltype')=='node'){n[$(this).prop('name')]=$(this).val();????????//重新給節點賦值}}}); data.nodes[i]=n;}}); } if(gooflow_model&&gooflow_model=='line'){$.each(data.lines, function (i, n) {if(i==comp_id){//這里修改節點事項各個屬性$form.find("input").each(function(){if($(this).prop('name')&&$(this).prop('name')!='gooflow_id'){//組件ID就不修改了if(!($(this).attr('modeltype'))||$(this).attr('modeltype')=='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();}}}}); data.lines[i]=n;}}); } projectTemp.clearData(); projectTemp.loadData(data); }else{alert('請先選擇節點！'); } }

3. 不同意返回上級重新審核：

通過? 實例GooFlow對象的lines[linekey].to 獲取node的id 然后獲取節點屬性信息進行業務數據回顯等處理。

總結

以上是生活随笔為你收集整理的GooFlow修改元素color（背景/字体/连线）的全部內容，希望文章能夠幫你解決所遇到的問題。

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