跳到主要内容

columns

Description​

设置表格中的columns

columns: GridColumn[]

Example​

// 默认的columns定义
gantt.config.columns = [
    { name: "text",       label: "任务名称",  width: "*", tree: true },
    { name: "start_date", label: "开始时间",  align: "center" },
    { name: "duration",   label: "持续时间",  align: "center" },
    { name: "add",        label: "",           width: 44 }
];

gantt.init("gantt_here");

Details​

数组中的每一项定义了一个column。对象可以包含以下属性:

  • align? - (string) - 控制column标题的水平对齐方式。可选值为 'left'、'center' 或 'right'；
  • hide? - (boolean) - 切换column的可见性（PRO版本支持）；
  • label? - (string | number | any) - 设置column的标题文字；
  • max_width? - (number) - 限制column调整大小时的最大宽度；
  • min_width? - (number) - 设置column调整大小时的最小宽度；
  • name? - (string | number) - 标识column。使用 'add' 会创建一个带有"+"按钮的column；
  • resize? - (boolean) - 允许通过拖动边框调整column大小（PRO版本支持）；
  • sort? (task1, task2): number - (boolean | string | Function) - 配置点击column标题时的排序行为。设置为 false 可禁用排序。可以通过字符串指定任务属性进行排序，或者提供自定义排序函数。
    • task1 - (Task) - 排序时的第一个任务对象。
    • task2 - (Task) - 排序时的第二个任务对象。
  • template? (task): any - 定义column数据的模板函数。
    • task - (Task) - 任务对象。
  • tree? - (boolean) - 标记该column显示树形结构；
  • width? - (number | string) - 设置column宽度；
  • onrender? (task, node): any - 可选回调，用于自定义单元格渲染。接收任务对象和单元格的DOM元素，可以返回一个框架组件。更多信息见 这里；
    • task - (Task) - 任务对象。
    • node - (HTMLElement) - grid单元格的HTML元素。
  • editor? - (object) - 行内编辑器配置。
    • type - (string) - 编辑器类型。
    • map_to - (string) - 编辑器更新的任务属性。
    • min? - (Date | number) - 日期和持续时间编辑器的最小值。
    • max? - (Date | number) - 日期和持续时间编辑器的最大值。
    • options? - (Array <any>) - 下拉选择编辑器的选项数组。
    • formatter? - (DurationFormatter | LinkFormatter) - 日期和前置任务编辑器的格式化器。

grid columns的总宽度取决于每个column的width属性和grid_width的设置。如果这两个宽度不匹配，Gantt会做相应调整。

注释

Sample: 初始化时column宽度优先于grid宽度

注释

Sample: 渲染时grid宽度优先于column宽度

注释

Sample: 初始化时column宽度未定义或为'*'时grid宽度优先


template属性是一个函数，接收一个数据项并返回要显示的内容。这样可以灵活定制column的显示内容。

gantt.config.columns = [
    { name: "text",        label: "任务名称",  tree: true, width: "*" },
    { name: "start_date",  label: "开始时间", align: "center" },
    { name: "staff",       label: "负责人", template: (obj) => {
        return `${obj.holder} (${obj.progress})`;
    } }
];

gantt.init("gantt_here");

Change log​

  • onrender 属性在v7.1版本中引入