VisActor / VisActor/VTable

[Bug] 聚合栏type为AggregationType.CUSTOM,结束编辑状态后未更新

Open
#2,660 8 comments 0 reactions 2 assignees View on GitHub

@kapeter is already working on this.

Since Oct 29, 2024.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

1.10.0

Link to Minimal Reproduction

1.10.0

Steps to Reproduce

`
let tableInstance;
// 使用时需要引入插件包@visactor/vtable-editors
// import * as VTable_editors from '@visactor/vtable-editors';
// 正常使用方式 const input_editor = new VTable.editors.InputEditor();
// 官网编辑器中将 VTable.editors重命名成了VTable_editors
const input_editor = new VTable_editors.InputEditor();
const date_input_editor = new VTable_editors.DateInputEditor();
const list_editor = new VTable_editors.ListEditor({ values: ['girl', 'boy'] });
const textArea_editor = new VTable_editors.TextAreaEditor({ readonly: false });
VTable.register.editor('input-editor', input_editor);
VTable.register.editor('date-input-editor', date_input_editor);
VTable.register.editor('textArea-editor', textArea_editor);

function generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function generateRandomHobbies() {
const hobbies = [
'Reading books',
'Playing video games',
'Watching movies',
'Cooking',
'Hiking',
'Traveling',
'Photography',
'Playing \n musical /n instruments',
'Gardening',
'Painting',
'Writing',
'Swimming'
];

const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
const selectedHobbies = [];

for (let i = 0; i < numHobbies; i++) {
const randomIndex = Math.floor(Math.random() * hobbies.length);
const hobby = hobbies[randomIndex];
selectedHobbies.push(hobby);
hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
}

return selectedHobbies.join(', ');
}
function generateRandomBirthday() {
const start = new Date('1970-01-01');
const end = new Date('2000-12-31');
const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
const year = randomDate.getFullYear();
const month = randomDate.getMonth() + 1;
const day = randomDate.getDate();
return ${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day};
}
function generateRandomPhoneNumber() {
const areaCode = [
'130',
'131',
'132',
'133',
'134',
'135',
'136',
'137',
'138',
'139',
'150',
'151',
'152',
'153',
'155',
'156',
'157',
'158',
'159',
'170',
'176',
'177',
'178',
'180',
'181',
'182',
'183',
'184',
'185',
'186',
'187',
'188',
'189'
];
const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
const suffix = String(Math.random()).substr(2, 8);
return prefix + suffix;
}
const generatePersons = count => {
return Array.from(new Array(count)).map((_, i) => {
const first = generateRandomString(10);
const last = generateRandomString(4);
return {
id: i + 1,
email1: ${first}_${last}@xxx.com,
name: first,
lastName: last,
hobbies: generateRandomHobbies(),
birthday: generateRandomBirthday(),
tel: generateRandomPhoneNumber(),
address: 1,
sex: i % 2 === 0 ? 'boy' : 'girl',
work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
city: 'beijing'
};
});
};
const records = generatePersons(10);
const columns = [
{
field: 'id',
title: 'ID',
width: 80,
sort: true
},
// {
// field: 'email1',
// title: 'email',
// width: 'auto',
// sort: true,
// editor: 'input-editor'
// },
{
field: 'full name',
title: 'Full name',
columns: [
{
field: 'name',
title: 'First Name\n(input editor)',
width: 120,
editor: 'input-editor'
},
{
field: 'lastName',
title: 'Last Name\n(input editor)',
width: 100,
editor: 'input-editor'
}
]
},
// {
// field: 'hobbies',
// title: 'hobbies',
// width: 100,
// editor: 'input-editor'
// },
{
field: 'birthday',
title: 'birthday\n(date editor)',
width: 120,
editor: 'date-input-editor'
},
{
field: 'sex',
title: 'sex\n(list editor)',
width: 100,
editor: 'list-editor'
},
{
field: 'address',
title: 'address\n(textArea editor)',
width: 300,
editor: 'textArea-editor',
aggregation: {
aggregationType: VTable.TYPES.AggregationType.CUSTOM,
aggregationFun(values) {
console.log('vvvv', values);
return values?.reduce((prev, cur) => prev + Number(cur), 0);
},
formatFun(value) {
return value;
}
}
},
{
field: 'tel',
title: 'telephone',
width: 150
},
{
field: 'work',
title: 'job',
width: 200
},
{
field: 'city',
title: 'city',
width: 150
}
];
const option = {
container: document.getElementById(CONTAINER_ID),
records,
columns,
enableLineBreak: true,
autoWrapText: true,
limitMaxAutoWidth: 600,
heightMode: 'autoHeight',
editCellTrigger: 'click',
keyboardOptions: {
copySelected: true,
pasteValueToCell: true,
selectAllOnCtrlA: true
}
};
tableInstance = new VTable.ListTable(option);
tableInstance.on('change_cell_value', arg => {
console.log(arg);
});
window['tableInstance'] = tableInstance;
`

Current Behavior

数据没被刷新。

查看原因:

recalculate 中没有执行对应的方法进行重新计算。

recalculate() {
// do nothing
}

这个设计的意图是啥?

Expected Behavior

结束编辑状态后未重新获取新的数据,刷新单元格

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.