API - Kickoff

数据结构

@typedef {Object} KickoffInstance - Kickoff组件实例
@prop {KickoffInstanceConfig} config - Kickoff组件实例配置
@prop {RootTaskInstance} task - Kickoff组件实例根任务
@prop {TimelineInstance} timeline - Kickoff组件实例时间线
@typedef {Object} KickoffInstanceConfig - Kickoff组件实例配置对象

@prop {boolean} [excludeWeekends = true] - 周六、日是否为例外日期
@prop {TimeRange[]} [exclusions = []] - 工作日例外周期数组,范围内不计入任务周期
@prop {TimeRange[]} [inclusions = []] - 节假日例外周期数组,范围内计入任务周期,
权重高于exclusions和excludeWeekends

@prop {TimelineFlag[]} [flags = []] - 0.2.0新增 时间线重要时间标记
@prop {integer} [minDurationSeconds = 3600 * 24] - 任务最短周期秒数

@prop {integer} [finishToStartCompensatorySeconds = 0] - 0.2.6新增 前置任务结束时间
与后置任务开始时间的补偿差秒数
@prop {integer} [startToFinishCompensatorySeconds = 0] - 0.2.6新增 前置任务开始时间
与后置任务结束时间的补偿差秒数
@prop {integer} [startToStartCompensatorySeconds = 0] - 0.2.6新增 前置任务开始时间
与后置任务开始时间的补偿差秒数
@prop {integer} [finishToFinishCompensatorySeconds = 0] - 0.2.6新增 前置任务结束时间
与后之任务结束时间的补偿差秒数

@prop {integer} [timelinePadding = 4] - 时间线两侧padding单位长度
@prop {integer} [timelineLeastRange = 13] - 时间线最小单位长度

@prop {string | Element} target - 在dom中的挂载节点或css选择器

@prop {integer} [resizeRenderDelay = 1000] - 组件尺寸变化后重新渲染时间延迟毫秒

@prop {Array} [actions = ['createTask', 'createMilestone', 'destroyDescendants',
'switchState']] - 0.2.0新增 根任务可执行动作配置

@prop {boolean} [renderHeader = true] - 是否渲染组件header
@prop {Function} [renderHeaderActions = null] - 0.2.0新增
组件header可执行动作自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的头部
dom节点$container
@prop {Function} [renderHeaderActionCreateTask = null] - 0.2.0新增
组件header中创建任务按键的自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的
按键dom节点$container
@prop {Function} [renderHeaderActionCreateMilestone = null] - 0.2.0新增
组件header中创建里程碑按键的自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的
按键dom节点$container
@prop {Function} [renderHeaderActionCreateDestroyDescendants = null]- 0.2.0新增
组件header中删除后代按键的自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的
按键dom节点$container
@prop {Function} [renderHeaderActionCreateSwitchState = null] - 0.2.0新增
组件header中重做/撤回按键的自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的
按键dom节点$container
@prop {Function} [renderHeaderNavigations = null] - 0.2.0新增
组件header导航按键自定义渲染函数,传入两个参数,根任务实例rootTask和用于挂载渲染内容的头部dom
节点$container

@prop {boolean} [enableGanttAccurateTimeOperations = true] - 0.2.5新增 是否启用
gantt视图精确拖拽模式,启用时,gantt视图中对任务和里程碑的拖拽不会自动吸附到时间线纵轴单元上
@prop {boolean} [renderGantt = true] - 是否渲染组件gantt视图
@prop {Function} [renderGanttTaskGraph = null] - 0.2.0新增
gantt视图中任务图形的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容的
dom节点$container
@prop {Function} [renderGanttTaskSummary = null] - 0.2.0新增
gantt视图中里任务概要信息的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttTaskActions = null] - 0.2.0新增
gantt视图中任务动作的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容的dom
节点$container
@prop {Function} [renderGanttTaskActionPick = null] - 0.2.0新增
gantt视图中任务pick动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttTaskActionFold = null] - 0.2.0新增
gantt视图中任务fold动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttTaskActionUpdate = null] - 0.2.0新增
gantt视图中任务update动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttTaskActionDestroy = null] - 0.2.0新增
gantt视图中任务destroy动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染
内容的dom节点$container
@prop {Function} [renderGanttTaskActionCreateTask = null] - 0.2.0新增
gantt视图中任务createTask动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染
内容的dom节点$container
@prop {Function} [renderGanttTaskActionCreateMilestone = null] - 0.2.0新增
gantt视图中任务createMilestone动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于
挂载渲染内容的dom节点$container
@prop {Function} [renderGanttTaskLinkActions = null] - 0.2.0新增
gantt视图中任务删除前置任务动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染
内容的dom节点$container
@prop {Function} [renderGanttMilestoneGraph = null] - 0.2.0新增
gantt视图中里程碑图形的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttMilestoneSummary = null] - 0.2.0新增
gantt视图中里里程碑概要信息的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载
渲染内容的dom节点$container
@prop {Function} [renderGanttMilestoneActions = null] - 0.2.0新增
gantt视图中里程碑动作的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderGanttMilestoneActionPick = null] - 0.2.0新增
gantt视图中里程碑pick动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载
渲染内容的dom节点$container
@prop {Function} [renderGanttMilestoneActionUpdate = null] - 0.2.0新增
gantt视图中里程碑update动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于
挂载渲染内容的dom节点$container
@prop {Function} [renderGanttMilestoneActionDestroy = null] - 0.2.0新增
gantt视图中里程碑destroy动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于
挂载渲染内容的dom节点$container
@prop {Function} [renderGanttMilestoneLinkActions = null] - 0.2.0新增
gantt视图中任务删除前置任务动作按键的自定义渲染函数,传入两个参数,当前任务实例milestone和用于
挂载渲染内容的dom节点$container

