API Docs for: 0.2
Show:

JC.FlowChart Class

JC 流程图
一对多关系
多对一关系
多对多关系

require: RaphaelJS , JC.BaseMVC , JC.PopTips

JC Project Site | API docs | demo link

页面只要引用本脚本, 默认会处理 div class="js_compFlowChart"

可用的 HTML attribute

data-FlowChart = script json data
流程图数据
数据说明
数据按节点关系分为两大类: 一对多, 多对一
一对多数据
一对多数据存放于字段: nodes, nodes 数据类型为数组
nodes 字段位于数据节点里
多对一数据
多对一数据存放于字段: targetNodes, targetNodes 数据类型为对象
targetNodes 字段为全局节点
数据字段说明

图表数据 - chart 字段

name = string
节点名
id = string
节点唯一标识符
nodes = array
一对多数据的子节点, 该字段位于父节点里面
targetNodes = object
多对一数据的子节点, 该字段为全局字段, 节点位置 chart.targetNodes
status = string, default = 0
节点状态
根据 status 显示为不同的样式
默认有0 ~ 10, 共11 种状态
由status 产生的 css class: js_cfcItemStatus_N, js_cfcItemTips_N ( N 代表 status )
tipsHtml = string
鼠标划过节点时, 显示的tips内容, 支持html内容

线条与图标颜色 - colors 字段

line = raphael object, default: { 'stroke': '#E1E1E1', 'stroke-width': 2 }
背景线颜色
icon = raphael object, default: { 'stroke': '#E1E1E1', 'stroke-width': 2, 'fill': '#F2F2F2' }
图标颜色
如果要自定义节点颜色 或者 tips 颜色, 请使用 css 定义: js_cfcItemStatus_N, js_cfcItemTips_N ( N 代表 status )

Constructor

JC.FlowChart

(
  • _selector
)

Parameters:

Example:

   <div class="js_compFlowChart" data-FlowChart="|script">
       <script type="text/template">
           {
               chart: {
                   name: '提交'
                   , id: 1
                   , nodes: [
                           {
                               name: '资质审核'
                               , id: 2
                               , status: 1
                               , tipsHtml: 'username 1'
                               , nodes: [
                                   {
                                       name: '服务审核'
                                       , id: 3
                                       , targetNode: 5
                                       , status: 2
                                       , tipsHtml: 'username 2'
                                   }
                                   , {
                                       name: '渠道管理层'
                                       , id: 4
                                       , status: 3
                                       , tipsHtml: 'username 3'
                                   }
                               ]
                           }
                           , {
                               name: '资质审核1'
                               , id: 6
                               , status: 4
                               , tipsHtml: 'username 4'
                               , nodes: [
                                   {
                                       name: '服务审核1'
                                       , id: 7
                                       , targetNode: 9
                                       , status: 5
                                       , tipsHtml: 'username 5'
                                   }
                                   , {
                                       name: '渠道管理层1'
                                       , id: 8
                                       , targetNode: 9
                                       , status: 6
                                       , tipsHtml: 'username 6'
                                   }
                               ]
                           }
                           , {
                               name: '资质审核2'
                               , id: 10
                               , status: 7
                               , tipsHtml: 'username 7'
                               , nodes: [
                                   {
                                       name: '服务审核2'
                                       , id: 11
                                       , status: 8
                                       , tipsHtml: 'username 8'
                                       , nodes: [
                                           {
                                               name: '管理层2'
                                               , id: 12
                                               , targetNode: 5
                                               , status: 9
                                               , tipsHtml: 'username 9'
                                           }
                                       ]
                                   }
                               ]
                           }
                           , {
                               name: '资质审核3'
                               , id: 15
                               , status: 10
                               , tipsHtml: 'username 10'
                           }
                   ]
                   , targetNodes: {
                       '5': {
                           name: '管理层'
                       }
                       , '9': {
                           name: '管理层1'
                           , targetNode: 5
                       }
                   }
               }
           }
       </script>
   </div>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

init

(
  • _selector
)
Array of FlowChartInstance static

初始化可识别的 FlowChart 实例

Parameters:

  • _selector Selector

Returns:

Array of FlowChartInstance:

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

Events

cfc_beforeInitItem

dom节点初始化前的事件
节点如果有特殊显示需求的话, 可以从这个事件进行相关操作

Example:

$( document ).delegate( 
   'div.js_compFlowChart'
   , JC.FlowChart.Model.BEFORE_INIT_ITEM
   , function( _evt, _itemData, _listData, _chartData ){
       if( _itemData.tipsHtml ){
           _itemData.tipsHtml += '   test';
       }
       _itemData.name = JC.f.printf( '~{0}~', _itemData.name );
   }
);

cfc_inited

初始化后 selector 触发的事件

Example:

$( document ).delegate( 
   'div.js_compFlowChart'
   , JC.FlowChart.Model.INITED
   , function( _evt, _ins, _chartData ){
       JC.log( 'js_compFlowChart inited' );
   }
);

cfc_nodeInited

dom 节点初始化后 触发的事件

Example:

$( document ).delegate( 
   'div.js_compFlowChart'
   , JC.FlowChart.Model.ITEM_INITED
   , function( _evt, _domNode, _itemData, _listData, _chartData ){
       JC.log( _domNode.prop( 'nodeName' ) );
   }
);