Skip to content

Commit 9720e2f

Browse files
PoorShawnPoorShawn
committed
fix: update checkbox status in rowMov of tree ListTable
1 parent 19e9583 commit 9720e2f

File tree

5 files changed

+389
-54
lines changed

5 files changed

+389
-54
lines changed

‎packages/vtable/examples/list/list-checkbox-tree-moveRow.ts

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import * as VTable from '../../src';
2+
import { bindDebugTool } from '../../src/scenegraph/debug-tool';
3+
const ListTable = VTable.ListTable;
4+
const CONTAINER_ID = 'vTable';
5+
6+
export function createTable() {
7+
const data = [
8+
{
9+
类别: '办公用品',
10+
销售额: '129.696',
11+
数量: '2',
12+
利润: '60.704',
13+
children: [
14+
{
15+
类别: '信封', // 对应原子类别
16+
销售额: '125.44',
17+
数量: '2',
18+
利润: '42.56',
19+
children: [
20+
{
21+
类别: '黄色信封',
22+
销售额: '125.44',
23+
数量: '2',
24+
利润: '42.56',
25+
children: [
26+
{
27+
类别: '黄色大信封',
28+
销售额: '1375.92',
29+
数量: '3',
30+
利润: '550.2'
31+
},
32+
{
33+
类别: '黄色小信封',
34+
销售额: '1375.92',
35+
数量: '3',
36+
利润: '550.2'
37+
}
38+
]
39+
},
40+
{
41+
类别: '白色信封',
42+
销售额: '1375.92',
43+
数量: '3',
44+
利润: '550.2'
45+
}
46+
]
47+
},
48+
{
49+
类别: '器具', // 对应原子类别
50+
销售额: '1375.92',
51+
数量: '3',
52+
利润: '550.2',
53+
children: [
54+
{
55+
类别: '订书机',
56+
销售额: '125.44',
57+
数量: '2',
58+
利润: '42.56'
59+
},
60+
{
61+
类别: '计算器',
62+
销售额: '1375.92',
63+
数量: '3',
64+
利润: '550.2'
65+
}
66+
]
67+
}
68+
]
69+
},
70+
{
71+
类别: '技术',
72+
销售额: '229.696',
73+
数量: '20',
74+
利润: '90.704',
75+
children: [
76+
{
77+
类别: '设备', // 对应原子类别
78+
销售额: '225.44',
79+
数量: '5',
80+
利润: '462.56'
81+
},
82+
{
83+
类别: '配件', // 对应原子类别
84+
销售额: '375.92',
85+
数量: '8',
86+
利润: '550.2'
87+
},
88+
{
89+
类别: '复印机', // 对应原子类别
90+
销售额: '425.44',
91+
数量: '7',
92+
利润: '34.56'
93+
},
94+
{
95+
类别: '电话', // 对应原子类别
96+
销售额: '175.92',
97+
数量: '6',
98+
利润: '750.2'
99+
}
100+
]
101+
},
102+
{
103+
类别: '家具',
104+
销售额: '129.696',
105+
数量: '2',
106+
利润: '-60.704',
107+
children: [
108+
{
109+
类别: '桌子', // 对应原子类别
110+
销售额: '125.44',
111+
数量: '2',
112+
利润: '42.56',
113+
children: [
114+
{
115+
类别: '黄色桌子',
116+
销售额: '125.44',
117+
数量: '2',
118+
利润: '42.56'
119+
},
120+
{
121+
类别: '白色桌子',
122+
销售额: '1375.92',
123+
数量: '3',
124+
利润: '550.2'
125+
}
126+
]
127+
},
128+
{
129+
类别: '椅子', // 对应原子类别
130+
销售额: '1375.92',
131+
数量: '3',
132+
利润: '550.2',
133+
children: [
134+
{
135+
类别: '老板椅',
136+
销售额: '125.44',
137+
数量: '2',
138+
利润: '42.56'
139+
},
140+
{
141+
类别: '沙发椅',
142+
销售额: '1375.92',
143+
数量: '3',
144+
利润: '550.2'
145+
}
146+
]
147+
}
148+
]
149+
},
150+
{
151+
类别: '生活家电（懒加载）',
152+
销售额: '229.696',
153+
数量: '20',
154+
利润: '90.704',
155+
children: true
156+
}
157+
];
158+
const option: VTable.ListTableConstructorOptions = {
159+
container: document.getElementById(CONTAINER_ID),
160+
columns: [
161+
{
162+
field: '类别',
163+
tree: true,
164+
cellType: 'checkbox',
165+
// headerType: 'checkbox',
166+
title: '类别',
167+
width: 'auto',
168+
sort: true
169+
},
170+
{
171+
cellType: 'radio',
172+
field: '销售额',
173+
title: '销售额',
174+
width: 'auto',
175+
sort: true
176+
// tree: true,
177+
},
178+
{
179+
field: '利润',
180+
title: '利润',
181+
width: 'auto',
182+
sort: true
183+
}
184+
],
185+
showFrozenIcon: true, //显示VTable内置冻结列图标
186+
widthMode: 'standard',
187+
// autoFillHeight: true,
188+
// heightMode: 'adaptive',
189+
allowFrozenColCount: 2,
190+
records: data,
191+
192+
hierarchyIndent: 20,
193+
hierarchyExpandLevel: 2,
194+
195+
// sortState: {
196+
// field: '销售额',
197+
// order: 'desc'
198+
// },
199+
theme: VTable.themes.BRIGHT,
200+
defaultRowHeight: 32,
201+
select: {
202+
disableDragSelect: true
203+
},
204+
// transpose: true,
205+
rowSeriesNumber: {
206+
dragOrder: true
207+
// enableTreeCheckbox: true
208+
}
209+
// enableCheckboxCascade: true
210+
};
211+
212+
const instance = new ListTable(option);
213+
window.tableInstance = instance;
214+
bindDebugTool(instance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] });
215+
216+
const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
217+
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
218+
// TODO 调用接口插入设置子节点的数据
219+
if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
220+
const record = args.originData;
221+
instance.setLoadingHierarchyState(args.col, args.row);
222+
setTimeout(() => {
223+
const children = [
224+
{
225+
类别: record['类别'] + ' - 分类1', // 对应原子类别
226+
销售额: 2,
227+
数量: 5,
228+
利润: 4
229+
},
230+
{
231+
类别: record['类别'] + ' - 分类2', // 对应原子类别
232+
销售额: 3,
233+
数量: 8,
234+
利润: 5
235+
},
236+
{
237+
类别: record['类别'] + ' - 分类3（懒加载）',
238+
销售额: 4,
239+
数量: 20,
240+
利润: 90.704,
241+
children: true
242+
},
243+
{
244+
类别: record['类别'] + ' - 分类4', // 对应原子类别
245+
销售额: 5,
246+
数量: 6,
247+
利润: 7
248+
}
249+
];
250+
instance.setRecordChildren(children, args.col, args.row);
251+
}, 2000);
252+
}
253+
});
254+
255+
window.tableInstance = instance;
256+
}

