javascript - Ag-Grid 树结构,将 autoGroupColumn 更改为隐藏 ID

标签 javascript angular ag-grid

我正在使用 ag-grid 来表示树结构。在我的数据中,每一行都有一个 Id 和一个父 Id,这就是树结构的建立方式。现在,当我显示 Ag-grid 时,它会显示这个额外的列,即行的 ID,当我深入研究树时,它会显示子项的相关 ID。有没有办法隐藏此列?下面是数据的结构和我正在使用的 gridOptions:

endDate: null
path: [1, 3, 5]
id: 4
level: "a level"
parentId: 3
Name: "SomeName"
runCount: 1
runNum: 500
StatusCode: "INITIATED"
startDate: "2018-11-05 05:20"
userComment: null

关键元素是 id 和相关的父 id。路径根据 AG-Grid 的要求定义到达该元素的路径。下面是我的网格选项。

this.gridOptions = {
  columnDefs: this.detailsColumnDefs,
  rowData: this.detailsRowData,
  treeData: true,
  animateRows: true,
  enableFilter: true,
  enableSorting: true,
  enableColResize: true,
  getDataPath: function(data) {
    return data.path;
  },
  getRowNodeId: function(data) {
    return data.id;
  },
  autoGroupColumnDef: {
    headerName: 'level',
    width: 250,
    hide: true,
    cellRendererParams: {
      suppressCount: true,
    }
  }
};

autoGroupColumn 显示每行的 ID,但我希望它显示级别。有没有办法为这个列组分配一个字段,我想要那里的级别值而不是 id,或者只是完全删除 id。

最佳答案

您可以将“字段”指定给 autoGroupColumnDef 并让字段绑定(bind)到数据行模型中的属性(即级别),并确保将空值留给属性“级别”,即

autoGroupColumnDef: {
    headerName: 'level',
    field: 'level',
    ......
  }
export class RowModel {
    level: string = '';
    parentId: string;
    id: string;
    ....
}

PS:似乎“隐藏”在某种程度上对组列没有影响——也许值得向 Ag-grid Dev 提出一张票。

关于javascript - Ag-Grid 树结构,将 autoGroupColumn 更改为隐藏 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53178650/

相关文章:

javascript - Angular 1 中的 Angular 2 组件?

angular - 执行 router.navigate 后刷新组件

angular - 如何在 ag-grid 中的特定标题上设置样式

具有动态列定义的 AG-GRID 默认排序模型

javascript - jQuery - 从选定行的单元格中获取数据

javascript - 如何使用 JavaScript 为对象制作动画?

javascript - -c 标志在 NodeJS 中起什么作用?

javascript - 为单独的 div 创建 onmouseover 函数

javascript - Angular 2-zone.js :355 Unhandled Promise rejection: Template parse errors: 'stocks' is not a known element:

angular - 无法让 ng2-bootstrap 模态显示在 bs-modal-backdrop 之上