如何在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
相关产品推荐
相关产品推荐

