Skip to content

Commit 5423ca5

Browse files
fangsmilefangsmile
authored
Merge pull request #3717 from VisActor/feat/new-cornerHeaderSelectMode
Feat/new corner header select mode
2 parents cc2a253 + 5890935 commit 5423ca5

5 files changed

Lines changed: 208 additions & 38 deletions

File tree

‎packages/vtable/examples/list/list-rowSeriesNumber-cornerHeaderSelectMode.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import * as VTable from '../../src';
2+
import { bindDebugTool } from '../../src/scenegraph/debug-tool';
3+
const CONTAINER_ID = 'vTable';
4+
const generatePersons = count => {
5+
return Array.from(new Array(count)).map((_, i) => ({
6+
id: i + 1,
7+
email1: `${i + 1}@xxx.com`,
8+
name: `小明${i + 1}`,
9+
lastName: '王',
10+
date1: '2022年9月1日',
11+
tel: '000-0000-0000',
12+
sex: i % 2 === 0 ? 'boy' : 'girl',
13+
work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
14+
city: 'beijing'
15+
}));
16+
};
17+
18+
export function createTable() {
19+
const records = generatePersons(20);
20+
const columns: VTable.ColumnsDefine = [
21+
{
22+
field: 'id',
23+
title: 'ID',
24+
width: '1%',
25+
minWidth: 200,
26+
sort: true
27+
},
28+
{
29+
field: 'email1',
30+
title: 'email',
31+
width: 200,
32+
sort: true
33+
},
34+
{
35+
title: 'full name',
36+
columns: [
37+
{
38+
field: 'name',
39+
title: 'First Name',
40+
width: 200
41+
},
42+
{
43+
field: 'name',
44+
title: 'Last Name',
45+
width: 200
46+
}
47+
]
48+
},
49+
50+
{
51+
field: 'tel',
52+
title: 'telephone',
53+
width: 150
54+
},
55+
{
56+
field: 'work',
57+
title: 'job',
58+
width: 200
59+
},
60+
{
61+
field: 'city',
62+
title: 'city',
63+
width: 150
64+
}
65+
];
66+
const option: VTable.ListTableConstructorOptions = {
67+
container: document.getElementById(CONTAINER_ID),
68+
records,
69+
columns,
70+
tooltip: {
71+
isShowOverflowTextTooltip: true
72+
},
73+
pagination: {
74+
perPageCount: 10,
75+
currentPage: 0
76+
},
77+
rowSeriesNumber: {
78+
title: '行号',
79+
dragOrder: true,
80+
headerStyle: {
81+
bgColor: '#EEF1F5',
82+
borderColor: '#e1e4e8'
83+
},
84+
style: {
85+
borderColor: '#e1e4e8'
86+
}
87+
},
88+
select: {
89+
// headerSelectMode: 'body',
90+
cornerHeaderSelectMode: 'cell'
91+
}
92+
// bottomFrozenRowCount: 1
93+
// autoWrapText: true,
94+
// heightMode: 'autoHeight',
95+
// widthMode: 'adaptive'
96+
};
97+
const tableInstance = new VTable.ListTable(option);
98+
window.tableInstance = tableInstance;
99+
100+
// bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] });
101+
// tableInstance.on('sort_click', args => {
102+
// tableInstance.updateSortState(
103+
// {
104+
// field: args.field,
105+
// order: Date.now() % 3 === 0 ? 'desc' : Date.now() % 3 === 1 ? 'asc' : 'normal'
106+
// },
107+
// false
108+
// );
109+
// return false; //return false代表不执行内部排序逻辑
110+
// });
111+
}

