24

我对columnDefs动态更改有疑问。这是我的网格选项：

$scope.gridOptions = {
  columnDefs: [],
  enableFilter: true,
  rowData: null,
  rowSelection: 'multiple',
  rowDeselection: true
};

当我从服务器检索数据时：

$scope.customColumns = [];

$http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) {
    angular.forEach(data.Columns, function (c) {
        $scope.customColumns.push(
            {
                headerName: c.Name,
                field: c.Value,
                width: c.Width
            }
        );
    });

    $scope.gridOptions.columnDefs = $scope.customColumns;

    $scope.gridOptions.rowData = data.Products;
    $scope.gridOptions.api.onNewRows();
}).error(function () {

});

注意：这里 c 是来自服务器的列对象。

当动态生成列并将其分配给 $scope.gridOptions.columnDefs 时，存在空白网格，但$scope.customColumns数组中填充了正确生成的列对象。请帮助我是这个错误还是我做错了什么？

4

3 回答 3

60

在 ag-grid 中，gridOptions 中的列在网格初始化时使用一次。如果在初始化后更改列，则必须告诉网格。这是通过调用gridOptions.api.setColumnDefs()

此 api 方法的详细信息在此处的 ag-grid 文档中提供。

于 2015-08-04T17:55:02.557 回答
5

我认为这已经解决了。

我现在可以用最新的角度和 ag-grid 做这样的事情。请注意，我在这里使用的是 ngxs，但这仍然表明能够异步获取列定义，因为我正在根据从后端返回的数据的属性名称获取列定义，在这种情况下为 rowData。

首先，我从后端 API 获取行数据。然后，当它被提取时，我在 Select for 列中执行操作，将标题从返回的数据映射到属性。

如果没有标题，数据将不会显示，一旦标题出现，它将使用所有列定义和数据重新绘制网格。

<ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData$ | async" 
    [columnDefs]="columnsDefs$ | async"
    >
</ag-grid-angular>


export class AgGridComponent {
    @Select(MyState.getColumnDefs) public columnsDefs$!: Observable<ReadonlyArray<any>>;

    @Select(MyState.getRowData) public rowData$!: Observable<ReadonlyArray<any>>;
}
于 2019-08-22T12:48:36.353 回答
2

角。
见演示。

请参阅下面的代码，并注意ag-grid-angular组件的 columnDefs 绑定到我们组件中的同名属性。

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 300px;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"

对 columnDefs 属性的任何更新app.component都将反映在我们的 ag-Grid 实例上。例如，看看我们如何在app.component的构造函数中设置初始列定义：

constructor() {
    this.columnDefs = colDefsAthleteExcluded;
}

我们可以在我们的 ag-Grid 实例中添加或删除列，只需更新 columnDefs 绑定属性，传入一组新的列定义。

  • 以前不存在的列将被添加到 ag-Grid 实例中。

  • 未包含在新集合中的列将从 ag-Grid 实例中删除。

请在“包括运动员栏”和“排除运动员栏”按钮的事件处理程序中查看下面的代码：

// removes the athlete column
onBtExcludeAthleteColumn() {
    this.columnDefs = colDefsAthleteExcluded;
}

// adds the athlete column
onBtIncludeAthleteColumn() {
    this.columnDefs = colDefsAthleteIncluded;
}

要更新现有的列定义，我们首先调用 ag-Grid API 方法getColumnDefs()来获取对网格当前列的引用。然后我们映射列，在更新我们的 columnDefs 绑定属性之前更改任何所需的属性。

然后 ag-Grid 会将现有列与我们的 ag-Grid 实例中的列进行匹配，并更新已更改的列。

请在“Set HeaderNames”和“Remove HeaderNames”按钮的事件处理程序中查看下面的代码：

// sets each columns headerName property
setHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
    this.columnDefs = columnDefs;
}


// clears each columns headerName property
removeHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    this.columnDefs = columnDefs;
}

反应。
见演示。

使用 React 时，我们可以选择以声明方式声明 ag-Grid 列。在上面的示例中，您将看到我们通过映射状态变量并为每个列定义columns返回一个React 组件来创建 ag-Grid 列，同时传播道具：agGridColumn

