Cuando un encabezado agrupado (también conocido como anidado) tiene 1 nivel anidado (como "Precio" y "Total" en el ejemplo), hay un comportamiento extraño: esperaría una forma de ocultar toda la columna, pero cuando oculto "Total", "Precio" permanece visible. ¿Hay alguna manera de ocultar eso? Puede ver que funciona bien en caso de que el encabezado de segundo nivel tenga más de 1 elemento: escondo "Id" y "Nombre" y "Clave" se oculta automáticamente.
https://live.bootstrap-table.com/code/antonioaltamura/6940
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script> <table id="table" border=1> </table> <button onclick="togglePrice()"> togglePrice </button> <button onclick="toggleKey()"> toggleKey </button> <script> var $table = $('#table') var priceVisible = true; var keyVisible = true; $(function() { var data = [ { 'id': 0, 'name': 'Item 0', 'price': '$0' }, { 'id': 1, 'name': 'Item 1', 'price': '$1' }, { 'id': 2, 'name': 'Item 2', 'price': '$2' }, { 'id': 3, 'name': 'Item 3', 'price': '$3' }, { 'id': 4, 'name': 'Item 4', 'price': '$4' }, { 'id': 5, 'name': 'Item 5', 'price': '$5' } ] $table.bootstrapTable({ data: data, columns: [ [ { title: "Key", colspan:2 }, { title: "Price", field: "h_price" }, ], [ {title: "Id", field:"id"}, {title: "Name", field:"name"}, {title: "Total", field:"price"} ] ]}) }) function togglePrice() { $table.bootstrapTable(priceVisible ? "hideColumn" : "showColumn", "price") priceVisible = !priceVisible } function toggleKey() { $table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "id") $table.bootstrapTable(keyVisible ? "hideColumn" : "showColumn", "name") keyVisible = !keyVisible } </script>