ng2智能表复选框在所有页面上都不是持久的

Question

我是ng2-smart-tables的新手.我正在尝试从GitHub页面修改下面的示例,以便在从一个页面移动到另一个页面时复选框不会消失.

import { Component } from '@angular/core';

@Component({
  selector: 'basic-example-multi-select',
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `,
})
export class BasicExampleMultiSelectComponent {

  settings = {
    selectMode: 'multi',
    columns: {
      id: {
        title: 'ID',
      },
      name: {
        title: 'Full Name',
      },
      username: {
        title: 'User Name',
      },
      email: {
        title: 'Email',
      },
    },
  };

  data = [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz',
    },
    {
      id: 2,
      name: 'Ervin Howell',
      username: 'Antonette',
      email: 'Shanna@melissa.tv',
    },
    {
      id: 3,
      name: 'Clementine Bauch',
      username: 'Samantha',
      email: 'Nathan@yesenia.net',
    },
    {
      id: 4,
      name: 'Patricia Lebsack',
      username: 'Karianne',
      email: 'Julianne.OConner@kory.org',
    },
    {
      id: 5,
      name: 'Chelsey Dietrich',
      username: 'Kamren',
      email: 'Lucio_Hettinger@annie.ca',
    },
    {
      id: 6,
      name: 'Mrs. Dennis Schulist',
      username: 'Leopoldo_Corkery',
      email: 'Karley_Dach@jasper.info',
    },
    {
      id: 7,
      name: 'Kurtis Weissnat',
      username: 'Elwyn.Skiles',
      email: 'Telly.Hoeger@billy.biz',
    },
    {
      id: 8,
      name: 'Nicholas Runolfsdottir V',
      username: 'Maxime_Nienow',
      email: 'Sherwood@rosamond.me',
    },
    {
      id: 9,
      name: 'Glenna Reichert',
      username: 'Delphine',
      email: 'Chaim_McDermott@dana.io',
    },
    {
      id: 10,
      name: 'Clementina DuBuque',
      username: 'Moriah.Stanton',
      email: 'Rey.Padberg@karina.biz',
    },
    {
      id: 11,
      name: 'Nicholas DuBuque',
      username: 'Nicholas.Stanton',
      email: 'Rey.Padberg@rosamond.biz',
    },
  ];
}

这使用selectMode:'multi'option来显示带有复选框的列.复选框确实显示,但每次我使用分页链接转到另一个页面时,清除选择.我正在尝试解决这个问题,因为我的项目有问题,这与此类似.

我试图找到关于如何跨页面保持选择的文档,但由于只有有限的文档可用,所以没有成功.这似乎是一个很常见的功能,应该有更多关于此的信息,但似乎并非如此.任何有关这个问题的帮助将不胜感激.

Answer 1

我自己没有对ng2-smart-tables使用多选，但是文档中提到

doEmit：布尔值-是否发出事件（以刷新表），默认= true

我不确定是否可以使用，但是您可以尝试将其设置为false。

根据您的数据创建一个数据源，然后修改分页器设置：

source: LocalDataSource;

constructor() {
    this.source = new LocalDataSource(this.data);
    this.source.setPaging({ doEmit: false });
}

如果这不起作用，则可以尝试添加事件侦听器，这些事件侦听器会在检查时收集选中的行，并在刷新（或初始化）时重新选择它们。将事件回调添加到表中...

<ng2-smart-table [settings]="settings" [source]="source" (rowSelect)="onRowSelect($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

...记录事件，看看是否从那里得到任何有用的信息。

onRowSelect(event) {
    console.log(event);
}

onUserRowSelect(event) {
    console.log(event);
}

如果以上方法均无济于事，请在github上打开一个新问题，并希望开发人员知道一种解决此问题的简便方法。:-)如果那也失败了，那就做我所做的，然后切换到angular / material2。他们的文档很烂，但是总的来说，我认为它比那里的大多数组件都要好。