columns

设置表格中的columns

GridColumn[] columns;

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");

Related samples

Progress lightbox

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会做相应调整。

使用gantt.init()初始化时，column的width优先。
Related sample: 初始化时column宽度优先于grid宽度
使用gantt.render()渲染时，grid_width优先。
Related sample: 渲染时grid宽度优先于column宽度
使用gantt.init()初始化且column宽度缺失或设置为'*'时，grid_width优先。
Related 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");