GooFlow修改元素color（背景/字体/连线）

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 然后获取节点属性信息进行业务数据回显等处理。