CSS 自定义前端排序插件

最新推荐文章于 2024-03-17 09:51:22 发布

yydnjas

最新推荐文章于 2024-03-17 09:51:22 发布

阅读量872

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/yydnjas/article/details/124015457

版权

因项目有个需求需要对table的当前页进行排序，当前页面有临时数据，所以只能在前端把这些数据排序再更新表格，没有符合需求的控件可以用，就用CSS整了一个，适合一些用在table要求比较灵活的排序需求上。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="http://192.168.83.178:7006/Scripts/jquery-3.3.1.js"></script>

  <title>Title</title>

  <style type="text/css">
    .on {
      width: 100px;
      height: 40px;
      line-height: 40px;
      display: table-cell;
      position: relative;
    }

    .on a {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #5e5e5e;
    }

    .arrow_bottom {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      transform: rotate(180deg);
      bottom: 11px;
      right: 20px;
    }
	 .arrow_bottom_select {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #7a80dd;
      position: absolute;
      transform: rotate(180deg);
      bottom: 11px;
      right: 20px;
    }

    .arrow_up {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      top: 11px;
      right: 20px;
    }

    .arrow_up_select {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #7a80dd;
      position: absolute;
      top: 11px;
      right: 20px;
    }
  </style>
</head>
<body>

<div class="on" onclick="customSort()">Match%<i id="arrow_up" class="arrow_up"></i><i id="arrow_bottom" class="arrow_bottom"></i></div>
</body>
<script>
  var status = 'default';
   function customSort(){

     if(status === 'default'){
      status = 'asc';
      $("#arrow_up").removeClass('arrow_up');
      $("#arrow_up").addClass('arrow_up_select')
      console.log('default');
     }else if(status==='asc'){
      status = 'desc';
      console.log('asc');
      $("#arrow_up").removeClass('arrow_up_select');
      $("#arrow_up").addClass('arrow_up')
      $("#arrow_bottom").removeClass('arrow_bottom');
      $("#arrow_bottom").addClass('arrow_bottom_select')
     }else if(status==='desc'){
      status = 'default';
      console.log('desc');
      $("#arrow_bottom").removeClass('arrow_bottom_select');
      $("#arrow_bottom").addClass('arrow_bottom')
     }
     alert('click')
   }
</script>
</html>

yydnjas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 自定义前端排序插件

因项目有个需求需要对table的当前页进行排序，当前页面有临时数据，所以只能在前端把这些数据排序再更新表格，没有符合需求的控件可以用，就用CSS整了一个，适合一些用在table要求比较灵活的排序需求上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="http://192.168.83.178:7006/Scripts/jquery-3.
复制链接

扫一扫