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'(降序)a和b是当前要比较的两行数据对象,你可以直接通过a.storeid和b.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




