dhtmlx-gantt 自定义 columns

dhtmlxGantt是一个强大的JavaScript库，用于创建复杂的甘特图。其中自定义columns功能允许开发者根据项目需求添加、修改或删除列（亦称为任务属性）。你可以通过以下步骤来定制dhtmlxGantt的列：

1. **添加新列**：在Gantt实例初始化时，可以指定一个配置对象，其中包含`columns`数组。例如：

   var gantt = new Gantt("gantt_here", {
       columns: [
           {field: "id", caption: "ID"},
           {field: "task", caption: "任务名称"}
           // ...其他自定义字段
       ]
   });

2. **修改列属性**：每个列对象有caption（标题）、field（数据源字段名）、type（如date、text等）、width（宽度）等属性，可以对已有的列进行调整。

3. **禁用/启用列**：设置某个列的visible属性为false可以使其隐藏；反之设为true则显示。

4. **事件处理**：列上还可以绑定事件，如onClick或onEdit，以响应用户的交互操作。

相关问题

dhtmlx-gantt自定义列

### 如何在 dhtmlx-Gantt 中添加或修改自定义列

#### 自定义列的配置方法

为了向 Gantt 图表中添加新的数据字段并显示这些字段，在初始化 gantt 对象之前，可以通过 `columns` 属性来指定额外的数据列。这允许开发者根据项目需求调整表格视图中的展示内容。

gantt.config.columns = [
    {name:"text", label:"Task name", tree:true, width:200},
    {name:"start_date", label:"Start time", align:"center", width:90},
    {name:"duration", label:"Duration", align:"right", width:80},
    {name:"add", width:44}
];

上述代码片段展示了如何重新定义默认的任务名称、开始时间和持续时间列，并保持了原有的操作按钮区域不变[^1]。

对于想要增加完全自定义的新属性到任务对象里，则需先扩展任务结构模型：

// 增加新字段至任务对象原型上
Object.assign(gantt.Task.prototype,{
    customField : "" // 新增自定义字段名
});

接着更新 `config.columns` 来反映新增加的信息项:

gantt.config.columns.push({name:"customField",label:"Custom Field",width:150});

这样就可以让这个特定的名字作为一列表现在Gantt图表之中。

当涉及到编辑已有的记录时，可以利用内置的方法如 `gantt.updateTask(id,data)` 或者通过监听事件的方式捕获用户的交互行为从而动态更改相应条目的值。

最后值得注意的是，如果要保存这些改动后的状态，应该确保服务器端也支持接收和处理带有附加参数的任务实体。

dhtmlx-gantt 隐藏列

DHTMLX Gantt 是一款强大的 JavaScript 库，用于创建高性能的甘特图。如果你想要隐藏 DHTMLX Gantt 中的某些列，你可以通过设置列配置对象来实现。首先，在初始化 Gantt 的时候，你需要定义列的数据结构，并针对需要隐藏的列设置 `visible` 属性为 `false`。

例如：

// 初始化 Gantt
var gantt = new Gantt("gantt_here", {
    columns: [
        {id: "task_id", text: "任务ID", visible: false},
        {id: "description", text: "描述"},
        // 其他列...
    ]
});

在这个例子中，"任务ID" 列将会被隐藏。如果你想在运行时动态地隐藏或显示某列，可以获取到 Gantt 对象并调整该列的可见状态：

gantt.getColumnById("task_id").visible = false; // 隐藏
gantt.getColumnById("task_id").visible = true; // 显示