如何旋转bootstrap-table (横向视图)？

Question

我希望通过将列标题放在左侧，将行标题放在顶部来显示我的引导表。我正在从JSON获取数据。有什么帮助吗？谢谢

这是我的代码的一个想法(JSON是硬编码的，只是为了测试表的旋转)：

<table id="table">
        <thead class="thead-dark" >
        <tr>
            <th data-align="center" data-sortable="true" data-field="column1">COLUMN 1</th>
            <th data-align="center" data-sortable="true" data-field="column2">COLUMN 2</th>
            <th data-align="center" data-sortable="true" data-field="column3">COLUMN 3</th>
        </tr>
        </thead>
    </table>

    <script>
  var $table = $('#table')

  $(function() {
    var data = [
      {
        'column1': 'value1',
        'column2': 'value11',
        'column3': 'value12'
      },
      {
        'column1': 'value2',
        'column2': 'value21',
        'column3': 'value22'
      },
      {
        'column1': 'value3',
        'column2': 'value31',
        'column3': 'value32'
      },
      {
        'column1': 'value4',
        'column2': 'value41',
        'column3': 'value42'
      },
      {
        'column1': 'value5',
        'column2': 'value51',
        'column3': 'value52'
      },
      {
        'column1': 'value6',
        'column2': 'value61',
        'column3': 'value62'
      }
    ]
    $table.bootstrapTable({data: data})
  })
</script>

Answer 1

我认为CSS网格将是一个非常好和干净的解决方案。

例如：

grid-template-areas:
      "a b c"
      "d e f"
      "g h i";

@include media-breakpoint-down(md) {
    grid-template-areas:
            "c b a"
            "f e d"
            "i h g";
  }

@media (orientation: landscape) {
     grid-template-areas:
            "i h g"
            "f e d"
            "c b a";
}

Answer 2

这对我有帮助，也许对你也有帮助。

<style>
  .bold {
    font-weight: bold;
  }
</style>

<table id="table"></table>

<script>
  var $table = $('#table')

  $(function() {
    var originData = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0',
        'title1': '1',
        'title2': '2',
        'title3': '3',
        'title4': '4',
        'title5': '5'
      }
    ]
    var data = []
        for (var key in originData[0]) {
      data.push({
        key: key,
        value: originData[0][key]
      })
    }

    $table.bootstrapTable({
      data: data,
      columns: [{
        field: 'key',
        title: 'Key',
        class: 'bold'
      }, {
        field: 'value',
        title: 'Value'
      }],
      showHeader: false
    })
  })
</script>