@prop {boolean} [renderTable = true] - 是否渲染组件table视图
@prop {Array} [tableColumns = [{prop: 'actions', render: null},
{prop: 'wbs', render: null}, {prop: 'type', render: null},
{prop: 'name', render: null}, {prop: 'beginning', render: null},
{prop: 'end', render: null}, {prop: 'duration', render: null},
{prop: 'predecessors', render: null}, {prop: 'successors', render: null}] -
table视图列配置,支持扩展自定义属性。 prop为要显示的任务属性。如果不设置title,则默认使用该prop
在locale配置中的值作为table的表头标题,否则使用title的值作为table表头标题。如果render为
Function,则使用该render渲染table中每个任务对应属性列,render中会传入两个参数,当前任务实例
task和该实例当前要显示的属性在table列中的dom节点$container。
@prop {Function} [renderTableTaskActions = null] - 0.2.0新增
table视图中任务动作的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容的dom
节点$container。
权重低于tableColumns中action列render。
@prop {Function} [renderTableTaskActionPick = null] - 0.2.0新增
table视图中任务pick动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容的
dom节点$container
@prop {Function} [renderTableTaskActionFold = null] - 0.2.0新增
table视图中任务fold动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容的
dom节点$container
@prop {Function} [renderTableTaskActionUpdate = null] - 0.2.0新增
table视图中任务update动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderTableTaskActionDestroy = null] - 0.2.0新增
table视图中任务destroy动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染内容
的dom节点$container
@prop {Function} [renderTableTaskActionCreateTask = null] - 0.2.0新增
table视图中任务createTask动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于挂载渲染
内容的dom节点$container
@prop {Function} [renderTableTaskActionCreateMilestone = null] - 0.2.0新增
table视图中任务createMilestone动作按键的自定义渲染函数,传入两个参数,当前任务实例task和用于
挂载渲染内容的dom节点$container
@prop {Function} [renderTableMilestoneActions = null] - 0.2.0新增
table视图中里程碑动作的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载渲染内容
的dom节点$container。
权重低于tableColumns中action列render。
@prop {Function} [renderTableMilestoneActionPick = null] - 0.2.0新增
table视图中里程碑pick动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于挂载
渲染内容的dom节点$container
@prop {Function} [renderTableMilestoneActionUpdate = null] - 0.2.0新增
table视图中里程碑update动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于
挂载渲染内容的dom节点$container
@prop {Function} [renderTableMilestoneActionDestroy = null] - 0.2.0新增
table视图中里程碑destroy动作按键的自定义渲染函数,传入两个参数,当前里程碑实例milestone和用于
挂载渲染内容的dom节点$container

