使用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> </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扩展方法初始化GooFlow
flowsuperviseTemp.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 ~
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
