使用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 实例，另一个一个显示信息
节点属性 节点ID： 名称： 类型： 属性： 左边距： 上边距： 宽度： 高度： 连接属性 起始节点： 结束节点： 是否虚线： 自定义配置属性姓名 性别
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 表单的信息
三、保存节点信息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 ~
