Question

我应该使用热列创建自动完成或HOT-in-HOT。例如这样的

<hot-table>
  <hot-column type="handsontable" data="code_id">
    <hot-table [data]="codes" [autoColumnSize]="true">
      <hot-column data="id" [renderer]="codesRenderer.bind(this)"></hot-column>
    </hot-table>
  </hot-column>
</hot-table>

尽管它不适用于 @ handsontable / angular 包，但可用于设置对象->列。像这样：

{
        data: 'author_id',
        title: 'Author',
        editor: AuthorEditor,
        type: 'handsontable',
        handsontable: {
          data: this.authorService.getAuthors(),
          autoColumnSize: true,
          columns: [
            {
              data: 'id',
              renderer: (instance, TD, row) => {
                const author: Author = instance.getSourceDataAtRow(row);
                TD.innerText = `${author.first_name} ${author.last_name}`;
              }
            }
          ],
          getValue() {
            var selection = this.getSelected();

            return this.getSourceDataAtRow(selection[0]).id;
          }
        },
        renderer: (instance, TD, row, col, prop, value, cellProperties) => {
          const author = this.authorService.getAuthorById(parseInt(value, 10));

          if (!author) {
            return;
          }

          TD.innerText = `${author.first_name} ${author.last_name}`;
        },
      }

我更喜欢使用<hot-column></hot-column>而不是设置对象。

如何用<hot-column>创建 Handsontable类型？

Answer 1

可能看起来像这样，以便在模板中获得基本的自动完成功能

<hot-table>
    <hot-column type="autocomplete"
                [source]="['somevalues','here']"
                [strict]="true/false"
    >
    </hot-column>
</hot-table>

然后，像往常一样传递数据。

注意：绑定这些属性会影响性能，尤其是在大于2000个单元格的表中。使用设置对象会比绑定更优化。

@ handsontable / angular：如何使用热列创建自动完成或可手动操作的类型

1 个答案: