记一次bootstrap-table多重排序的实践

背景

由于最近工作在写前端，增加了对列进行排序的需求，去官网学习了bootstrap-table的Multiple Sort，贴上链接Bootstrap Table Examples

这里不得不吐槽一下官网，放出来demo，不贴源码。。。

实现步骤

单列排序

1.先引入jquery和bootstrap-table的插件，

2.在渲染table时，增加这三个属性

$('#table').bootstrapTable({       
        pagination: true,
        sidePagination: "server",
        sortable:true
        ...
        // 也可以把sortable:true加在单独需要排序的列上，
        columns: [{
            field: "id",
            title: "编号",
            width: "60",
            sortable:true
        }
});

此处需注意，虽然sidePagination标识在服务器端分页或客户端分页，但若不加该属性，排序无法生效。

多重排序

1.本次需求还涉及到多重排序，需要引入插件

2.增加属性

$('#table').bootstrapTable({        
        pagination: true,
        sidePagination: "server",        
        url: ...,
        queryParams: function (params) {
            // 此处对排序字段和方式做处理，因为默认的是多个排序字段会分开传入给后台，我需要把多个字段和多个方式同时传入            
            if(null != params.multiSort && undefined != params.multiSort){
                params.sort = params.multiSort.map(item => {
                    return item.sortName;
                }).join(',');
                params.order = params.multiSort.map(item => {
                    return item.sortOrder;
                }).join(',');
                params.multiSort = null;
            }
            return params;
        },
        sortable: true, // 是否启用排序
        showMultiSort: true, // 多列排序
        ....
});

sort:id,name,age

order:asc,desc,asc

 后台设计

// 接口
    @PostMapping("/test")
        public List

附上官网效果