1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| import { Component, OnInit, OnDestroy } from '@angular/core';
| import { NzMessageService } from 'ng-zorro-antd';
| import { map } from 'rxjs/operators';
| import {
| SimpleTableChange,
| SimpleTableColumn,
| SimpleTableButton,
| } from '@delon/abc';
| import { _HttpClient } from '@delon/theme';
|
| @Component({
| selector: 'app-simple-table',
| templateUrl: './simple-table.component.html',
| })
| export class SimpleTableComponent implements OnInit {
| ps = 20;
| total = 200; // mock total
| args: any = { _allow_anonymous: true };
| url = `https://api.randomuser.me/?results=20`;
| events: any[] = [];
| scroll = { y: '230px' };
| columns: SimpleTableColumn[] = [
| { title: 'id', index: 'id.value', type: 'checkbox' },
| { title: 'Avatar', index: 'picture.thumbnail', type: 'img', width: '80px' },
| {
| title: 'Name',
| index: 'name.first',
| width: '150px',
| format: (item: any) => `${item.name.first} ${item.name.last}`,
| type: 'link',
| click: (item: any) => this.message.info(`${item.name.first}`),
| },
| { title: 'Email', index: 'email' },
| {
| title: 'Gender',
| index: 'gender',
| type: 'yn',
| ynTruth: 'female',
| ynYes: '男',
| ynNo: '女',
| width: '120px',
| },
| { title: 'Events', render: 'events', width: '90px' },
| { title: 'Registered', index: 'registered', type: 'date', width: '150px' },
| {
| title: 'Actions',
| width: '120px',
| buttons: <SimpleTableButton[]>[
| {
| text: 'Edit',
| click: (item: any) => this.message.info(`edit [${item.id.value}]`),
| if: (item: any) => item.gender === 'female',
| },
| {
| text: 'Delete',
| type: 'del',
| click: (item: any) => this.message.info(`deleted [${item.id.value}]`),
| },
| ],
| },
| ];
|
| constructor(public http: _HttpClient, private message: NzMessageService) {}
|
| ngOnInit(): void {
| this.http
| .get('/chart/visit')
| .subscribe((res: any[]) => (this.events = res.slice(0, 8)));
| }
|
| fullChange(val: boolean) {
| this.scroll = val ? { y: '350px' } : { y: '230px' };
| }
| }
|
|
