GooFlow.js在线制作编辑流程图插件

GooFlow.js在线制作编辑流程图插件

GooFlow.js在线制作编辑流程图插件

一款基于jQuery与GooFlow.js在线制作编辑流程图插件,可制作各种网页流程图效果。gooflow功能简介 1、自定义流程绘制 2、自定义属性添加 3、支持3种步骤类型 普通审批步骤 自动决策步骤 手动决策步骤 4、决策方式(支持j

源码介绍

js代码

"text/javascript" src="demo/child.js"
"text/javascript" src="plugin/jquery.min.js"
"text/javascript" src="codebase/GooFunc.js"
"text/javascript" src="plugin/json2.js"
"stylesheet" type="text/css" href="demo/default.css"/> 
"text/javascript" src="codebase/GooFlow.js"
"text/javascript"> 
var property={ 
    width:1200
    height:600
    toolBtns:["start round","end","task","node","chat","state","plug","join","fork","complex mix"], 
    haveHead:true, 
    headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true,则定义HEAD区的按钮 
    haveTool:true, 
    haveGroup:true, 
    useOperStack:true 
}
var remark={ 
    cursor:"选择指针"
    direct:"转换连线"
    start:"开始结点"
    "end round":"结束结点"
    "task round":"任务结点"
    node:"自动结点"
    chat:"决策结点"
    state:"状态结点"
    plug:"附加插件"
    fork:"分支结点"
    "join":"联合结点"
    "complex mix":"复合结点"
    group:"组织划分框编辑开关" 
}
var demo; 
$(document).ready(function(){ 
    demo=$.createGooFlow($("#demo"),property); 
    demo.setNodeRemarks(remark); 
    //demo.onItemDel=function(id,type){ 
    //    return confirm("确定要删除该单元吗?"); 
    //} 
    demo.loadData(jsondata); 
}); 
var out; 
function Export(){ 
    document.getElementById("result").value=JSON.stringify(demo.exportData()); 
} 


分享到 :

发表评论

登录... 后才能评论