Ag-Grid 셀 버튼 클릭으로 렌더링

Ag-Grid 셀 버튼 클릭으로 렌더링

나는 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()" 않한방지은던울집다니정을의 을 던집니다.

을 시도했습니다 -->= 나셀러안도이것시다니습도했을에서파람스더 --> 는렌= =params.$scope.drop = this.drop;

with gridOptions 옵션을 하는 경우angularCompileRows : true합니다.Cannot read property '$apply' of undefined.설해야합니를 ?ag-grid enterprise??

사용할 수 있습니다.cellRenderer버튼 구성 요소 포함. "" 을 ""으로 .cellRendererParams.

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

위의 코드는 작은 부분일 뿐입니다. Stackblitz에서 전체 예제를 확인하십시오.

각진.
여기서는 IcellRendererAngularComp 인터페이스를 구현하는 Angular 구성 요소로 버튼 셀 렌더러를 만듭니다.params agInit에서 확인할 수 .

// 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에 대해 자세히 알아봅니다.

바닐라 자바스크립트.
DOM 요소는 init 메서드에서 생성된 다음 getGui 메서드에서 반환됩니다.옵션인 파기 후크도 일부 정리를 위해 포함되어 있습니다(클릭 수신기를 구성 요소에서 제거).

// 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 구성 요소로 구성됩니다.여기서 주목해야 할 유일한 점은 소품을 통해 구성요소에서 셀 매개변수를 사용할 수 있다는 것입니다.

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

데모 참조.
리액트 셀 렌더러에 대해 자세히 알아봅니다.

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에 등록되고 버튼 클릭 핸들러는 CellRenderParams를 통해 런타임에 렌더러로 전달되므로 보다 유연하고 재사용 가능한 렌더러가 가능합니다.

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

@T4 교수님의 답변을 확대하기 위해 클릭 버튼에 동적 라벨이 있는 코드를 게시하겠습니다.

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

drop()을 잘못 호출하여 이 문제가 발생했습니다. drop()으로 변경해야 합니다.

일반적으로 간단한 논리로 cellRenderer 속성을 사용해야 합니다.복잡한 논리 렌더러를 위한 더 편리한 방법은 cellRender Framework를 사용해야 합니다.사용자 지정 렌더러 각도 구성 요소.

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

My Angular Renderer 구성 요소는 Agrenderer 구성 요소를 구현해야 합니다.

MyAngualrRendererComponent를 사용하는 각도 모듈에서도 다음 코드를 입력하는 것을 잊지 마십시오.

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

저는 이에 대한 해결책을 찾고 있었지만 같은 열에 있는 여러 버튼을 찾고 있었습니다.어디에서도 답을 찾을 수 없어서 플레인 자바스크립트 솔루션을 작성했습니다.제가 찾던 해결책을 찾는 다른 사람들에게 도움이 되길 바랍니다.또한 자바스크립트를 덜 촌스럽게 만드는 방법에 대한 제안에도 개방적입니다.

multi-btn-cell-render.js

function multiBtnCellRenderer() {}

multiBtnCellRenderer.prototype.init = function(params) {
  var self = this;
  self.params = params;
  self.num_buttons = parseInt(this.params.num_buttons);
  self.btnClickedHandlers = {};
  let outerDiv = document.createElement('div')
  for(let i = 0; i < self.num_buttons; i++) {
    let button = document.createElement('button');
    button.innerHTML = self.params.button_html[i];
    outerDiv.appendChild(button);
    self.btnClickedHandlers[i] = function(event) {
      self.params.clicked[i](self.params.get_data_id());
    }.bind(i, self);
    button.addEventListener('click', self.btnClickedHandlers[i]);
  }
  self.eGui = outerDiv;
};

multiBtnCellRenderer.prototype.getGui = function() {
  return this.eGui;
};

multiBtnCellRenderer.prototype.destroy = function() {
  for(let i = 0; i < this.num_buttons; i++) {
    this.eGui.removeEventListener('click', this.btnClickedHandlers[i]);
  }
};

메인.js

var columnDefs = [
  {
    headerName: "Action",
    maxWidth: 60,
    filter: false,
    floatingFilter: false,
    suppressMenu: true,
    sortable: false,
    cellRenderer: multiBtnCellRenderer,
    cellRendererParams: {
      num_buttons: 2,
      button_html: ["<i class='fa fa-pencil'></i>","<i class='fa fa-trash'></i>"],
      get_data_id: function() {
        return this.data.id;
      },
      clicked: {
        0: function(data_id) {
          $.get(`/employee/${data_id}/edit`)
        },
        1: function(data_id) {
          $.delete(`/employee/${data_id}`)
        }
      }
    }
  }
]

언급URL : https://stackoverflow.com/questions/50778659/ag-grid-cellrender-with-button-click