角度。
在这里，我们将按钮单元格渲染器创建为实现 ICellRendererAngularComp 接口的 Angular 组件。可以在 agInit 钩子上找到对 params 对象的访问。
// app/button-cell-renderer.component.ts
@Component({
selector: 'btn-cell-renderer',
template: `
<button (click)="btnClickedHandler($event)">Click me!</button>
`,
})
export class BtnCellRenderer implements ICellRendererAngularComp, OnDestroy {
private params: any;
agInit(params: any): void {
this.params = params;
}
btnClickedHandler() {
this.params.clicked(this.params.value);
}
ngOnDestroy() {
// no need to remove the button click handler as angular does this under the hood
}
}
渲染器通过 gridOptions.frameworkComponents 注册到 ag-Grid。请注意，我们通过 cellRendererParams 将按钮单击处理程序动态传递给我们的渲染器 - 允许更灵活和可重用的渲染器。
// app/app.component.ts
this.columnDefs = [
{
field: 'athlete',
cellRenderer: 'btnCellRenderer',
cellRendererParams: {
clicked: function(field: any) {
alert(`${field} was clicked`);
}
},
minWidth: 150,
}
// [...]
];
this.frameworkComponents = {
btnCellRenderer: BtnCellRenderer
};
还需要将我们的渲染器传递给我们的@NgModule 装饰器以允许依赖注入。
// app/app.modules.ts
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AgGridModule.withComponents([BtnCellRenderer]),
],
declarations: [AppComponent, BtnCellRenderer],
bootstrap: [AppComponent],
})
See demo.
Learn more about Angular Cell Renderer.
原版 JavaScript。
在 init 方法中创建一个 DOM 元素，然后在 getGui 方法中返回该元素。可选的destroy hook还包括做一些清理工作（从我们的组件中移除点击监听器）。
// btn-cell-renderer.js
function BtnCellRenderer() {}
BtnCellRenderer.prototype.init = function(params) {
this.params = params;
this.eGui = document.createElement('button');
this.eGui.innerHTML = 'Click me!';
this.btnClickedHandler = this.btnClickedHandler.bind(this);
this.eGui.addEventListener('click', this.btnClickedHandler);
}
BtnCellRenderer.prototype.getGui = function() {
return this.eGui;
}
BtnCellRenderer.prototype.destroy = function() {
this.eGui.removeEventListener('click', this.btnClickedHandler);
}
BtnCellRenderer.prototype.btnClickedHandler = function(event) {
this.params.clicked(this.params.value);
}
渲染器在 gridOptions.components 中注册到 ag-Grid 并用于运动员列。请注意，我们通过 cellRendererParams 将按钮单击处理程序动态传递给我们的渲染器 - 这使得渲染器更加灵活和可重用。
// main.js
var gridOptions = {
columnDefs: [
{
field: 'athlete',
cellRenderer: 'btnCellRenderer',
cellRendererParams: {
clicked: function(field) {
alert(`${field} was clicked`);
}
},
minWidth: 150
},
// [...]
components: {
btnCellRenderer: BtnCellRenderer
}
};
See demo.
Learn more about JavaScript Cell Renderers.
反应。
在这里，我们的按钮单元格渲染器被构造为一个 React 组件。这里唯一需要注意的是，单元格参数将通过 props 在组件上可用。
// BtnCellRenderer.jsx
class BtnCellRenderer extends Component {
constructor(props) {
super(props);
this.btnClickedHandler = this.btnClickedHandler.bind(this);
}
btnClickedHandler() {
this.props.clicked(this.props.value);
}
render() {
return (
<button onClick={this.btnClickedHandler}>Click Me!</button>
)
}
}
渲染器通过 gridOptions.frameworkComponents 注册到 ag-Grid。按钮单击处理程序在运行时通过 cellRendererParams 传递给我们的渲染器 - 允许更灵活和可重用的渲染器。
// index.jsx
columnDefs: [
{
field: 'athlete',
cellRenderer: 'btnCellRenderer',
cellRendererParams: {
clicked: function(field) {
alert(`${field} was clicked`);
},
},
// [...]
}
];
frameworkComponents: {
btnCellRenderer: BtnCellRenderer,
}
See demo.
Learn more about React Cell Renderers.
Vue.js。
在 Vue.js 中配置渲染器很简单：
// btn-cell-renderer.js
export default Vue.extend({
template: `
<span>
<button @click="btnClickedHandler()">Click me!</button>
</span>
`,
methods: {
btnClickedHandler() {
this.params.clicked(this.params.value);
}
},
});
与其他框架一样，渲染器通过 gridOptions.frameworkComponents 注册到 ag-Grid，并且按钮单击处理程序在运行时通过 cellRendererParams 传递给我们的渲染器 - 允许更灵活和可重用的渲染器。
// main.js
this.columnDefs = [
{
field: 'athlete',
cellRenderer: 'btnCellRenderer',
cellRendererParams: {
clicked: function(field) {
alert(`${field} was clicked`);
}
},
// [...]
],
this.frameworkComponents = {
btnCellRenderer: BtnCellRenderer
}
See demo.
Learn more about Vue.js Cell Renderers.
阅读我们website 上的完整博客文章或查看我们的documentation，了解您可以使用 ag-Grid 实现的各种场景。
艾哈迈德·加迪尔 |开发者@ag-Grid