角度。
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 绑定属性，传入一组新的列定义。
请在“包括运动员栏”和“排除运动员栏”按钮的事件处理程序中查看下面的代码：
// 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;
}
反应。
See demo。
使用 React 时，我们可以选择以声明方式声明 ag-Grid 列。在上面的示例中，您将看到我们通过映射状态变量 columns 并为每个列定义返回一个 agGridColumn React 组件来创建 ag-Grid 列，同时传播道具：
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 实例中的列进行匹配，并更新已更改的列。
请在“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。
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 实例中的列进行匹配，并更新已更改的列。
请在“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.
See demo.
使用 vanilla 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 实例中的列进行匹配，并更新已更改的列。
请在“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);
}
阅读我们website 上的完整博客文章或查看我们的documentation，了解您可以使用 ag-Grid 实现的各种场景。
艾哈迈德·加迪尔 |开发者@ag-Grid