时间戳

首页 > 解决方案 > 如何使用引导表对第一个表列中的元素进行分组

html - 如何使用引导表对第一个表列中的元素进行分组

问题描述

我想要一个带有引导表的表，其中第一列总是首先排序，以便对相同的值进行分组。

例子

假设它现在按“类”排序，那么它看起来像这样：

| Class | Name  | Day |
|-------|-------|-----|
| 3C    | Ben   | 1   |
| 4A    | Aaron | 2   |
| 4A    | Tom   | 3   |

当表格现在按天排序时，它应该如下所示：

| Class | Name  | Day |
|-------|-------|-----|
| 4A    | Aaron | 2   |
| 4A    | Tom   | 3   |
| 3C    | Ben   | 1   |

问题是它通常看起来像这样：

| Class | Name  | Day |
|-------|-------|-----|
| 4A    | Aaron | 2   |
| 3C    | Ben   | 1   |
| 4A    | Tom   | 3   |

我知道多重排序扩展，但我只发现当单击一列并移动单击另一列时，它将按单击的顺序排序。我的问题是我希望始终首先对第一列进行排序，但我还没有发现如何排序。

标签： htmlsortinghtml-tablebootstrap-table

解决方案

我为我的问题创建了一个巨大的解决方法。即使它对良好的性能不起作用，而且它也不是最好的方法，但无论如何。这是我用一个例子创建的：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>

<table id="table"
       data-editable="true"
       >
  <thead>
    <tr>
      <th data-field="what">Name</th>
      <th data-field="number" data-sortable="true">ID</th>
      <th data-field="sort" data-sortable="true">Something</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  $(function() {
    var sort = [
      {
        "sortName": "what",
        "sortOrder": "asc"
      }
    ]
    var data = [
      {
        'what': 'Group 1',
        'number': '2',
        'sort': 'something',
      },
      {
        'what': 'Group 2',
        'number': '5',
        'sort': 'no',
      },
      {
        'what': 'Group 1',
        'number': '8',
        'sort': 'ok',
      },
      {
        'what': 'Group 3',
        'number': '1',
        'sort': 'ye',
      }
    ]
    var order = "desc";
    var lastColumn = "";
    $table.bootstrapTable({
      onSort: function(name) {
        if(lastColumn == name) {
          if(order == "desc") {
            order = "asc";
          } else {
            order = "desc";
          }
        } else {
          lastColumn = name;
          order = "desc";
        }
        sort = [
          {
            "sortName": "what",
            "sortOrder": "asc"
          }, 
          {
            "sortName": name,
            "sortOrder": order
          }
        ]
        $table.bootstrapTable('multiSort', sort);
      },
      sortPriority: sort,
      data: data,
    })
  })
</script>

它是如何工作的？

因此，只要单击一行（因此对其进行排序），就会触发一个事件。现在，当事件触发时，我执行一个multiSort-value为表设置 a 的命令。这multiSort总是让第一行首先排序，然后单击该行。当再次单击同一行时，它会向另一个方向排序。每当单击另一行时，它会使用默认值而不是当前值进行排序，并且可以再次单击以再次在 asc 和 desc 之间切换。

推荐阅读