更新了 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 方法只执行 show/hide 而不是创建。

另请注意，对于每个可以 shown/hidden 动态

的元素，有一些可见性方法

setTopPanelVisibility
setHeaderRowVisibility
setColumnHeaderVisibility

强烈建议查看源代码，您会发现很多信息，setPreHeaderPanelVisibility 方法显示在这一行 line and you can see all the public options/methods of SlickGrid on this line

更新了 Angular slickgrid 的 GridOption

Updated GridOption of the Angular slickgrid

slickgrid

angular

angular-slickgrid