3a3ecabe
 Imshann
init
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import template from "./Table.html";
import style from "antd/lib/table/style/index.css";
class Table {
useModules = ["esNgAntd"];
props = {
columns: Array,
dSource: Array,
rowSelection: Object,
rowKey: String,
loading: Number,
|
|
dd962f77
Imshann
优化
|
13
|
onChange: Function,
|
|
710b4ac0
Imshann
优化
|
14
|
size: String,
|
|
3a3ecabe
Imshann
init
|
15
16
17
|
};
state = {
|
|
710b4ac0
Imshann
优化
|
18
|
size: this.props.size || "default",
|
|
3a3ecabe
Imshann
init
|
19
20
21
22
23
|
dataSource: [],
selectedrecordKeys: [],
selectedrecords: [],
isSelectAll: false,
rowKey: this.props.rowKey || "id",
|
|
dd962f77
Imshann
优化
|
24
25
26
27
|
sortDirections: ["ascend", "descend"],
sorter: {
field: null,
order: null,
|
|
3fe10ef1
Imshann
优化
|
28
|
},
|
|
3a3ecabe
Imshann
init
|
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
};
template = template;
watch = {
dSource: (newValue) => {
if (newValue !== undefined) {
let dataSource = [];
newValue.forEach((record, index) => {
let row = {};
if (this.props.rowSelection) {
row.checked = false;
row.disabled = false;
}
|
|
dd962f77
Imshann
优化
|
43
44
45
46
47
48
49
|
if (
this.props.rowSelection &&
typeof this.props.rowSelection.getCheckboxProps ===
"function"
) {
let extraAttr =
this.props.rowSelection.getCheckboxProps(record);
|
|
3a3ecabe
Imshann
init
|
50
51
52
|
row = Object.assign(row, extraAttr);
}
this.props.columns.forEach((column) => {
|
|
061629e7
Imshann
add
|
53
54
55
56
57
|
// 排序
if (column.sortOrder) {
this.state.sorter.field = column.key;
this.state.sorter.order = column.sortOrder;
}
|
|
dd962f77
Imshann
优化
|
58
59
60
|
row[column.key] = column.render
? column.render(record[column.key], record, index)
: record[column.key];
|
|
3a3ecabe
Imshann
init
|
61
62
63
64
65
66
67
68
69
70
71
72
|
});
// 主键
if (this.props.rowKey !== undefined) {
row[this.state.rowKey] = record[this.state.rowKey];
} else {
row[this.state.rowKey] = index + 1;
}
dataSource[index] = row;
});
this.state.dataSource = dataSource;
}
},
|
|
3fe10ef1
Imshann
优化
|
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
"rowSelection.selectedRowKeys": (newVal) => {
if (Array.isArray(newVal)) {
if (newVal.length > 0) {
this.state.dataSource.map(function (row, key) {
if (newVal.includes(key)) {
row.checked = true;
}
});
} else {
this.state.dataSource.map(function (row) {
row.checked = false;
});
}
}
},
|
|
3a3ecabe
Imshann
init
|
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
};
constructor() {
esNgAntd.createStyle("ant-table", style);
}
handleSelectAll(event) {
this.state.isSelectAll = event.target.checked;
this.state.selectedrecordKeys = [];
this.state.selectedrecords = [];
this.state.dataSource.map((record, key) => {
if (record.disabled === false) {
record.checked = event.target.checked;
}
if (record.checked) {
this.state.selectedrecordKeys.push(key);
this.state.selectedrecords.push(this.props.dSource[key]);
}
return record;
});
|
|
3fe10ef1
Imshann
优化
|
108
109
110
111
112
113
|
if (typeof this.props.rowSelection.onChange === "function") {
this.props.rowSelection.onChange(
this.state.selectedrecordKeys,
this.state.selectedrecords
);
}
|
|
3a3ecabe
Imshann
init
|
114
115
116
|
}
handleSelect(event, index) {
|
|
dd962f77
Imshann
优化
|
117
118
119
|
let pos = this.state.selectedrecordKeys.findIndex(
(value) => value === index
);
|
|
3a3ecabe
Imshann
init
|
120
121
122
123
124
125
126
127
128
129
|
if (event.target.checked && pos === -1) {
this.state.selectedrecordKeys.push(index);
this.state.selectedrecords.push(this.props.dSource[index]);
} else {
this.state.selectedrecordKeys.splice(pos, 1);
this.state.selectedrecords.splice(pos, 1);
}
if (this.state.selectedrecordKeys.length === 0) {
this.state.isSelectAll = false;
}
|
|
3fe10ef1
Imshann
优化
|
130
131
132
133
134
135
|
if (typeof this.props.rowSelection.onChange === "function") {
this.props.rowSelection.onChange(
this.state.selectedrecordKeys,
this.state.selectedrecords
);
}
|
|
dd962f77
Imshann
优化
|
136
137
138
139
140
141
142
|
}
handleSorter(key) {
this.state.sorter.field = key;
if (this.state.sorter.order === null) {
this.state.sorter.order = "ascend";
} else if (this.state.sorter.order === "ascend") {
|
|
3fe10ef1
Imshann
优化
|
143
|
this.state.sorter.order = "descend";
|
|
dd962f77
Imshann
优化
|
144
|
} else if (this.state.sorter.order === "descend") {
|
|
3fe10ef1
Imshann
优化
|
145
|
this.state.sorter.order = null;
|
|
dd962f77
Imshann
优化
|
146
147
148
149
150
|
this.state.sorter.field = null;
}
this.props.onChange({
sorter: this.state.sorter,
});
|
|
3a3ecabe
Imshann
init
|
151
152
|
}
}
|