更新了 Angular slickgrid 的 GridOption

Question

是否可以通过单击按钮更新选项showPreHeaderPanel 和createPreHeaderPanel。我尝试修改this.gridOptions 并尝试使用this.angularGrid.slickGrid.setOptions 但网格没有更新它。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'ngSlickGrid';

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: "test 1" },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, columnGroup: "test 1" },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, columnGroup: "test 2" },
      { id: 'start', name: 'Start', field: 'start', columnGroup: "test 2" },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableCellNavigation: true,
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    };

    this.dataset = [];

    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }

  public deleteMultiHeader(): void {
    console.log("deleteMultiHeader");
    // this.gridOptions.showPreHeaderPanel = false;
    // this.gridOptions.createPreHeaderPanel = false;
    const gridOpt: GridOption = {
      showPreHeaderPanel: false,
      createPreHeaderPanel: false
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }

  public createMultiHeader(): void {
    console.log("createMultiHeader");
    // this.gridOptions.showPreHeaderPanel = true;
    // this.gridOptions.createPreHeaderPanel = true;
    const gridOpt: GridOption = {
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }
}

<div class="container">
  <button (click)="deleteMultiHeader()" data-test="auto-commit">
    Delete multi header
  </button>
  <button (click)="createMultiHeader()" data-test="auto-commit">
    Create multi header
  </button>
  <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
    [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)">
  </angular-slickgrid>
</div>

Answer 1

请注意，我是 Angular-Slickgrid 的作者，我没有尝试下面的代码，但我希望它可以工作。

首先，您还应该使用preHeaderPanelHeight 定义一个高度（默认为25），然后您假设该选项将重绘网格和所有内容，这就是您误解它的工作原理的地方，它只是一个选项它没有不要自己做任何事情。如果您首先在网格选项中创建预标题，它应该可以工作，但如果您不希望它首先显示，则不要显示它，然后您调用该方法来切换其可见性，即setPreHeaderPanelVisibility

initializeGrid() {
  this.gridOptions = {
    preHeaderPanelHeight: 35,
    showPreHeaderPanel: false,
    createPreHeaderPanel: true
  }
}

public deleteMultiHeader(): void {
  // signature is setTopPanelVisibility(visible, animate)
  this.angularGrid.slickGrid.setPreHeaderPanelVisibility(false, true);
}

public createMultiHeader(): void {
  this.angularGrid.slickGrid.setPreHeaderPanelVisibility(true, true);
}

我不认为你可以改变，也不能用createPreHeaderPanel即时创建，它可能不会工作（但你可以尝试）因为它需要重建html并且setPreHeaderPanelVisibility方法只做一个显示/隐藏不是创建。

另请注意，每个元素都有一些可见性方法可以动态显示/隐藏

• setTopPanelVisibility
• setHeaderRowVisibility
• setColumnHeaderVisibility

强烈建议您查看源代码，您会发现很多信息，setPreHeaderPanelVisibility 方法显示在此行line 上，您可以在此@ 上看到 SlickGrid 的所有公共选项/方法987654322@