如何使用 bootstrap-table 对第一 table 列中的元素进行分组

Question

我想要一个 table 和 bootstrap table，其中第一列总是首先排序，以便相同的值得到分组。

例子

假设它现在按 "Class" 排序，那么它看起来像这样：

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

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

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

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

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

我知道多重排序扩展，但我只发现当单击一列并按住 Shift 键单击另一列时，它将按一次单击的顺序进行排序。我的问题是我希望始终首先对第一列进行排序，但我还没有找到方法。

Answer 1

您尝试使用 Bootstrap sortable plugin 是否成功？据我所知，DataTables 是最流行且易于使用的解决方案之一。

https://datatables.net/examples/basic_init/table_sorting.html

还有一个功能强大的 Bookmarklet（也很容易使用），我过去用过很多次，你应该会觉得有用。如果您需要本地结果，请尝试使用 enter link description here.

Answer 2

我已经为我的问题创建了一个巨大的解决方法，它有效。即使它不能获得良好的性能，而且它肯定不是最好的方法，但无论如何。这是我用示例创建的内容：

<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>

它是如何工作的？

所以只要一行被点击（因此它被排序）就会触发一个事件。现在，当事件触发时，我执行一条命令，为 table 设置 multiSort-value。这 multiSort 始终让第一行先排序，然后单击该行。当同一行再次被点击时，它会向另一个方向排序。每当单击另一行时，它会使用默认值而不是当前值进行排序，并且可以再次单击以再次在升序和降序之间切换。

如何使用 bootstrap-table 对第一 table 列中的元素进行分组

How to group elements in first table column with bootstrap-table

html

sorting

html-table

bootstrap-table