标签: ag-grid-react

如何在AG网格控件的标题中居中放置文本？我曾尝试在列定义中使用cellstyle和cellclass，但这没有用。谢谢

如何通过使用键盘箭头键在聚焦于单元格的时间获得聚焦单元格值

我用来ag-grid显示一个带有Row Grouping. 我分组所依据的列是不可见的，因为它的值没有意义。

例如，我将有以下（完全折叠的）表格：

---------------------------------
|   H1       H2        H3        |
----------------------------------
| > groupId1 (1)                 |
----------------------------------
| > groupId2 (5)                 |
----------------------------------

正如您所看到的，分组是通过用户不友好的 ID 完成的，这根本没有反映在列定义中。我想将groupId1/更改groupId2为用户友好的文本，该文本根据组行的内容动态分配。

我在用React。

我使用 ag-Grids 示例作为起点，以下示例体现了我面临的问题：（例如： https: //plnkr.co/edit/VM59gScPD55PhX4y4JBj ?p=preview ）

1. 它有行分组
2. 分组是通过不可见的列（国家/地区）完成的
3. 我想将国家/地区名称动态更改为从内行的值派生的不同值。

谢谢你的时间。:)

尝试更改复选框颜色（由于更改强调色）会导致黑色复选框。

所以我安装了node-sass并成功地更改了各种其他样式，例如，行的悬停颜色$hover-color: cornsilk;

但不知何故使用： $accent-color: #fffff1;或$ag-mat-accent: #fffff1; 只会将其从默认的粉红色更改为黑色。

$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-material/icons/";

$accent-color: #fffff1;
$icon-color: #03a9f4;
$hover-color: cornsilk;

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss";

选中后，我的预期结果将是一个白色的复选框。相反，无论我选择什么颜色，我都会得到一件黑色的。

我在我的react应用程序中使用ag-grid，无法使CSS与Webpack一起使用。

网格看起来像这样

图片：

const path = require("path");
var webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let CopyWebpackPlugin = require("copy-webpack-plugin");
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
var BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
let plug = require("@babel/plugin-proposal-class-properties");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      },
      {
        test: /\.css$/,
        use: "css-loader/locals"
      }
    ]
  },
  node: {
    fs: "empty"
  },
  context: path.join(__dirname, "Scripts", "src"),
  entry: {
    d1: "./entries/d1Page.js",
    h1: "./entries/h1Page.js",
    polyfills: …

据我了解，当filterChangedCallback被调用时，网格会过滤当前数据并调用doesFilterPass，并isFilterActive这样做。

这里我有一个使用自定义过滤器和浮动过滤器的列。浮动过滤器（一个复选框）显示正常，当我onFloatingFilterChanged在调用自定义过滤器中单击它时，会出现绿色过滤器活动图标，网格会刷新，但doesFilterPass根本不会被调用，我无法弄清楚为什么。

有一些基本的东西我没有通过自定义过滤器得到，所以如果有人能阐明这一点，我将不胜感激。

（编辑：这可能是有问题的自定义/浮动过滤器之间的相互作用。去年在 github 上发布了类似的 ag-grid-angular 问题，但没有任何结果。所以也许这是一个错误？）

定制过滤器

export default class BooleanFilter {

  init(params) {
    this.params = params;
    this.valueGetter = params.valueGetter;
    this.filterChangedCallback = params.filterChangedCallback;
    this.status = false;
  }

  onFloatingFilterChanged(status) {
    this.status = status;
    this.filterChangedCallback();
  }

  getGui() {
    return '<div />';
  }

  getModel() {
    return this.isFilterActive() ? { filterType: 'boolean', filter: this.status } : undefined;
  }

  setModel(model) {
    this.state.status = model ? model.value : '';
  }

  isFilterActive() { …

在React 功能组件内访问 ag-Grid API的最佳方式是什么？

onGridReady={params => {
    setGridApi(params.api);
}}