Question

我正在使用带有ag-grid数据表的角度5 我无法在这里使用cellRenderer从单元格触发click事件如何使用我的ag-grid - ＆gt; colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

如果使用onClick="alert("123")" - ＆gt;有用，但我无法使用onClick="drop()"它会丢弃未定义的内容，

我在cellRenderer中也试过这个 - ＆gt; params = params.$scope.drop = this.drop;

如果使用带有angularCompileRows : true的gridOptions，则会引发错误Cannot read property '$apply' of undefined. 我需要安装ag-grid enterprise ??

Answer 1

角度。
在这里，我们将按钮单元渲染器创建为实现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钩子还包括一些清理工作（从组件中删除Click侦听器）。

// 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实施的多种方案。

Ahmed Gadir |开发人员@ ag-Grid

Answer 2

您可以将cellRenderer与按钮组件一起使用。如果要从表上的用户获取按钮上的click事件，只需声明要cellRendererParams的回调函数即可。

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

上面的代码只是一小部分，请查看Stackblitz

上的完整示例

Answer 3

要扩展@ T4professor的答案，我将发布一些代码，使该“单击”按钮上也带有动态标签。

// Author: T4professor

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-button-renderer',
  template: `
    <button class="{{btnClass}}" type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {
    //https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Fapp.component.ts
  params: any;
  label: string;
  getLabelFunction: any;
  btnClass: string;

  agInit(params: any): void {
    this.params = params;
    this.label = this.params.label || null;
    this.btnClass = this.params.btnClass || 'btn btn-primary';
    this.getLabelFunction = this.params.getLabelFunction;

    if(this.getLabelFunction && this.getLabelFunction instanceof Function)
    {
      console.log(this.params);
      this.label = this.getLabelFunction(params.data);
    }

  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(params);

    }
  }
}

然后，在具有网格的组件中，执行以下操作：

columnDefs = [

    {
      headerName: 'Publish',
      cellRenderer: 'buttonRenderer',
      cellRendererParams: {
        onClick: this.onRowPublishBtnClick.bind(this),        
        label: 'Publish',
        getLabelFunction: this.getLabel.bind(this),
        btnClass: 'btn btn-primary btn-sm'
      }
    }  
]

onRowPublishBtnClick(e) {    
    this.rowDataClicked = e.rowData;
  }

  getLabel(rowData)
  {    
    console.log(rowData);
    if(rowData && rowData.hasIndicator)
      return 'Republish';
      else return 'Publish';
  }

Answer 4

您有此问题，因为您错误地调用了drop（），应将其更改为this.drop（）

通常，您应该使用具有简单逻辑的cellRenderer属性。对于复杂的逻辑渲染器，更方便的方法是使用cellRendererFramework：YourCustomRendererAngularComponent。

columnDefs = [
{
  headerName: 'Col Name',
  cellRendererFramwork: MyAngularRendererComponent, // RendererComponent suffix it is naming convention
  cellRendererParams: {
    onClick: (params) => this.click(params);  
  }
},
...
]

MyAngularRendererComponent应该实现AgRendererComponent。

在使用MyAngualrRendererComponent的angular模块中，也不要忘记输入以下代码：

@NgModule({
 imports: [
   AgGridModule.withCompoennts([
      MyAngualrRendererComponent 
   ])
 ]
})

具有按钮单击功能的Ag-Grid cellRender

4 个答案: