[多列排序] 多列排序该怎么使用？

[babalrlr]

点击排序，没有按照预想的逻辑显示。

let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
  .then(res => res.json())
  .then(data => {
    const columns = [
      {
        field: 'Order ID',
        title: 'Order ID',
        width: 'auto',
        showSort: true
      },
      {
        field: 'Customer ID',
        title: 'Customer ID',
        width: 'auto',
        showSort: true
      },
      {
        field: 'Product Name',
        title: 'Product Name',
        width: 'auto'
      },
      {
        field: 'Category',
        title: 'Category',
        width: 'auto'
      },
      {
        field: 'Sub-Category',
        title: 'Sub-Category',
        width: 'auto'
      },
      {
        field: 'Region',
        title: 'Region',
        width: 'auto'
      },
      {
        field: 'City',
        title: 'City',
        width: 'auto'
      },
      {
        field: 'Order Date',
        title: 'Order Date',
        width: 'auto'
      },
      {
        field: 'Quantity',
        title: 'Quantity',
        width: 'auto',
      },
      {
        field: 'Sales',
        title: 'Sales',
        width: 'auto',

      },
      {
        field: 'Profit',
        title: 'Profit',
        width: 'auto',
      }
    ];

    const option = {
      records: data,
      columns,

      widthMode: 'standard',
      multipleSort: true,
    };
    tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);


    let sortState = []
    tableInstance.on('sort_click', args => {
      const item = sortState.find((item) => item.field === args.field);
      let order = args.order;
      if (order === 'normal') order = 'asc';
      else if (order === 'asc') order = 'desc';
      else if (order === 'desc') order = 'normal';
     
      if (!item) {
        // 添加
        sortState.push({ field: args.field, order });
      } else {
        // 改变值
        item.order = order;
      }

      tableInstance.updateSortState(sortState, false);

      return false; //return false代表不执行内部排序逻辑
    });
    window['tableInstance'] = tableInstance;
  });

https://github.com/user-attachments/assets/73cfe782-a89e-4673-b2a3-1b08be0bb87e

[fangsmile]

你预想的是什么呢？这份数据你点二级排序 不会有所体现的呀

[babalrlr]

你预想的是什么呢？这份数据你点二级排序 不会有所体现的呀

预想的是 排序图标正确点亮。 按照以下逻辑操作，图标并未正确点亮。

1.  tableInstance.updateSortState([{ field: 'Order ID', order:'asc' }], false)
2. tableInstance.updateSortState([{ field: 'Order ID', order:'asc' }, { field: 'Customer ID', order:'asc' }], false)
3. tableInstance.updateSortState([{ field: 'Order ID', order:'asc' }, { field: 'Customer ID', order:'desc' }], false)
4. tableInstance.updateSortState([{ field: 'Order ID', order:'asc' }, { field: 'Customer ID', order:'asc' }], false)

不需要关注数据是否排序。

[fangsmile]

是亮的啊

[babalrlr]

是亮的啊

把我提问的代码复制上去，然后多点几次看看呢

[fangsmile]

@babalrlr 不亮的时候是normal ，desc asc normally三种状态切换的

[babalrlr]

@fangsmile