jigsaw/src/app/demo/pc/table/expand-rows/demo.component.ts at 60d1d6bc0361bf0a818a4d8dd7e30e10adfc8893 · rdkmaster/jigsaw · GitHub

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Component, ViewChild } from "@angular/core";
import { TableData, JigsawTable, TableCellSwitchRenderer, TableCellCheckboxRenderer } from "jigsaw/public_api";

@Component({
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css']
})
export class TableExpandTableDemoComponent {
    action = ['toggle'];
    tableData: TableData;
    remainOpen: boolean = false;

    @ViewChild('tableCmp')
    tableCmp: JigsawTable;

    row: number;

    constructor() {
        this.resetData();
    }

    rowData = [
        ["cell-1", { data: false, renderer: TableCellSwitchRenderer }, {
            data: `<a onclick="onClick()">点击</a>`,
            renderer: 'html'
        }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer }],
        ["cell-1", { data: true, renderer: TableCellSwitchRenderer }, {
            data: `<i class="iconfont iconfont-e8e3"></i>`,
            renderer: 'html'
        }, "cell-4", "cell-5", "cell-6", { data: false, renderer: TableCellCheckboxRenderer }],
        ["cell-1", { data: false, renderer: TableCellSwitchRenderer, rendererInitData: { valid: false } }, {
            data: `<i class="iconfont iconfont-ea50"></i> 图标`,
            renderer: 'html'
        }, "cell-4", "cell-5", "cell-6", { data: false, renderer: TableCellCheckboxRenderer, rendererInitData: { valid: false } }],
        ["cell-1", { data: true, renderer: TableCellSwitchRenderer, rendererInitData: { disabled: true } }, , {
            data: `<span>文本</span><i class="iconfont iconfont-e9b6"></i>`,
            renderer: 'html'
        }, "cell-4", "cell-5", "cell-6", { data: true, renderer: TableCellCheckboxRenderer, rendererInitData: { disabled: true } }]
    ]

    onClick() {
        alert("按钮被点击了");
    }

    rowClick(rowIndex: number) {
        this.tableCmp.expand(rowIndex, this.rowData, this, {
            remainOpenAfterDataChanges: this.remainOpen, action: <any>this.action[0]
        });
    };

    updateData() {
        this.tableData.fromObject({
            data: [
                ["Emily", "", "$15128", "2017/4/21", "HR II", 23, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 42, ""],
                ["Easton", "", "$17636", "2017/4/24", "Marketing I", 36, ""],
                ["Emily", "", "$15128", "2017/4/21", "HR II", 65, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 71, ""],
            ],
            field: ["name", "switch", "salary", "enroll-date", "office", "progress", "checkbox"],
            header: ["姓名", "开关组件", "薪资", "入职日期", "部门", "工作进度", "多选框"]
        })
    }

    resetData() {
        this.tableData = new TableData();
        this.tableData.fromObject({
            data: [
                ["Emily", "", "$15128", "2017/4/21", "HR II", 23, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 42, ""],
                ["Easton", "", "$17636", "2017/4/24", "Marketing I", 36, ""],
                ["Emily", "", "$15128", "2017/4/21", "HR II", 65, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 71, ""],
                ["Easton", "", "$17636", "2017/4/24", "Marketing I", 56, ""],
                ["Emily", "", "$15128", "2017/4/21", "HR II", 17, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 38, ""],
                ["Easton", "", "$17636", "2017/4/24", "Marketing I", 9, ""],
                ["Emily", "", "$15128", "2017/4/21", "HR II", 100, ""],
                ["Shirley", "", "$11845", "2017/4/25", "R&D Dept II", 11, ""],
                ["Easton", "", "$17636", "2017/4/24", "Marketing I", 82, ""]
            ],
            field: ["name", "switch", "salary", "enroll-date", "office", "progress", "checkbox"],
            header: ["姓名", "开关组件", "薪资", "入职日期", "部门", "工作进度", "多选框"]
        })
    }

    expandRow(rowIndex: number) {
        this.tableCmp.expand(rowIndex, this.rowData, this, {
            remainOpenAfterDataChanges: this.remainOpen, action: <any>this.action[0]
        });
    }

    rowExpandDataChange($event) {
        this.row = $event.row;
    }


    // ====================================================================
    // ignore the following lines, they are not important to this demo
    // ====================================================================
    summary: string = '';
    description: string = '';
}