如何通过编程方式触发Grid.js加载时的默认排序

不管使用原生GridJS还是gridjs-svelte封装库，只要能拿到底层JS实例，都可以通过以下两种方式实现加载阶段的默认排序，不需要用户手动点击表头触发。

方案1：初始化配置预设默认排序（优先推荐） #

这是稳定性最高的实现方式，不需要挂载后额外调用实例方法，直接在GridJS初始化参数中配置排序规则，组件首次渲染、数据加载完成后会自动执行排序，UI状态和实际排序结果完全同步。

• 核心配置项：在初始化配置的sort字段下，通过columns数组声明排序规则，数组顺序对应多列排序的优先级，每条规则支持两个参数：
  • 列标识：可以是列的索引（从0开始计数），也可以是列配置中自定义的id字段
  • 排序方向：传0代表升序，传1代表降序
• 代码示例：

// 原生GridJS初始化示例，gridjs-svelte直接将该配置作为组件props传入即可
new Grid({
  columns: ['文章标题', '发布时间', '阅读量'],
  data: tableData,
  sort: {
    columns: [
      // 第一排序规则：索引为1的「发布时间」列默认降序
      { index: 1, direction: 1 },
      // 第二排序规则：索引为2的「阅读量」列默认升序
      { index: 2, direction: 0 }
    ]
  }
})

注意：如果你的表格开启了远程服务端排序，这个配置也会自动在首次数据请求时携带对应的排序参数，不需要额外处理请求逻辑。

方案2：挂载完成后通过实例方法动态触发排序 #

如果需要在组件挂载后、异步数据加载完成后动态设置默认排序，可以直接调用GridJS实例的内置方法实现，核心用到两个API：

• grid.sort(columnKey, direction)：排序触发方法，第一个参数传目标列的索引/自定义ID，第二个参数传排序方向（0升序/1降序）
• 事件监听：通过grid.on(eventName, callback)监听实例生命周期，避免实例未完成初始化就调用方法导致报错，常用的触发时机事件：
  • ready：GridJS实例初始化完成、首次数据渲染完成时触发
  • dataLoaded：每一次数据（包含远程异步数据）加载完成时触发
• gridjs-svelte场景代码示例：

<script>
  import { Grid } from 'gridjs-svelte'
  // 绑定底层GridJS实例
  let gridInst

  const triggerDefaultSort = () => {
    // 数据加载完成后，触发「发布时间」列（索引1）降序排序
    gridInst.sort(1, 1)
  }
</script>

<Grid
  bind:instance={gridInst}
  columns={['文章标题', '发布时间', '阅读量']}
  data={fetchRemoteTableData}
  on:ready={triggerDefaultSort}
/>

踩坑提示 #

• 不要直接在Svelte的onMount生命周期里直接调用sort方法，此时GridJS内部的表格数据、DOM绑定可能还未完成，大概率会出现排序不生效、控制台报错的问题，一定要监听GridJS自身的生命周期事件触发
• 调用实例sort方法后，表头的排序箭头样式、排序状态会自动同步，不需要手动操作DOM更新状态

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