bootstrap-table自定义列排序

最新推荐文章于 2025-06-25 09:09:56 发布

原创最新推荐文章于 2025-06-25 09:09:56 发布 · 8.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap-table

bootstrap-table 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何在Bootstrap-table中实现自定义排序功能，包括使用sortable、sortName和sorter属性的方法，以及提供了一段示例代码，展示如何处理含有特殊字符的数据进行数值排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-table要实现排序的功能需要在给定的列添加两个属性

1：sortable（配置项）/data-sortable(html中的属性) 为true

2：如果列表中的数据是单纯的数值则使用sortName（配置项）/data-sort-name(html中的属性)来配置根据表中的那列数据进行排序即可。如果列表中的数据为非数值，则需要通过sorter（配置项）/data-sorter（html中的属性）来自定义排序规则

由于开发中使用了"|"的字符，我写了的自定义排序，代码如下

/**
 *自定义列排序
 * @param valA
 * @param valB
 * @returns {number|*}
 */
function customColumnSort(valA,valB){
    console.log(valA)
    let valAStr = String(valA);
    let valBStr = String(valB);
    if(valAStr.indexOf("|")>0) {
        valA = +valAStr.split("|")[0];
        valB = +valBStr.split("|")[0];
    }
    return compareNumber(valA,valB);
}

/**
 * 比较值的大小
 * 如果numA,numB都是非数值,则返回0,
 * 如果numA为数值numB为非数值,则返回1,
 * 如果numA为非数值，numB为数值返回-1,
 * 如果numA,numB都为数值返回numA-numB的值
 * @param numA
 * @param numB
 * @returns {number}
 */
function compareNumber(numA,numB){
    if(!numberRex.test(numA) && !numberRex.test(numB)){
        return 0;
    }else if(!numberRex.test(numA) && numberRex.test(numB)){
        return -1;
    }else if(numberRex.test(numA) && !numberRex.test(numB)){
        return 1;
    }else{
        return numA - numB;
    }
}

这样在配置项中sorter指向customColumnSort即可实现排序功能