如何使用ag-grid react打开表格中单元格单击的弹出窗口？

Question

是否需要使用调查标签ID根据ag-grid表上的类型打开弹出窗口以及来自数据库的单元格数据？

我可以获取调查标签ID

emoji = () =>{
    isPopup()=true;
  }
onCellClicked = event => {
    console.log(event);
    let tag = event.data.survey_tag_id;
    console.log(tag);
    const column = event.colDef;
    if (column.headerName === "emoji" ){
      this.emoji();
    }else{
      this.showNotification("clicked", "success");
    }
    console.log(
      "onCellClicked: " + event.data.name + ", col " + event.colIndex
    );


  };

Answer 1

通过使用模态概念，我可以在Ag-grid react组件中实现弹出概念

Answer 2

也许这个答案可以帮上忙，但是如果您不能将其翻译成反应，这在角度上很抱歉

parent.html

<div >
      <ag-grid-angular
        style="width: 100%; height: 750px; border-radius: 5px; text-align: left;"
        class="ag-theme-balham-dark"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
        [enableFilter]="true"
        [enableSorting]="true"
        [defaultColDef]="defaultColDef"
        [rowSelection]="rowSelection"
        [animateRows]="true"
        [enableStatusBar]="true"
        [enableColResize]="true"
        [enableRangeSelection]="true"
        [alwaysShowStatusBar]="false"
        (gridReady)="onGridReady($event)"
        (cellClicked)="onCellClicked($event)"
      >
      </ag-grid-angular>
    </div>

parent.ts

graphAlarm(apn:any): void {
    const dialogRef = this.dialog.open(graphAlarm, {
      width: '1000px',
      height: '700px',
      data : apn,
    });
    dialogRef.afterClosed().subscribe(result => {
    });
  }

  onCellClicked(event){
    this.graphAlarm(event)
    console.log('get dialog : ',event.data)
  }

在此部分弹出或在对话框graphAlarm子/部分parent中以角材料 @Component({ selector: 'graph-alarm', templateUrl: ' <div> <div class="row"> <div class="row col-sm-8"> <div class="col"> {{name.kpi}} </div> <div class="col"> <mat-icon>help</mat-icon> </button> </div> </div> <div class="col-sm-4"> <button style="border-radius: 10px; background-color: #044c94;color: white" (click)="sendChangeThreshold()"> save </button> </div> </div> <div class="row"> <div class="col-sm-8" style="border-radius: 10px;"> <div class="row" style="font-size: 12px; "> <table id="table" mat-table [dataSource]="dataSource.nameKPI" class="mat-elevation-z8" style="width: 100%; background-color: #230162; color: white;"> <!-- Position Column --> <ng-container matColumnDef="header"> <th mat-header-cell *matHeaderCellDef style="color: white;"> KPI</th> <td mat-cell *matCellDef="let element" style="color: white;"> {{element.header}} </td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="threshold_up"> <th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Up | 4G</th> <td mat-cell *matCellDef="let element"> <input *ngIf="element.threshold_up && element.header != 'Throughput'" (change)="save(element.header,'up',thresholdUp.value)" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_up}}" #thresholdUp> <input *ngIf="element.threshold_up && element.header == 'Throughput'" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_up}}" disabled> <input *ngIf="element.threshold_up_4g" (change)="save(element.header,'4g up',thresholdUp4G.value)" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_up_4g}}" #thresholdUp4G> <!-- (input)="onSearchChange($event.target.value)">--> </td> </ng-container> <!-- Weight Column --> <ng-container matColumnDef="threshold_down"> <th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Down | 4G</th> <td mat-cell *matCellDef="let element"> <input *ngIf="element.threshold_down && element.header != 'Throughput'" (change)="save(element.header,'low',thresholdDown.value)" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_down}}" #thresholdDown> <!-- (input)="onSearchChange($event.target.value)">--> <input *ngIf="element.threshold_down && element.header == 'Throughput'" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_down}}" disabled> <input *ngIf="element.threshold_down_4g" (change)="save(element.header,'4g low',threshold4GDown.value)" style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;" ngModel="{{element.threshold_down_4g}}" #threshold4GDown> <!-- (input)="onSearchChange($event.target.value)">--> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div> </div> <div class="col-sm-4" style="border-radius: 10px; padding-top: 15px; text-align: center;"> <div class="box_down"> <div class="material-icons" style="font-size: 100px;">note_add</div> <input style="padding-bottom: 10px;font-size: 10px;" type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx"> <div class="listFile"> list file </div> </div> <br> <div class="box_down1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Alarm Triggered</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck2"> <label class="custom-control-label" for="customCheck1">Telegram Bot Alarm</label> </div> </div> </div> </div> </div> ', styleUrls: ['graph-alarm.scss'], animations: [ trigger('detailExpand', [ state('collapsed', style({height: '0px', minHeight: '0'})), state('expanded', style({height: '*'})), transition( 'expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)') ) ]) ] }) export class graphAlarm implements OnInit { constructor( public apn_service: ApnDashboardService, private _snackBar: MatSnackBar, public dialogRef: MatDialogRef<graphAlarm>, @Inject(MAT_DIALOG_DATA) public selected_apn: any, ) { console.log('anu tour', selected_apn.nameKPI); this.dataSource = selected_apn; this.kpi_threshold_up = selected_apn.threshold_up; } ngOnInit() { } onNoClick(): void { this.dialogRef.close(); } }

对话框

graphAlarm.ts

function csvToArray($filename = '', $delimiter = ',')
{
    if (!file_exists($filename) || !is_readable($filename))
        return false;

    $header = null;
    $data = array();
    if (($handle = fopen($filename, 'r')) !== false)
    {
        while (($row = fgetcsv($handle, 1000, $delimiter)) !== false)
        {
            $filtered_row = array();
            foreach ($row as $field) {
               $field = utf8_encode($field); 
               $field = str_replace('', '', $field);
               array_push($filtered_row, $field);
            }
            if (!$header)
                $header = $filtered_row;

            else{
                  print_r($header);
                  print_r($filtered_row); 
                  echo count($header);
                  echo count($filtered_row);
               // exit;
                $data[] = array_combine($header, $filtered_row);
                print_r($data); exit;
            }
        }
        fclose($handle);
    }
    return $data;
}