VisActor / VisActor/VTable

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

Open
#4,485 6 comments 0 reactions 1 assignee View on GitHub

@fangsmile is already working on this.

Since Sep 23, 2025.

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

Description

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

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

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.