bootstrap-table 自定义排序图标

最新推荐文章于 2023-12-26 16:06:26 发布

Merryhyl

最新推荐文章于 2023-12-26 16:06:26 发布

阅读量1w

点赞数

分类专栏： css3 文章标签： bootstrap-table 排序图标样式

本文链接：https://blog.youkuaiyun.com/Merryhyl/article/details/78968542

版权

css3 专栏收录该内容

4 篇文章

订阅专栏

bootstrap-table 修改排序图标

一、修改bootstrap-table.js
1、在表头插入span元素，根据是否启用表格排序添加class=‘both’（为排序箭头做准备）这里写图片描述

2、将removeClass(‘desc asc’)改为removeClass(‘both desc asc’)（为后面写样式准备）

二、修改bootstrap-table.css
1、去掉以图片作为排序图标样式
这里写图片描述
2、添加自定义样式

三、结果

自定义样式代码

.fixed-table-container thead th .both > .both{
margin-left: 15px;
display: inline-block;
position: relative;
}
.fixed-table-container thead th .both > .both:before{
content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
position: absolute;
left: -4px;
top:-10px
}
.fixed-table-container thead th .both > .both:after{
content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position: absolute;
left: -4px;
top:-4px
}
.fixed-table-container thead th .asc >.both{
margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
position:static;
}

.fixed-table-container thead th .desc >.both{
margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position:static;
}