‎packages/vtable/examples/menu.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export const menus = [
2525
{
2626
path: 'debug',
2727
name: 'scroll'
28+
},
29+
{
30+
path: 'debug',
31+
name: 'list'
2832
}
2933
]
3034
},
@@ -67,6 +71,10 @@ export const menus = [
6771
path: 'list',
6872
name: 'list-checkbox-tree'
6973
},
74+
{
75+
path: 'list',
76+
name: 'list-checkbox-tree-moveRow'
77+
},
7078
{
7179
path: 'list',
7280
name: 'list-tree-20000'

‎packages/vtable/src/state/cell-move/index.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,15 @@ export function endMoveCol(state: StateManager): boolean {
211211
state.columnMove.rowSource
212212
)
213213
) {
214+
const sourceRecordPath = (state.table as ListTable).getRecordIndexByCell(0, moveContext.sourceIndex);
215+
const targetRecordPath = (state.table as ListTable).getRecordIndexByCell(0, moveContext.targetIndex);
216+
214217
state.table.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex);
215-
state.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex);
218+
219+
// 对于checkbox，使用真实完整的路径
220+
state.changeCheckboxOrder(sourceRecordPath, targetRecordPath);
221+
222+
state.changeRadioOrder(moveContext.sourceIndex, moveContext.targetIndex);
216223
}
217224
// clear columns width and rows height cache
218225
if (moveContext.moveType === 'column') {

0 commit comments

Comments
 (0)