Ag-Grid cellRender with Button Click

Question

我正在使用带有 ag-grid 数据表的 angular 5 我无法在此处使用 cellRenderer 从单元格触发单击事件如何使用我的 ag-grid --> 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")" --> 它可以工作，但我不能使用onClick="drop()"它会抛出未定义的一滴，

我也在 cellRenderer 里面试过这个 --> params = params.$scope.drop = this.drop;

如果将 gridOptions 与angularCompileRows : true一起使用angularCompileRows : true则会引发错误Cannot read property '$apply' of undefined. 我需要安装ag-grid enterprise吗？？

Answer 1

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

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

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

Answer 2

角。
在这里，我们将按钮单元渲染器创建为实现 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],
})

见演示。
了解有关 Angular Cell Renderer 的更多信息。

香草 JavaScript 。
在 init 方法中创建了一个 DOM 元素，然后在 getGui 方法中返回。 可选的 destroy 钩子还包括进行一些清理（从我们的组件中删除点击侦听器）。

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

见演示。
了解有关 JavaScript 单元格渲染器的更多信息。

反应。
这里我们的按钮单元渲染器被构造为一个 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,
}

见演示。
了解有关 React Cell 渲染器的更多信息。

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
    }

见演示。
了解有关 Vue.js 单元格渲染器的更多信息。

阅读我们网站上的完整博客文章或查看我们的文档，了解您可以使用 ag-Grid 实施的各种场景。

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

Answer 3

为了扩展@T4professor 的答案，我将发布一些代码，以便在该 Click 按钮上也有一个动态标签。

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