AG网格隐藏空列

Question

我正在尝试使用简单的行分组来实现 AG 网格，并尝试隐藏空列。有什么办法可以实现这一点吗？

Answer 1

这可以帮助我在 tool.ts 中编写两个函数
第一个返回每列的值
第二个检查列是否为空然后隐藏它

    /**
   *
   * @param o // node data
   * @param propertyName  // columns name = the filed of the headerName
   * @returns
   * This function infers the type of the object T
   * and casts the property name to the key type K,
   * returning the property of the object using the given key T[K]
   */
  public static getProperty<T, K extends keyof T>(o: T, propertyName: K): T[K] {
    return o[propertyName];
  }
  /**
   *
   * @param gridApi
   * @param columnDefs
   * @param columnApi
   * Hide empty columns if all the column is empty
   */
  static hideEmptyColumns(
    gridApi: GridApi,
    columnDefs: any,
    columnApi: ColumnApi
  ) {
    let headers = []; // Headers array to store headersName fields
    if (gridApi) {
      columnDefs.forEach((col) => {
        col.children.forEach((child) => {
          headers.push(child.field);
        });
      });
      const columnsEmptyCheck = [];
      headers.forEach((it) => columnsEmptyCheck.push(true));
      // loop for each node
      gridApi.forEachNode((node) => {
        //loop throw headers
        headers.forEach((header, idx) => {
          const value = this.getProperty(node.data, header);
          if (value?.length === 0 || value === undefined) {
            columnsEmptyCheck[idx] = false;
          }
        });
      });

      /**
       * make the empty columns that has false unvisible
       */

      columnsEmptyCheck.forEach((element, index) => {
        if (element === false) {
          columnApi.setColumnsVisible([headers[index]], false);
        }
      });
    }
  }

Answer 2

AG-grid提供了一个getValue方法来抽象取值逻辑。
它还提供了一个对于此用例非常方便的 rowDataChanged 挂钩。

您可以在下面找到一个在 rowDataChanged 上运行的基本示例，该示例隐藏了空列。

hideEmptyColumns(params: RowDataChangedEvent) {
  const columns = params.columnApi.getAllColumns();
  const rowsNodes = params.api.getRenderedNodes();
  columns.forEach(column => {
    const isColumnEmpty = !rowsNodes.some(rowNode => {
      const value = params.api.getValue(column, rowNode);
      return typeof value !== 'undefined' && value !== null;
    });
    column.setVisible(!isColumnEmpty);
  });
}

Answer 3

您可以通过在该列的列定义上设置 hide=true 来隐藏该列。

如果您想动态实现此目的，则可以利用 columnApi.applyColumnState()：

  hideGold() {
    this.gridColumnApi.applyColumnState({
      state: [{ colId: 'gold', hide: true }],
    });
  }

请参阅 以下示例。

有关列状态的文档。