dhtmlx-gantt自定义列
时间: 2024-12-26 09:25:36 浏览: 2
### 如何在 dhtmlx-Gantt 中添加或修改自定义列
#### 自定义列的配置方法
为了向 Gantt 图表中添加新的数据字段并显示这些字段,在初始化 gantt 对象之前,可以通过 `columns` 属性来指定额外的数据列。这允许开发者根据项目需求调整表格视图中的展示内容。
```javascript
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]。
对于想要增加完全自定义的新属性到任务对象里,则需先扩展任务结构模型:
```javascript
// 增加新字段至任务对象原型上
Object.assign(gantt.Task.prototype,{
customField : "" // 新增自定义字段名
});
```
接着更新 `config.columns` 来反映新增加的信息项:
```javascript
gantt.config.columns.push({name:"customField",label:"Custom Field",width:150});
```
这样就可以让这个特定的名字作为一列表现在Gantt图表之中。
当涉及到编辑已有的记录时,可以利用内置的方法如 `gantt.updateTask(id,data)` 或者通过监听事件的方式捕获用户的交互行为从而动态更改相应条目的值。
最后值得注意的是,如果要保存这些改动后的状态,应该确保服务器端也支持接收和处理带有附加参数的任务实体。
阅读全文