zoukankan      html  css  js  c++  java
  • jsplumb流程器使用2

    jsplumb默认注册在浏览器的窗口,为整个页面提供静态实例

    1. 单独实例化的方法:

    var firstInstance = jsPlumb.getInstance();

     内部传入可定义对象   全局定义对象方法: 

        

    jsPlumb.importDefaults({···})

    2. 每次连线,都会导致相关联元素重绘,加载大量数据时 比如执行批量导入切换视图 可以先暂停绘图:

    jsPlumb.setSuspendDrawing(true);
    
    jsPlumb.setSuspendDrawing(false,true);

    这里的第二个参数的true 会使整个jsplumb立即重绘

    也可以使用batch batch 抽象出暂停绘图,执行某些操作,然后重新启用绘图的模式

    jsPlumb.batch(fn,[doNotRepaintAfterwards]);

    1.7.3版本前方法名:doWhileSuspended

    3. 本行代码官方文档很模糊 我并不是很清楚放在这里有什么用

    jsPlumb.fire('jsPlumbDemoLoaded', instance)

     4. 生成新节点 删除旧节点

    jsPlumb.setId(el,newId)
    jsPlumb.setIdChanged(oldId,newId)

    5. 拖动方法

    firstInstance.draggable("some element");

     6. 默认配置

       

    Anchor : "BottomCenter",//端点的定位点的位置声明(锚点):left,top,bottom等
    Anchors : [ null, null ],//多个锚点的位置声明
    ConnectionsDetachable   : true,//连接是否可以使用鼠标默认分离
    ConnectionOverlays  : [],//附加到每个连接的默认重叠
    Connector : "Bezier",//要使用的默认连接器的类型:折线,流程等
    Container : null,//设置父级的元素,一个容器
    DoNotThrowErrors  : false,//如果请求不存在的Anchor,Endpoint或Connector,是否会抛出
    DragOptions : { },//用于配置拖拽元素的参数
    DropOptions : { },//用于配置元素的drop行为的参数
    Endpoint : "Dot",//端点(锚点)的样式声明(Dot)
    Endpoints : [ null, null ],//多个端点的样式声明(Dot)
    EndpointOverlays : [ ],//端点的重叠
    EndpointStyle : { fill : "#456" },//端点的css样式声明
    EndpointStyles : [ null, null ],//同上
    EndpointHoverStyle : null,//鼠标经过样式
    EndpointHoverStyles : [ null, null ],//同上
    HoverPaintStyle : null,//鼠标经过线的样式
    LabelStyle : { color : "black" },//标签的默认样式。
    LogEnabled : false,//是否打开jsPlumb的内部日志记录
    Overlays : [ ],//重叠
    MaxConnections : 1,//最大连接数
    PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
    ReattachConnections : false,//是否重新连接使用鼠标分离的线
    RenderMode : "svg",//默认渲染模式
    Scope : "jsPlumb_DefaultScope"//范围,标识
  • 相关阅读:
    97. Interleaving String
    96. Unique Binary Search Trees
    95. Unique Binary Search Trees II
    94. Binary Tree Inorder Traversal
    odoo many2many字段 指定打开的form视图
    docker sentry 配置文件位置
    postgres 计算时差
    postgres 字符操作补位,字符切割
    postgres判断字符串是否为时间,数字
    odoo fields_view_get
  • 原文地址:https://www.cnblogs.com/moneyss/p/8665076.html
Copyright © 2011-2022 走看看