带按钮的Ag-Grid cellRender单击

Question

我正在使用带有ag-grid数据表的角度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时抛出错误，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],
})

见演示。
了解有关 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 2

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

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

上面的代码只是一小部分，检查出完整的例子上Stackblitz