You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Angular2 ng2-smart-table数字排序异常,求自定义比较函数示例

解决ng2-smart-table数字列排序问题:自定义compareFunction示例

我之前也碰到过一模一样的问题——ng2-smart-table默认的排序逻辑是按字符串比较的,所以像storeid这种数字型的字段,会被当成字符串来排序,自然就出现了1、10、11排在2前面的情况。

要实现正确的数字排序,你只需要在列配置里添加自定义的compareFunction,专门处理数字比较逻辑。直接看代码示例:

// 你的列配置部分
columns: {
  storeid: {
    title: 'Store #',
    sort: true,
    // 自定义数字排序的比较函数
    compareFunction: (direction: string, a: any, b: any) => {
      // 将字段值转为数字,避免字符串比较
      const numA = Number(a.storeid);
      const numB = Number(b.storeid);
      
      // 根据排序方向返回差值:升序时a减b,降序时b减a
      return direction === 'asc' ? numA - numB : numB - numA;
    }
  },
  // 其他列配置...
}

补充说明:

  • direction参数会传入当前的排序方向,值为'asc'(升序)或'desc'(降序)
  • ab是当前要比较的两行数据对象,你可以直接通过a.storeidb.storeid拿到对应字段的值
  • 如果你的storeid可能存在非数字的情况(比如空值、字符串),可以加个容错处理,避免NaN影响排序:
    const numA = isNaN(Number(a.storeid)) ? 0 : Number(a.storeid);
    const numB = isNaN(Number(b.storeid)) ? 0 : Number(b.storeid);
    

配置完这个自定义比较函数后,storeid列就会按照数字大小排序,得到你预期的1、2、3...10、11的顺序了。

内容的提问来源于stack exchange,提问作者Sam Hanson

火山引擎 最新活动