@prop {Array} [formFields = [
{prop: 'wbs', type: 'text', placeholder: 'E.g., 1.1', render: null},
{prop: 'name', type: 'text', placeholder: 'E.g., A New Task', render: null},
{prop: 'beginning', type: 'time', placeholder: 'E.g., 2020/01/01', render: null},
{prop: 'end', type: 'time', pickEnd: true, placeholder: 'E.g., 2020/01/02', render: null},
{prop: 'predecessors', render: null, fields:[
  {prop: 'predecessors.startToStart', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 1, 2', render: null},
  {prop: 'predecessors.startToFinish', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 3, 4', render: null},
  {prop: 'predecessors.finishToFinish', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 5, 6', render: null},
  {prop: 'predecessors.finishToStart', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 7, 8', render: null}
]},
{prop: 'successors', render: null, fields: [
  {prop: 'successors.startToStart', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 1, 2', render: null},
  {prop: 'successors.startToFinish', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 3, 4', render: null},
  {prop: 'successors.finishToFinish', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 5, 6', render: null},
  {prop: 'successors.finishToStart', type: 'select', multiple: true,
   options: [], placeholder: 'E.g., 7, 8', render: null}
]}
]] - 0.2.0新增 任务/里程碑编辑表单field配置,支持扩展自定义属性。
支持text、number、select、textarea、time类型的field,如果不设置type,默认使用text类型。
对于select型field,options支持数组和函数两种形式,如果为数组,要求每个数组元素均为Object型,
且具备label和value两个字段;如果为函数,该函数会接收到一个use函数作为参数,在此use函数中须传入一
个Array,且每个元素均为具备label和value两个字段的Object;对于内置属性predecessors和successors
如果options为空数组,会自动计算填充。如指定了自定义渲染函数render来渲染复杂的表单field,该函数会
被传入两个参数,当前任务实例task和用于挂载渲染内容的dom节点$container。如果设置了label,则使用
此label作为该field的表单标题,否则使用该prop在locale配置中的值作为table的表头标题。prop的设置
支持属性嵌套,可以使用.作为分割符隔开。如果一个field设置了fields,会进行嵌套渲染。
@prop {Function} [renderTaskForm] - 0.2.0新增
任务编辑表单自定义渲染函数,传入三个参数,分别为当前任务实例task、表单容器dom节点$container,
以及closeForm函数(调用时会关闭表单弹出层)
@prop {Function} [renderMilestoneForm] - 0.2.0新增
里程碑编辑表单自定义渲染函数,传入三个参数,分别为当前里程碑实例milestone、表单容器dom节点
$container,以及closeForm函数(调用时会关闭表单弹出层)

@prop {Object} [locale = {
header: {
  actions: {undo: 'Undo', redo: 'Redo'},
  navigations: {
    zoomIn: 'Zoom In', zoomOut: 'Zoom Out',
    chartView: 'Chart View', tableView: 'Table View',
    zoomUnits: {year: 'Year', month: 'Month', week: 'Week', day: 'Day', hour: 'Hour'}
  }
},
task: {
  types: {task: 'Task', milestone: 'Milestone'},
  actions: {
    createTask: 'New Task',
    createMilestone: 'New Milestone',
    destroyDescendants: 'Destroy Items',
    createSubTask: 'Create a sub task',
    createSubMilestone: 'Create a sub milestone',
    updateTask: 'Edit this task',
    updateMilestone: 'Edit this milestone',
    destroyTask: 'Destroy this task',
    destroyMilestone: 'Destroy this milestone',
    pick: 'Pick this item',
    unpick: 'Unpick this item',
    fold: 'Fold descendants',
    unfold: 'Unfold descendants'
  },
  props: {
    wbs: 'Wbs',
    name: 'Name',
    type: 'Type',
    beginning: 'Beginning',
    end: 'End',
    time: 'Time',
    duration: 'Duration',
    actions: 'Actions',
    readonlyProps: 'Readonly Properties',
    predecessors: {
      $: 'Predecessors',
      startToStart: 'Start to Start',
      startToFinish: 'Start to Finish',
      finishToFinish: 'Finish to Finish',
      finishToStart: 'Finish to Start'
    },
    successors: {
      $: 'Successors',
      startToStart: 'Start to Start',
      startToFinish: 'Start to Finish',
      finishToFinish: 'Finish to Finish',
      finishToStart: 'Finish to Start'
    }
  },
  durationUnits: {
    year: 'years',
    month: 'months',
    week: 'weeks',
    day: 'days',
    hour: 'hours'
  }
},
timePicker: {
  whatDay: {
    sun: 'Sun',
    mon: 'Mon',
    thu: 'Thu',
    wes: 'Wes',
    thr: 'Thr',
    fri: 'Fri',
    sat: 'Sat'
  }
}
}] - 0.2.0新增 本地化语言设置,支持扩展自定义字段。$可以用于嵌套字段中来标识本级locale设置。

构造函数

kickoff (config, tasks)

@param {KickoffInstanceConfig} config
@param {TaskInstanceData[]} [tasks]
@returns {KickoffInstance}
// @example 创建Kickoff组件实例,挂载于满足css选择器#my-kickoff的dom节点上
let myKickoff = kickoff({
  target: '#my-kickoff'
}, [{
  wbs: '1',
  beginning: '2020-09-19 00:00:00',
  end: '2020-09-22 23:59:59'
}, {
  wbs: '2',
  beginning: '2020-09-23 00:00:00',
  end: '2020-09-30 23:59:59',
  dependencies: {startToStart: '1.1'}
}, {
  wbs: '1.1',
  beginning: '2020-09-19 00:00:00',
  end: '2020-09-21 23:59:59'
}])

静态方法

kickoff.time

详见 Time API

实例方法

.configure (config)

@param {KickoffInstanceConfig} config
@returns {KickoffInstance}

重新配置KickoffInstance而不是在构造函数中直接传入配置参数会引起一次组件重新渲染。

let myKickoff = kickoff({target: '#my-kickoff'})
// @example 重新配置KickoffInstance不渲染table视图
myKickoff.configure({renderTable: false})

.destroy ( )

@returns {boolean}
let myKickoff = kickoff({target: '#my-kickoff'})
// @example 销毁KickoffInstance并将挂载节点内部HTML清除
myKickoff.destroy()

.render ( )

@returns {KickoffInstance}
let myKickoff = kickoff({target: '#my-kickoff'})
// @example 重新渲染KickoffInstance
myKickoff.render()