GooFlow获取节点/线信息和自定义节点属性

使用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 ~