You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在AnyChart甘特图中仅设置DataGrid的部分列允许编辑?

AnyChart甘特图DataGrid指定列可编辑实现方案

存在对应的配置能力,两种实现逻辑可以根据实际需求选择:

方案1:可编辑列较多时使用

  • 先全局开启DataGrid的编辑能力
const ganttChart = anychart.ganttProject();
// 全局开启DataGrid编辑
ganttChart.dataGrid().edit(true);
  • 对不需要编辑的列单独关闭编辑权限,在列配置项中添加edit: false即可
ganttChart.dataGrid().columns([
  // 可编辑列:继承全局配置,无需额外设置
  {name: 'taskName', title: '任务名称', width: 200},
  {name: 'owner', title: '负责人', width: 120},
  // 不可编辑列:单独关闭编辑能力
  {name: 'createTime', title: '创建时间', width: 130, edit: false},
  {name: 'progress', title: '进度', width: 80, edit: false}
]);

方案2:可编辑列较少时使用

不需要全局开启编辑,只给需要开放编辑的列单独设置edit: true即可,其余列默认不可编辑

const ganttChart = anychart.ganttProject();
// 无需全局开启编辑
ganttChart.dataGrid().columns([
  // 仅指定的列开启编辑
  {name: 'taskName', title: '任务名称', width: 200, edit: true},
  // 其余列默认不可编辑
  {name: 'createTime', title: '创建时间', width: 130},
  {name: 'progress', title: '进度', width: 80}
]);

动态修改列编辑状态的方法:无需重新渲染图表,直接调用对应列实例的edit方法即可生效,示例:
// 关闭索引为1的列的编辑权限
ganttChart.dataGrid().column(1).edit(false);
// 开启索引为0的列的编辑权限
ganttChart.dataGrid().column(0).edit(true);


内容的提问来源于stack exchange,提问作者Prabhu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 22:18:03