cmp.flowV5 类

流程图组件（v5数据格式）

定义于: doc\doc\cmp_doc_all\cmp-flowV5-doc.js:23
模块: Flow

构造函数

cmp.flowV5

cmp.flowV5
(
  • data
  • options
)
Object

定义于 doc\doc\cmp_doc_all\cmp-flowV5-doc.js:23

参数:

名称类型标识描述
data Object 必选

v5格式流程数据

options Object 必选

配置参数

名称类型标识描述
[id] String 可选

展示流程图的容器id

[cWidth] Number 可选

流程图显示的宽度 (默认:window的宽度)

[cHeight] Number 可选

流程图显示的高度 (默认:window的高度)

[callback] Function 可选

回调函数,返回点击到的对应节点的数据

[completeCallback] Function 可选

画图完成或者不能画图的回调函数；其中当返回的数据包含success:false,message:"超过100个节点",code:60001,detail:"node number beyond 100"}即代表绘图不成功

返回值:

[Object]

流程图对象 提供updateNode方法，供开发者调用，用于直接更新流程图中的节点样式 更新指定节点状态，其中nodeInfo的格式和组件回传给开发者的格式一样，select:代表的是选择状态（即打钩钩），可能以后还有什么状态要弄传数组

示例:

文件导入路径：
M3App端
<link rel="stylesheet" href="http://cmp/v/css/cmp-listView.css"></link>
 <script  src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
 <script  src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
 <script  src="http://cmp/v/js/cmp.js"></script>
 <script  src="http://cmp/v/js/cmp-listView.js"></script>
 <script  src="http://cmp/v/js/cmp-zoom.js"></script>
 <script  src="http://cmp/v/js/cmp-flowV5.js"></script>
 ===========================================================================================
 微协同端：
 <link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-listView.css"></link>
 <script  src="/seeyon/m3/cmp/js/cmp.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-listView.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-zoom.js"></script>
 <script  src="/seeyon/m3/cmp/js/cmp-flowV5.js"></script>
 =========================================================================================
 调用组件
<script>
    var flowChart = cmp.flowV5(data,{
                  id:"my_cvs",
                  cWidth: window.innerWidth,
                  cHeight: window.innerHeight,
                  callback:function(nodeInfo){
                      alert(cmp.toJSON(nodeInfo));
                      var updateNodes = [{nodeID:nodeInfo.nodeID,x:nodeInfo.x,y:nodeInfo.y,state:state}];//更新指定节点状态，其中nodeInfo的格式和组件回传给开发者的格式一样，select:代表的是选择状态（即打钩钩），可能以后还有什么状态要弄传数组
                           flowChart.updateNode(updateNodes);
                  },
                  completeCallback:function(result){
                     //result = {success:false,message:"超过100个节点",code:60001,detail:"node number beyond 100"}
                     //如果success为false代表绘图未成功
                  }
    });
</script>
Top