VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.72k stars 147 forks source link

[Bug] 表格排序的点击事件,返回的图标类型和实际点击不同问题 #2465

Closed blngblng closed 3 weeks ago

blngblng commented 1 month ago

Version

1.7.4

Link to Minimal Reproduction

https://www.visactor.io/vtable/demo/basic-functionality/sort?version=1.7.4

Steps to Reproduce

  1. 在官网的排序示例里增加事件绑定代码

window['tableInstance'].on("click_cell", (args) => { const { targetIcon } = args; console.log(targetIcon) })

  1. 在控制台查看输出

Current Behavior

image image

Expected Behavior

应用场景: 给透视维度表的指标设置sort: true,显示排序图标但是实际排序不生效,于是想通过点击事件来调整排序事件来控制表格刷新,从而达到排序的目的。

问题: 目前点击事件返回图标类型跟当前高亮的状态不一致,导致不能准确获取用户需要的排序状态。

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

fangsmile commented 1 month ago

你最好用事件sort_click给透视维度表的指标设置sort: true,显示排序图标但是实际排序不生效, 这个是怎么配置的呢 可以复现吗 @blngblng

blngblng commented 1 month ago

后面改成sort_click了,给透视维度表的指标设置sort: true,显示排序图标但是实际排序不生效的例子大概是下面这样,行头的生效的,但是指标不生效。我在这里补充了提问。 @fangsmile https://github.com/VisActor/VTable/issues/2278

示例代码 `
let tableInstance;

const data = [ {row1:'2024-08-01', row2:'周六', Quantity1:'1', Sales1:'4', Quantity2:'2', Sales2:'2'}, {row1:'2024-08-03', row2:'周四', Quantity1:'2', Sales1:'3', Quantity2:'2', Sales2:'2'}, {row1:'2024-08-07', row2:'周三', Quantity1:'3', Sales1:'2', Quantity2:'2', Sales2:'2'}, {row1:'2024-08-09', row2:'周二', Quantity1:'4', Sales1:'1', Quantity2:'2', Sales2:'2'}, ] const option = { records: data, rows: [ { dimensionKey: 'row1', title: '日期', sort: true, headerStyle: { textStick: true }, width: 'auto' }, { dimensionKey: 'row2', title: '星期', sort: true, headerStyle: { textStick: true }, width: 'auto' } ], columns: [ { dimensionKey: 'data', title: '销售情况', headerStyle: { textStick: true }, width: 'auto' }, ], columnTree: [ { dimensionKey: 'data', value: '商品1', virtual: true, children:[ {indicatorKey: 'Quantity1',}, {indicatorKey: 'Sales1',}, ], width: 'auto' }, { dimensionKey: 'data', value: '商品2', virtual: true, children:[ {indicatorKey: 'Quantity2',}, {indicatorKey: 'Sales2',}, ], width: 'auto' }, ], indicators: [ { indicatorKey: 'Quantity1', title: 'Quantity1', width: 'auto', headerStyle: { fontWeight: 'normal' }, sort:true }, { indicatorKey: 'Sales1', title: 'Sales1', width: 'auto', headerStyle: { fontWeight: 'normal' }, format: rec => { return '$' + Number(rec).toFixed(2); }, sort:true }, { indicatorKey: 'Quantity2', title: 'Quantity2', width: 'auto', headerStyle: { fontWeight: 'normal' }, }, { indicatorKey: 'Sales2', title: 'Sales2', width: 'auto', headerStyle: { fontWeight: 'normal' }, format: rec => { return '$' + Number(rec).toFixed(2); }, }, ], corner: { titleOnDimension: 'all', headerStyle: { textStick: true } }, dataConfig: { }, widthMode: 'standard' }; tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option); window['tableInstance'] = tableInstance; `