‎packages/vtable/examples/menu.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ export const menus = [
111111
path: 'list',
112112
name: 'list-rowSeriesNumber'
113113
},
114+
{
115+
path: 'list',
116+
name: 'list-rowSeriesNumber-cornerHeaderSelectMode'
117+
},
114118
{
115119
path: 'list',
116120
name: 'list-transpose-rowSeriesNumber'

‎packages/vtable/examples/pivot/pivot-grid-tree-select-cornerHeaderSelectMode.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ export function createTable() {
341341
},
342342
select: {
343343
headerSelectMode: 'body', // 为 body 时，优先选中body
344-
cornerHeaderSelectMode: 'all' // 默认选中整个图表
344+
cornerHeaderSelectMode: 'cell' // 默认选中整个图表
345345
},
346346
dataConfig: {
347347
totals: {
@@ -361,6 +361,17 @@ export function createTable() {
361361
// }
362362
}
363363
},
364+
rowSeriesNumber: {
365+
title: '行号',
366+
dragOrder: true,
367+
headerStyle: {
368+
bgColor: '#EEF1F5',
369+
borderColor: '#e1e4e8'
370+
},
371+
style: {
372+
borderColor: '#e1e4e8'
373+
}
374+
},
364375
heightMode: 'autoHeight',
365376
defaultHeaderColWidth: 100,
366377
autoWrapText: true,

‎packages/vtable/src/state/select/update-position.ts‎

Lines changed: 72 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export function updateSelectPosition(
174174
state.select.ranges = [];
175175
scenegraph.deleteAllSelectBorder();
176176
}
177+
177178
if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
178179
// 选中行表头
179180
const cellRange = table.getCellRange(col, row);
@@ -210,7 +211,8 @@ export function updateSelectPosition(
210211
// 选中表头行号单元格
211212
extendSelectRange = false;
212213

213-
if (state.select.headerSelectMode === 'body') {
214+
const { cornerHeaderSelectMode } = state.select;
215+
if (cornerHeaderSelectMode === 'body') {
214216
state.select.ranges.push({
215217
start: {
216218
col: table.leftRowSeriesNumberCount,
@@ -219,13 +221,46 @@ export function updateSelectPosition(
219221
end: { col: table.colCount - 1, row: table.rowCount - 1 },
220222
skipBodyMerge: true
221223
});
224+
} else if (cornerHeaderSelectMode === 'inline') {
225+
// inline 选中行号所在单元格下所有列
226+
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
227+
state.select.ranges.push({
228+
start: { col: cellRange.start.col, row: cellRange.start.row },
229+
end: { col: cellRange.end.col, row: table.rowCount - 1 },
230+
skipBodyMerge: true
231+
});
232+
} else if (cornerHeaderSelectMode === 'cell') {
233+
// 选中行号单元格
234+
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
235+
state.select.ranges.push({
236+
start: { col: cellRange.start.col, row: cellRange.start.row },
237+
end: { col: cellRange.end.col, row: cellRange.end.row },
238+
skipBodyMerge: skipBodyMerge || undefined
239+
});
222240
} else {
223241
state.select.ranges.push({
224242
start: { col: 0, row: 0 },
225243
end: { col: table.colCount - 1, row: table.rowCount - 1 },
226244
skipBodyMerge: true
227245
});
228246
}
247+
// 旧逻辑
248+
// if (state.select.headerSelectMode === 'body') {
249+
// state.select.ranges.push({
250+
// start: {
251+
// col: table.leftRowSeriesNumberCount,
252+
// row: table.columnHeaderLevelCount
253+
// },
254+
// end: { col: table.colCount - 1, row: table.rowCount - 1 },
255+
// skipBodyMerge: true
256+
// });
257+
// } else {
258+
// state.select.ranges.push({
259+
// start: { col: 0, row: 0 },
260+
// end: { col: table.colCount - 1, row: table.rowCount - 1 },
261+
// skipBodyMerge: true
262+
// });
263+
// }
229264
} else if ((table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)) {
230265
// 选中内容行号单元格
231266
extendSelectRange = false;
@@ -249,7 +284,8 @@ export function updateSelectPosition(
249284
// 选中表头行号单元格
250285
extendSelectRange = false;
251286
const { cornerHeaderSelectMode } = state.select;
252-
if (state.select.headerSelectMode === 'body' || cornerHeaderSelectMode === 'body') {
287+
288+
if (cornerHeaderSelectMode === 'body') {
253289
state.select.ranges.push({
254290
start: {
255291
col: table.rowHeaderLevelCount + table.leftRowSeriesNumberCount,
@@ -258,40 +294,41 @@ export function updateSelectPosition(
258294
end: { col: table.colCount - 1, row: table.rowCount - 1 },
259295
skipBodyMerge: true
260296
});
297+
} else if (cornerHeaderSelectMode === 'cell') {
298+
// 选中普通单元格
299+
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
300+
state.select.ranges.push({
301+
start: { col: cellRange.start.col, row: cellRange.start.row },
302+
end: { col: cellRange.end.col, row: cellRange.end.row },
303+
skipBodyMerge: skipBodyMerge || undefined
304+
});
305+
} else if (cornerHeaderSelectMode === 'inline') {
306+
// inline
307+
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
308+
state.select.ranges.push({
309+
start: { col: cellRange.start.col, row: cellRange.start.row },
310+
end: { col: cellRange.end.col, row: table.rowCount - 1 },
311+
skipBodyMerge: true
312+
});
313+
} else if (cornerHeaderSelectMode === 'all') {
314+
// all 或者用户传的其他的什么值 ：'' | 'test'，虽然类型会提示用户不能为其他的值，
315+
state.select.ranges.push({
316+
start: {
317+
col: table.leftRowSeriesNumberCount,
318+
row: 0
319+
},
320+
end: { col: table.colCount - 1, row: table.rowCount - 1 },
321+
skipBodyMerge: true
322+
});
261323
} else {
262-
if (cornerHeaderSelectMode === 'cell') {
263-
// 选中普通单元格
264-
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
265-
state.select.ranges.push({
266-
start: { col: cellRange.start.col, row: cellRange.start.row },
267-
end: { col: cellRange.end.col, row: cellRange.end.row },
268-
skipBodyMerge: skipBodyMerge || undefined
269-
});
270-
} else if (cornerHeaderSelectMode === 'inline') {
271-
// inline
272-
const cellRange = skipBodyMerge ? { start: { col, row }, end: { col, row } } : table.getCellRange(col, row);
273-
state.select.ranges.push({
274-
start: { col: cellRange.start.col, row: cellRange.start.row },
275-
end: { col: cellRange.end.col, row: table.rowCount - 1 },
276-
skipBodyMerge: true
277-
});
278-
} else {
279-
// all 或者用户传的其他的什么值 ：'' | 'test'，虽然类型会提示用户不能为其他的值，
280-
state.select.ranges.push({
281-
start: {
282-
col: table.leftRowSeriesNumberCount,
283-
row: 0
284-
},
285-
end: { col: table.colCount - 1, row: table.rowCount - 1 },
286-
skipBodyMerge: true
287-
});
288-
}
289-
// 选中全部
290-
// state.select.ranges.push({
291-
// start: { col: table.leftRowSeriesNumberCount, row: 0 },
292-
// end: { col: table.colCount - 1, row: table.rowCount - 1 },
293-
// skipBodyMerge: true
294-
// });
324+
state.select.ranges.push({
325+
start: {
326+
col: table.leftRowSeriesNumberCount,
327+
row: 0
328+
},
329+
end: { col: table.colCount - 1, row: table.rowCount - 1 },
330+
skipBodyMerge: true
331+
});
295332
}
296333
} else if (col >= 0 && row >= 0) {
297334
// 选中普通单元格

‎packages/vtable/src/state/state.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,6 @@ export class StateManager {
441441
// enableColumnHighlight,
442442
/** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
443443
headerSelectMode,
444-
cornerHeaderSelectMode,
445444
disableSelect,
446445
disableHeaderSelect,
447446
highlightMode,
@@ -451,7 +450,8 @@ export class StateManager {
451450
{
452451
/** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
453452
headerSelectMode: 'inline',
454-
cornerHeaderSelectMode: 'all', // 点击 corner 默认选中整个图表
453+
/** 不默认设置该值了，从用户传的 cornerHeaderSelectMode 中获取 */
454+
// cornerHeaderSelectMode: '',
455455
disableSelect: false,
456456
disableHeaderSelect: false,
457457
highlightMode: 'cell',
@@ -460,6 +460,13 @@ export class StateManager {
460460
this.table.options.select
461461
);
462462

463+
/** 设置 cornerHeaderSelectMode */
464+
const cornerHeaderSelectMode = this.table.options.select?.cornerHeaderSelectMode
465+
? this.table.options.select?.cornerHeaderSelectMode
466+
: this.table.options.select?.headerSelectMode === 'body'
467+
? this.table.options.select?.headerSelectMode
468+
: 'all';
469+
463470
// if (enableRowHighlight && enableColumnHighlight) {
464471
// this.select.highlightScope = HighlightScope.cross;
465472
// } else if (enableRowHighlight) {

0 commit comments

Comments
 (0)