14

我是 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' 选项来显示带有复选框的列。复选框确实显示，但每次我使用分页链接转到另一个页面时，选择都会被清除。我正在尝试解决这个问题，因为我的项目中有一个与此类似的问题。

我试图找到有关如何跨页面保留选择的文档，但没有成功，因为只有有限数量的文档可用。这似乎是一个足够普遍的功能，应该有更多关于此的信息，但似乎并非如此。对此问题的任何帮助将不胜感激。

4

3 回答 3

5

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

doEmit: boolean - 是否发出事件（刷新表），默认 = true

我不确定这是否可行，但您可以尝试将其设置为false.

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

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。他们的文档很烂，但总的来说，我认为它比大多数组件要好。

于 2017-10-24T22:01:59.993 回答
1 
import { LocalDataSource } from 'ng2-smart-table';

settings = {
  ...
}
data = [
  ...
]

source: LocalDataSource;

constructor() {
  this.source = new LocalDataSource(this.data);
  this.source.setPaging(1,10,false);
}
于 2018-08-23T19:23:09.707 回答
-1

如果您想在应用程序的生命周期中维护数据，则必须以“持久方式”保存这些数据，并使用保存在 ngOnInit 中的数据。在一个组件中，我使用 ngOnDestroy 和一个 dataService

@Component({
})

export class MyComponent implements OnInit,OnDestroy {}
  variable1:number
  variable2:number
  contructor(private state:MyComponentData)
  ngOnInit() {
       let data=this.state.Data?data:null;
       this.variable1=(data)?data.variable1;
       this.variable2=(data)?data.variable2;
  }
  ngOnDestroy()
  {
       this.state.Data={
            variable1:this.variable1,
            variable2:this.variable2
       }
  }

服务很简单

@Injectable()
export class MyComponentData{
   Data:any;
}
于 2017-10-25T07:25:36.023 回答