const App = () => {
    const [columns, setColumns] = useState(colDefsAthleteExcluded);

    return (
        {columns.map(column => (
            <AgGridColumn {...column} key={column.field} />
        ))}

要添加或删除列，我们只需调用setColumnssetState 方法，传入一组新的列定义。

  • 以前不存在的列将被添加到 ag-Grid 实例中。
  • 未包含在新集合中的列将从 ag-Grid 实例中删除。

请在“包括运动员栏”和“排除运动员栏”按钮的事件处理程序中查看下面的代码：

// removes the athlete column
const onBtExcludeAthleteColumn = () => {
    setColumns(colDefsAthleteExcluded);
};

// adds the athlete column
const onBtIncludeAthleteColumn = () => {
    setColumns(colDefsAthleteIncluded);
};

要更新现有的列定义，我们首先调用 ag-Grid API 方法getColumnDefs()来获取对网格当前列的引用。然后我们映射列，在调用setColumns和更新我们的columns状态变量之前更改任何所需的属性。

然后 ag-Grid 会将现有列与我们的 ag-Grid 实例中的列进行匹配，并更新已更改的列。

请在“Set HeaderNames”和“Remove HeaderNames”按钮的事件处理程序中查看下面的代码：

// sets each columns headerName property
const setHeaderNames = () => {
    const newColumns = gridApi.getColumnDefs();
    newColumns.forEach((newColumn, index) => {
        newColumn.headerName = "C" + index;
    });
    setColumns(newColumns);
};

// clears each columns headerName property
const removeHeaderNames = () => {
    const newColumns = gridApi.getColumnDefs();
    newColumns.forEach((newColumn, index) => {
        newColumn.headerName = undefined;
    });
    setColumns(newColumns);
};

Vue。
见演示。

下面您将看到我们的ag-grid-vue组件将其 columnDefs 绑定到我们组件中的同名属性。

<ag-grid-vue
    style="width: 100%; height: 300px;"
    class="ag-theme-alpine"
    id="myGrid"
    :columnDefs="columnDefs"

对 Vue 组件中属性的任何更新columnDefs都将反映在我们的 ag-Grid 实例中。例如，看看我们如何在beforeMount生命周期方法中设置初始列定义：

beforeMount() { 
    this.columnDefs = colDefsAthleteExcluded;
}

要向我们的 ag-Grid 实例添加或删除列，我们更新columnDefs绑定属性，传入一组新的列定义。

  • 以前不存在的列将被添加到 ag-Grid 实例中。
  • 未包含在新集合中的列将从 ag-Grid 实例中删除。

请在“包括运动员栏”和“排除运动员栏”按钮的事件处理程序中查看下面的代码：

// removes the athlete column
btnExcludeAthleteColumn() {
    this.columnDefs = colDefsAthleteExcluded;
},  
// adds the athlete column
btnIncludeAthleteColumn() {
    this.columnDefs = colDefsAthleteIncluded;
}

要更新现有的列定义，我们首先调用 ag-Grid API 方法getColumnDefs()来获取对网格当前列的引用。然后我们映射列，在更新columnDefs绑定属性之前更改任何所需的属性。

然后 ag-Grid 会将现有列与我们的 ag-Grid 实例中的列进行匹配，并更新已更改的列。

请在“Set HeaderNames”和“Remove HeaderNames”按钮的事件处理程序中查看下面的代码：

// sets each columns headerName property
setHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
    this.columnDefs = columnDefs;
}


// clears each columns headerName property
removeHeaderNames() {
    var columnDefs = this.gridApi.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    this.columnDefs = columnDefs;
}

香草 JS。
见演示。

当使用 vanilla JS 时，列定义不能绑定到我们应用程序中的属性，因为 JavaScript 没有内置的反应数据机制。相反，我们使用 ag-Grid API 方法setColumnDefs()来设置和更新我们的列。

要向我们的 ag-Grid 实例添加或删除列，我们调用setColumnDefsAPI，传入一组新的列定义。

  • 以前不存在的列将被添加到 ag-Grid 实例中。
  • 未包含在新集合中的列将从 ag-Grid 实例中删除。

请在“包括运动员栏”和“排除运动员栏”按钮的事件处理程序中查看下面的代码：

// removes athlete column
function onBtExcludeAthleteColumn() {
    gridOptions.api.setColumnDefs(colDefsAthleteExcluded);
}

// adds athlete column
function onBtIncludeAthleteColumn() {
    gridOptions.api.setColumnDefs(colDefsAthleteIncluded);
}

要更新现有的列定义，我们首先调用 ag-Grid API 方法getColumnDefs()来获取对网格当前列的引用。setColumnDefs(colDefs)然后我们映射列，在调用和传递更新的列之前更改任何所需的属性。

然后 ag-Grid 会将现有列与我们的 ag-Grid 实例中的列进行匹配，并更新已更改的列。

请在“Set HeaderNames”和“Remove HeaderNames”按钮的事件处理程序中查看下面的代码：

// sets each columns headerName property
function setHeaderNames() {
    var columnDefs = gridOptions.api.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = "C" + index;
    });
gridOptions.api.setColumnDefs(columnDefs);
}

// clears each columns headerName property
function removeHeaderNames() {
    var columnDefs = gridOptions.api.getColumnDefs();
    columnDefs.forEach(function(colDef, index) {
        colDef.headerName = undefined;
    });
    gridOptions.api.setColumnDefs(columnDefs);
}

阅读我们网站上的完整博客文章或查看我们的文档，了解您可以使用 ag-Grid 实现的各种场景。

艾哈迈德·加迪尔 | 开发者@ag-Grid

于 2020-10-29T11:07:56.387 回答