Question

我想在angular slickgrid的按钮单击上以网格显示数据。当用户单击搜索按钮时，我已经参考了wiki page和许多在线文章来显示网格数据。

sharing code on SO花费了很多时间来理解并在我的应用程序中实现此功能。这可能使他人受益，甚至其他人也可以分享更好的答案。

我的代码是

import { Component, OnInit } from '@angular/core';
import { Column, FieldType, Formatter, Formatters, GridOption }  from 'angular-slickgrid';

export class ReportComponent implements OnInit {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];

  ngOnInit(): void  
  {        
    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 15
      },
      enableAutoResize: false,
      enableExcelCopyBuffer: true,

    };

    this.columnDefinitions = [
  { id: 'value', name: 'Temperature', field: 'value', sortable: true, type: FieldType.string, width: 70 }   ,
  { id: 'High_value', name: 'High value', field: 'High_value', sortable: true, type: FieldType.string, width: 70 },
  { id: 'Low_value', name: 'Low value', field: 'Low_value', sortable: true, type: FieldType.string, width: 70 },        
    ];    
  }

Search(rangeFrom,rangeTo)
{

this.dataset = [];

this._Dataservice.getHistoricalData(1,rangeFrom.value, rangeTo.value ).then (
           data => { 

             if (data)
             {   
               let i:number =0;
               for (let stat of data) 
              {
                i++;        
                this.dataset[i] = {
                      id: i, 

                      value: stat.value,
                      High_value: stat.High_value,
                      Low_value: stat.Low_value,
                  };

              } 
             }
             else
               this.alertService.error("No data");
           }
    )

}

我的html

 <angular-slickgrid gridId="grid2" style="width:95%;"
                [columnDefinitions]="columnDefinitions"
                [gridOptions]="gridOptions"
                [dataset]="dataset">
            </angular-slickgrid>

我正在使用的版本： jquery ：^ 3.3.1 angular-slickgrid ：^ 2.1.5 @ angular / core ：^ 7.2.0

Answer 1

在进行以下更改后，我做了一些工作。分配数据后，我添加了angularGridReady（）方法以获取网格的引用，并称为angularGrid.dataView.refresh（）方法。

export class ScadaReportComponent implements OnInit {
  angularGrid: AngularGridInstance;

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    console.log('Ready');
  }


  this._Dataservice.getHistoricalData(1,rangeFrom_date, rangeTo_date ).then (
               data => { 
                 if (data)
                 {   
                   for (let stat of data) 
                  { 
                    this.dataset[i] = {
                        id: i,           
                        value: stat.value,
                        High_value: stat.High_value,
                        Low_value: stat.Low_value,                                 
                       };

                  } 

                    this.angularGrid.dataView.refresh();
              }

HTML代码更改如下，我的代码开始工作。

<angular-slickgrid gridId="grid2" style="width:95%;"
            [columnDefinitions]="columnDefinitions"
            [gridOptions]="gridOptions"   (onAngularGridCreated)="angularGridReady($event)"
            [dataset]="dataset">
        </angular-slickgrid>

单击按钮时以Angular-Slickgrid显示数据

1 个答案: