Question

我的数据库中有1000条记录，使用ngFor指令格式化为网格。用户可以通过选择单个行复选框来选择多个记录，或者使用主标题复选框选择全部。

这种方法适用于网格上不到200条记录（使用服务器端分页），因为大小增加，响应时间也是如此。一次选择500条记录需要3-4秒，而1000条记录需要6秒以上。 JSON中的表呈现也会出现同样的情况。

我曾经使用Jquery数据表实现这一壮举，并且选择所有1000条记录的时间不到一秒。

来自server ::

的JSON

dummy = {
          isSelected: false, // for binding ngModel with checkbox
          data1: "test data 1",
          data2: "test data 2",
          data3: "test data 3",
        }

table.component.html

<table class="table">
    <thead>
    <tr>
        <th>
            <div class="field-checkbox-wrapper" style="background:transparent;">
                <input id="headerCheckbox" type="checkbox" value="" name="check" [ngModel]="isSelected" (ngModelChange)="selectAllRows($event)" class="form-checkbox" >
                <label>asdf</label>
            </div>
        </th>
        <th *ngFor="let map of columnMaps">{{ map.header }}</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let record of records; let i = index;" (click)="userRowClicked(record)">
        <td >
            <div class="field-checkbox-wrapper" style="background: transparent;">
                <input type="checkbox" value="" name="check" class="form-checkbox"
                [(ngModel)]="record.uiSelected">
                <label>asdf</label>
            </div>
        </td>
        <td *ngFor="let map of columnMaps" [ctStyleCell]="record[map.access(record)]">
            {{ record[map.access(record)] | formatCell:map.format }}
        </td>
    </tr>
</tbody>
</table>

table.component.ts

@Component({
selector: 'proctur-checkbox-table',
templateUrl: 'checkbox-table.component.html',
/* changeDetection: ChangeDetectionStrategy.OnPush */
})
export class CheckboxTableComponent implements OnChanges {
@Input() records: any[];
@Input() settings: ColumnSetting[];
@Input() tableName: string = '';

@Output() userRowSelect = new EventEmitter();
isAllSelected: boolean = false;
columnMaps: ColumnMap[];
selectedRowGroup: any[] = [];

constructor(private rd: Renderer2, private cd: ChangeDetectorRef) { }

ngOnChanges() {
    if (this.settings) {
        this.columnMaps = this.settings
            .map(col => new ColumnMap(col));
    } else {
        this.columnMaps = Object.keys(this.records[0]).map(key => {
            return new ColumnMap({ primaryKey: key });
        });
    }

}


selectAllRows(ev) {
    if (ev) {
        this.records.forEach(el => {
            el.uiSelected = true;
        })
    }
    else {
        this.records.forEach(el => {
            el.uiSelected = false;
        })
    }
}


userRowClicked(i){
    this.userRowSelect.emit(i);
}
}

使用ngFor 1000行

0 个答案: