SlickGrid 构造函数与 Columns 参数的问题

Question

我有一个非常简单的 SlickGrid 示例加载到解决方案中。为此，我首先运行 npm install slickgrid，然后合并一个非常基本的 slickgrid 示例，如下所示：

Typescript 文件包含用于初始化网格的导入和代码：

import { SlickGrid } from 'slickgrid/*';

。 。 .

var data = [
    { id: 1, title: 'Task 1', duration: '5', percentComplete: 20, start: '1/1/2022', finish: '1/5/2022', effortDriven: false },
    { id: 2, title: 'Task 2', duration: '10', percentComplete: 40, start: '1/6/2022', finish: '1/15/2022', effortDriven: false },
    { id: 3, title: 'Task 3', duration: '15', percentComplete: 60, start: '1/16/2022', finish: '1/30/2022', effortDriven: false },
    { id: 4, title: 'Task 4', duration: '20', percentComplete: 80, start: '2/1/2022', finish: '2/20/2022', effortDriven: false },
    { id: 5, title: 'Task 5', duration: '25', percentComplete: 100, start: '2/21/2022', finish: '3/15/2022', effortDriven: false }
];

var columns = [
    { id: 'id', name: 'ID', field: 'id' },
    { id: 'title', name: 'Title', field: 'title' },
    { id: 'duration', name: 'Duration', field: 'duration' },
    { id: '%', name: '% Complete', field: 'percentComplete' },
    { id: 'start', name: 'Start', field: 'start' },
    { id: 'finish', name: 'Finish', field: 'finish' },
    { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven' }
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

var grid = new SlickGrid('#myGrid', data, columns, options);

但是，这会产生编译器错误。 columns 数组似乎需要与 data 相同的数据类型。导航到 SlickGrid 构造函数，考虑到 SlickGrid 构造函数和类导出定义，这似乎是有意义的：

constructor(protected container: HTMLElement | string, protected data: CustomDataView<TData> | TData[], protected columns: C[], protected options: Partial<O>)

export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O extends BaseGridOption<C> = BaseGridOption<C>>

一般来说，我的 UI/UX 经验很少，而且没有 SlickGrid 经验，所以我确信我的某些设置不正确，或者我使用了错误的类/命名空间，或者其他什么，但我不是确定如何诊断/修复。预先感谢您的任何帮助/建议。

Answer 1

您的导入不正确，我不知道为什么 VSCode 有时会自动添加

/*

但它实际上应该是

from 'slickgrid';

（没有结束

/*

）。您应该阅读 v5.0 迁移指南，那里有更多信息和使用示例，请参阅Annoucement Migration 5.0

此外，您似乎正在使用 TypeScript，因为您收到了 TypeScript 错误，因此您还应该将

Column

类型添加到您的列中

import { Column, SlickGrid } from 'slickgrid';

let columns: Column[] = [
  // ...
];

您的问题与此 SlickGrid issue 类似，但您没有使用动态

field

，所以我不确定为什么它会显示此错误，除了您应该像我一样添加

Column

类型这一事实说（这可能是你的问题）