概览

Flowdesign Leipi Org

我们参考了很多相关流程设计器，现重新规划出一个真正好用和易于二次开发的流程设计工具，它具有【精巧、方便、实用】等优点。

兼容：IE7++、Chrome、Firefox 等主流浏览器

开始使用

请先下载

  1. 下载流程设计器

依赖

解压后，参考index.html示例

核心JS文件说明 

//使用低版本JQuery更好兼容低版本IE
<script charset="utf-8" src="/Public/js/jquery-1.7.2.min.js"></script>
<script charset="utf-8" src="/Public/js/formbuild/bootstrap/js/bootstrap.min.js"></script>
//JQuery Ui < 2.x.x
<script src="/Public/js/jquery-ui/jquery-ui-1.9.2-min.js" ></script>
//1.3.16 兼容性最好
<script src="/Public/js/jsPlumb/jquery.jsPlumb-1.3.16-all-min.js"></script>
//右键菜单
<script src="/Public/js/jquery.contextmenu.r2.js"></script>
//下拉列表选择器
<script src="/Public/js/jquery.multiselect2side/js/jquery.multiselect2side.js"></script>
//表单设计器，必须包括以上的JS
<script src="/Public/js/leipi.flowdesign.v3.js"></script>

二次开发

正在完善中...
部分功能你可以请先阅读代码，我们已经详细注释！

创建流程设计器 和 配置说明


/*创建流程设计器 和 配置说明*/
var _canvas = $("#flowdesign_canvas").Flowdesign({
      processData:{"total":2,"list":{
        "37":{
            "id":"37",//当前步骤ID
            "flow_id":"8",//所属流程ID
            "process_name":"填写表单",//步骤名称
            "process_to":"38",//下一步 多个用 逗号隔开
            "icon":"icon-play",//图标
            "style":"left:183px;top:68px;color:#0e76a8;"//样式
        }}
      },//步骤节点数据

      fnRepeat:function(){
        alert("步骤连接重复");
      },
      fnClick:function(){
        alert("单击");
      },
      fnDbClick:function(){
        alert("双击");
      },
      canvasMenus : {
        "one": function(t) {alert('画面右键')}
      },
      processMenus: {
        "one": function(t) {alert('步骤右键')}
      },
      /*右键菜单样式*/
      menuStyle: {
        border: '1px solid #5a6377',
        minWidth:'150px',
        padding:'5px 0'
      },
      itemStyle: {
        fontFamily : 'verdana',
        color: '#333',
        border: '0',
        /*borderLeft:'5px solid #fff',*/
        padding:'5px 40px 5px 20px'
      },
      itemHoverStyle: {
        border: '0',
        /*borderLeft:'5px solid #49afcd',*/
        color: '#fff',
        backgroundColor: '#5a6377'
      },
      //这是连接线路的绘画样式
      connectorPaintStyle : {
          lineWidth:3,
          strokeStyle:"#49afcd",
          joinstyle:"round"
      },
      //鼠标经过样式
      connectorHoverStyle : {
          lineWidth:3,
          strokeStyle:"#da4f49"
      }
});