Question

我有一个网格，其groupable设置为true，数据使用“process”进行分组，如下所示：

@Component({
moduleId: module.id,
selector: 'dv-utsade-table',
templateUrl: 'UtsadeTableComponent.html'

})
export class UtsadeTableComponent extends InsatsComponentBase {

columns : any[];
constructor(private dialogService: DialogService) {
    super();
}
ngAfterViewInit(){
 window.setTimeout(() =>
     this.columns =  [{ name: 'Körning', prop: 'korning'  },
        { name: 'benamning' },
        { name: 'giva' },
        { name: 'areal' },  
        { name: 'Utförd', prop: 'utford', cellTemplate: new CellTemplates().checkbox } //<----Here,
        { name: 'datum' },
        { name: 'Huvudgröda', prop: 'huvudgroda' },
        { name: 'Gödsel', prop: 'godsel.benamning' },
        { name: 'Giva', prop: 'godsel.giva' }
        ]
    )
 }
}

选择事件发送网格行的索引，但在分组数据中，与实际数据索引无关。所以这个：

refreshSearchResults() {
this.resultsData = process(this.memberships, 
     {
        skip: this.resultsSkip,
        take: this.resultsPageSize,
        sort: this.resultsSort,
        group: this.groups
     }
  );
}

尝试将行选择索引应用于分组数据，但这不正确，因为索引是针对组而不是数据本身。

有关如何通过选择事件索引选择正确的分组数据的任何建议将不胜感激。

Answer 1

您可以使用reduce展平数组并使用绝对索引：

public selectionChange(event) {
    console.log(this.gridView.data.reduce((acc, curr)=> {
        return acc.concat(curr.items);
    }, [])[event.index]);
}

检查这个plunkr

http://plnkr.co/edit/QWLD8awyCXtQ7DRU7pZx?p=preview

Datagrid选择了分组数据的项目

1 个答案: