bootstrap-table自定义列排序

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即可实现排序功能

你可能感兴趣的:(bootstrap-table)