时间戳

首页 > 解决方案 > 将具有 2 个数据的单元格导出到 csv ag 网格

javascript - 将具有 2 个数据的单元格导出到 csv ag 网格

问题描述

我有一个网格，其中包含一些单元格 2 和三个数据。当我尝试将网格导出到csv文件中时，这些列不会被导出。我相信我在编写时必须为他们编写特殊的代码columnKeys。这是我的界面：在此处输入图像描述

我尝试使用附加（+）运算符，但没有运气。这是我的代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from '../services/deals.service';
import * as moment from 'moment';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  private gridApi;
  gridOptions = {
    rowHeight :90,
    headerHeight:60,
    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [

    {headerName: 'Block' ,field:'BLOCKID',width:200, resizable:true,  filter: 'agNumberColumnFilter'} ,

    {headerName: 'Deal' ,field:'DEALID',width:200, resizable:true,    } ,
    {headerName: 'Deal Class' ,field:'DEALCLASS',width:200, resizable:true,  } ,
      {headerName: 'Instr Class' ,field:'INSTRCLASS',width:200, resizable:true,  } ,

     // {headerName: 'Trade \n Start',cellRendererFramework: DateCellRendererComponent ,width:210, resizable:true,  filter: 'agDateColumnFilter' } ,
      {headerName: 'Trade', field : 'TRADEDATE', valueFormatter : this.dateFormatter ,width:150, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
        comparator: function(filterLocalDateAtMidnight, cellValue) {
        //using moment js
        var dateAsString = moment(cellValue).format('DD/MM/YYYY');
        var dateParts = dateAsString.split("/");
        var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

        if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
        return 0
        }

  if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   ,
    {headerName: 'Start', field : 'STARTDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
      comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
      return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
      return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
      return 1;
      }
      }
      }}   ,

  {headerName: 'Folder' ,field:'FOLDERSHORTNAME',filter:true ,width:200, resizable:true},
  {headerName: 'Cpty' ,field:'CPTYSHORTNAME',width:130, resizable:true, filter: true} ,
  ,
  {headerName: 'ShortName \n Name', cellRenderer: function(params){  return   params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME },width:250, resizable:true, sortable: false} ,

  {headerName: 'Quantity \n Settl.Amt',cellRenderer: function(params){  return   params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT + '\n'+ params.data.SETTLECURRENCIESSHORTNAME },width:200, resizable:true, sortable: false} ,
  {headerName: 'Rate \n Fees', cellRenderer: function(params){  return   params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE },width:200, resizable:true, sortable: false} ,
  {headerName: 'Category \n Type',cellRenderer: function(params){  return   params.data.DEALCAT + '<br/>' + params.data.DEALTYPE },width:200, resizable:true, sortable: false} ,
  {headerName: 'End', field : 'ENDDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {
    //inRangeInclusive: true,
    comparator: function(filterLocalDateAtMidnight, cellValue) {
    //using moment js
    var dateAsString = moment(cellValue).format('DD/MM/YYYY');
    var dateParts = dateAsString.split("/");
    var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

    if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
    return 0
    }

    if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   


];

rowData : any;

constructor(private service:DealsService) {



}
dateFormatter(params){
return moment(params.value).format('DD/MM/YYYY');
}

onBtExport() {
  var params = {
    columnSeparator: ';',
    columnKeys: ['BLOCKID','DEALID','DEALCLASS','INSTRCLASS','TRADEDATE','STARTDATE','FOLDERSHORTNAME','CPTYSHORTNAME','INSTRSHORTNAME' + 'INSTRNAME','QUANTITY'+ 'SETTLEAMT','FLOATINGRATESSHORTNAME'+'RENTSPREADFIXEDRATE','DEALCAT'+'DEALTYPE','ENDDATE']
  };



 this.gridApi.exportDataAsCsv(params);
}
onGridReady(params) {
  this.gridApi = params.api; 
}

ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
});    }




}

我非常感谢您的帮助。谢谢你。

标签： javascriptangulartypescriptexport-to-csvag-grid

解决方案

我们将 ag-Grid 与 AdapTable 一起使用，它们具有导出功能，允许您创建可以选择任何列的报告，它们将确保

推荐阅读