Fatal编程技术网
  • javascript/
  • Javascript Ag Grid cellRender与按钮单击

Javascript Ag Grid cellRender与按钮单击

javascript typescript ag-grid

Javascript Ag Grid cellRender与按钮单击,javascript,typescript,angular5,ag-grid,ag-grid-ng2,Javascript,Typescript,Angular5,Ag Grid,Ag Grid Ng2,我使用的是带ag栅格的角度5数据表 我无法使用cellRenderer从单元格触发单击事件这里我如何使用我的ag grid-->colDefs this.columnDefs = [ {headerName: '#', rowDrag: true, width: 75}, {headerName: 'One', field: 'fieldName', cellRenderer : function(params){

我使用的是带ag栅格的角度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")
}

this.columnDefs=[
{headerName:'#'，rowDrag:true，width:75}，
{headerName:'One'，fieldName'字段，
cellRenderer:函数（参数）{
返回“单击”
}
}
];
下降（）{
警报（“按钮点击EFD”）
}
如果am使用的是
onClick=“alert（“123”）”
-->它可以工作， 但是我不能使用
onClick=“drop（）”
它抛出未定义的drop

我也在cellRenderer-->params=
params中尝试过这一点。$scope.drop=this.drop

如果我将gridOptions与
angularCompileRows:true一起使用，则会抛出一个错误
无法读取未定义的属性“$apply”。


是否需要安装
ag grid enterprise
？
您可以使用带有按钮组件的
cellRenderer
。
如果希望从表上的用户处获取按钮上的click事件，只需声明要调用的回调函数
CellRenderParams


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



上面的代码只是一小部分，请查看
上的完整示例您有此问题，因为您错误地调用了drop（），您应该将其更改为this.drop（））

通常，您应该将cellRenderer属性与简单逻辑一起使用。对于复杂逻辑渲染器，更方便的方法是使用CellRenderFramework:YourCustomRenderAngularComponent


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


MyAngularRenderComponent应实现AgRenderComponent


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


此外，在使用MyAngualRrenderComponent的angular模块中，请不要忘记输入以下代码：


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



为了扩展@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);

    }
  }
}



角度

这里，我们将按钮单元渲染器创建为实现ICellRenderAngularComp接口的角度组件。可以在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
  }
}


还需要将渲染器传递给@NgModule装饰器，以允许依赖项注入


// app/app.modules.ts
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([BtnCellRenderer]),
  ],
  declarations: [AppComponent, BtnCellRenderer],
  bootstrap: [AppComponent],
})


.



香草JavaScript

在init方法中创建DOM元素，然后在getGui方法中返回该元素。可选的destroy钩子还包括一些清理（从组件中删除click侦听器）

渲染器在gridOptions.components中注册到ag Grid，并用于运动员列。请注意，我们正在通过CellRenderParams将按钮单击处理程序动态传递给渲染器-这使得渲染器更加灵活和可重用


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



// main.js 
var gridOptions = {
  columnDefs: [
    { 
      field: 'athlete', 
      cellRenderer: 'btnCellRenderer', 
      cellRendererParams: {
        clicked: function(field) {
          alert(`${field} was clicked`);
        }
      },
      minWidth: 150
    },
  // [...]
  components: {
    btnCellRenderer: BtnCellRenderer
  }
};



// index.jsx
columnDefs: [
    {
          field: 'athlete',
          cellRenderer: 'btnCellRenderer',
          cellRendererParams: {
            clicked: function(field) {
              alert(`${field} was clicked`);
            },
          },
        // [...]
    }
];
frameworkComponents: {
    btnCellRenderer: BtnCellRenderer,
}



// main.js
    this.columnDefs = [
      {
        field: 'athlete',
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          clicked: function(field) {
            alert(`${field} was clicked`);
          }
        },
      // [...]
    ],
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    }


.



反应

这里，我们的按钮单元渲染器构造为一个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>
    )
  }
}


.



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);
    }
  },
});


.



请阅读我们网站上的完整博客文章，或者查看我们的网站，了解可以使用ag Grid实现的各种场景


Ahmed Gadir | Developer@ag Grid
我不熟悉ag Grid，但您可以尝试使用箭头函数替换该函数：
cellRenderer:（params）=>{…}
。它保留
此
的值。它不起作用…请在将
cellRenderer
属性更改为箭头函数后向我们显示您的代码。例如：
{headerName:'One'，fieldName'，cellRenderer:（参数）=>{return'Click'}
cellRenderer:（参数）=>{return'+params.value+'}
我尝试过这个方法，但它无法触发单击事件。我需要在gridOptions中添加任何选项吗？参考此评论可能会对某人有所帮助。在将此问题的解决方案捆绑在一起后，单击不起作用。这是因为button的z索引。我添加了z索引，它起了作用。完美答案..我正在搜索的选项。非常感谢注释可能会对某些人有所帮助。在这个问题中绑定解决方案后，单击不起作用。这是因为button的z索引。我添加了z索引，它起了作用。是否有任何方法可以获取此按钮组件的一些其他数据？从表中获取一些其他字段数据，例如，如果我想在button组件中添加年龄字段

// main.js
    this.columnDefs = [
      {
        field: 'athlete',
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          clicked: function(field) {
            alert(`${field} was clicked`);
          }
        },
      // [...]
    ],
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    }