表格按列排序实现方法及CSV文件数据读取展示小程序技术咨询

1. 表格按列排序（Sorting table by columns）功能实现 #

• 原生JavaScript实现逻辑：
  • 给所有表头列绑定click事件，每次点击时记录当前排序的字段名，同时切换排序方向（正序/倒序，首次点击默认正序）
  • 调用数组sort()方法对表格的原始数据源做排序：数值型字段直接做差计算排序优先级，字符串/中文类型字段调用localeCompare()方法处理排序规则，避免出现乱序
  • 排序完成后重新渲染表格内容，同时在当前激活的排序列表头处增加升/降序标识，给用户明确反馈
  • 核心逻辑参考代码：

  // tableData为表格原始数据源，sortKey为当前排序列字段，sortOrder为排序方向asc/desc
  tableData.sort((a, b) => {
    if (sortOrder === 'asc') {
      return typeof a[sortKey] === 'number' 
        ? a[sortKey] - b[sortKey] 
        : String(a[sortKey]).localeCompare(String(b[sortKey]), 'zh-CN')
    } else {
      return typeof a[sortKey] === 'number' 
        ? b[sortKey] - a[sortKey] 
        : String(b[sortKey]).localeCompare(String(a[sortKey]), 'zh-CN')
    }
  })
  

• 组件库快速实现：如果项目使用Vue、React等框架，直接调用Element UI、Ant Design等主流组件库的表格组件，开启列配置中的sortable属性即可直接实现排序功能，无需手动编写排序逻辑。

2. 小程序CSV文件数据抓取与展示功能实现 #

完整实现流程分为文件读取、内容解析、数据渲染三个环节：

• 第一步：获取CSV文件内容
  • 如果是静态CSV资源：体积小的话直接放在小程序的static静态资源目录，体积大的话上传到后端服务器，通过wx.request接口请求文件文本内容，注意提前在小程序后台配置请求域名白名单
  • 如果是用户本地上传的CSV：调用wx.chooseMessageFile让用户选择本地CSV文件，再通过wx.getFileSystemManager的readFile接口读取文件文本内容
• 第二步：解析CSV内容为可渲染的JSON格式
  可以直接引入轻量的原生解析逻辑，无需额外引入第三方库，核心解析代码参考：

  // 入参为CSV文件的纯文本内容，返回结构化的JSON数组
  function parseCSV(csvText) {
    // 按行拆分文本，过滤空行
    const lines = csvText.split('\n').filter(line => line.trim())
    // 提取表头行作为字段名
    const headers = lines[0].split(',').map(item => item.trim().replace(/(^"|"$)/g, ''))
    // 逐行解析内容映射为JSON对象
    return lines.slice(1).map(line => {
      const values = line.split(',').map(item => item.trim().replace(/(^"|"$)/g, ''))
      return headers.reduce((res, key, index) => {
        res[key] = values[index]
        return res
      }, {})
    })
  }
  

• 第三步：数据渲染
  解析完成的JSON数组直接绑定到小程序页面对应的data变量中，通过wx:for指令循环渲染为列表或者自定义表格组件即可，如果数据量较大可以增加分页、虚拟滚动逻辑优化渲染性能。

内容的提问来源于stack exchange，提问作者Gobhniu