Question

我有一个关于columnDefs动态更改的问题。这是我的gridOptions：

$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数组中填充了正确生成的列对象。请帮帮我这个错误还是我做错了什么？

Answer 1

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

来完成的

这个api方法的详细信息在ag-grid documentation here。

中提供

Answer 2

我认为这个问题已经解决。

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

首先，我要从后端API提取行数据。然后，在提取它时，我在“选择”列中执行将标头从返回的数据映射到属性的操作。

没有标题就不会显示数据，只要有标题就会重新绘制带有所有列定义和数据的网格。

<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>>;
}

Answer 3

角度。
See demo。

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

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

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

constructor() {
    this.columnDefs = colDefsAthleteExcluded;
}

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

以前不存在的列将添加到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实例中的列匹配，并更新已更改的列。

请在事件处理程序中的“设置标题名称”和“删除标题名称”按钮中查看以下代码：

// 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;
}

反应。
See demo。

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

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

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

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

以前不存在的列将添加到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实例中的列进行匹配，并更新已更改的列。

请在事件处理程序中的“设置标题名称”和“删除标题名称”按钮中查看以下代码：

// 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 。
See demo。

在下面，您会看到我们的ag-grid-vue组件的columnDef绑定到同名组件中的属性。

<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实例中的列进行匹配，并更新已更改的列。

请在事件处理程序中的“设置标题名称”和“删除标题名称”按钮中查看以下代码：

// 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 。
See demo。

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

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

以前不存在的列将添加到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实例中的列进行匹配，并更新已更改的列。

请在事件处理程序中的“设置标题名称”和“删除标题名称”按钮中查看以下代码：

// 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);
}

在website上阅读完整的博客文章，或查看我们的documentation，了解可以使用ag-Grid实施的多种方案。

Ahmed Gadir |开发人员@ ag-Grid

Angular Grid ag-grid columnDefs动态更改

3 个答案: