Angular grid ag-grid columnDefs 动态变化

Question

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

Answer 1

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

完成的

api 方法的详细信息在 ag-grid documentation here 中提供。

Answer 2

我认为这已经修复了。

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

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

如果没有 headers，数据将不会显示，只要 headers 存在，它就会重新绘制包含所有列定义和数据的网格。

<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

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

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

请参阅下面“设置 HeaderNames”和“删除 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;
}

反应.
See demo.

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

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

请参阅下面“设置 HeaderNames”和“删除 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.
See demo.

下面您会看到我们的 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 实例中的列进行匹配，并更新已更改的列。

请参阅下面“设置 HeaderNames”和“删除 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.
See demo.

使用 vanilla JS 时，列定义不能绑定到我们应用程序中的属性，因为 JavaScript 没有针对反应数据的 built-in 机制。相反，我们使用 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 实例中的列进行匹配，并更新已更改的列。

请参阅下面“设置 HeaderNames”和“删除 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);
}

阅读我们 website or check out our documentation 上的完整博客 post，了解您可以使用 ag-Grid 实现的各种场景。

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

Angular grid ag-grid columnDefs 动态变化

Angular Grid ag-grid columnDefs Dynamically change

dynamic

angularjs

ag-grid