在 Bootstrap json 表中显示特定的行和列答案

【问题标题】：Show a specific row and columns in Bootstrap json table在 Bootstrap json 表中显示特定的行和列
【发布时间】：2017-05-02 08:26:34
【问题描述】：

我在 Bootstrap 表中使用这个 json 数据。 http://codepen.io/nty_/pen/gLZwQV

{
        "dex": "#004",
        "name": "Litten",
        "abilities": "Blaze <br> Intimidate",
        "type": "FIRE",
        "hp": "45",
        "att": "65",
        "def": "40",
        "satt": "60",
        "sdef": "40",
        "speed": "70"
},
    {
        "dex": "#024",
        "name": "Pichu",
        "abilities": "Static <br> Lightningrod",
        "type": "ELECTRIC",
        "hp": "20",
        "att": "40",
        "def": "15",
        "satt": "35",
        "sdef": "35",
        "speed": "60"
},
    {
        "dex": "#045",
        "name": "Meowth",
        "abilities": "Pickup <br> Technician <br>Rattled",
        "type": "DARK",
        "hp": "40",
        "att": "35",
        "def": "35",
        "satt": "50",
        "sdef": "40",
        "speed": "90"
}

<thead>
            <tr>
                <th data-field="dex" rowspan="2">#Number</th>
                <th data-field="name" rowspan="2">Name</th>
                <th data-field="abilities" rowspan="2">Abilities</th>
                <th data-field="type" rowspan="2">Type</th>
                <th rowspan="1" colspan="6">Base Stats</th>
                </tr>
                <tr>
                    <th data-field="hp">HP</th>
                    <th data-field="att">Att</th>
                    <th data-field="def">Def</th>
                    <th data-field="satt">S.Att</th>
                    <th data-field="sdef">S.Def</th>
                    <th data-field="speed">Speed</th>
                </tr>
        </thead>

我现在想要第二个表，仅从一个条目过滤到特定列。例如- 只有基本统计数据（hp、att、def、satt、sdef、speed）像这样：http://codepen.io/nty_/pen/MbZjxo，而无需从 json 中删除任何数据。我可以用脚本过滤掉它吗？我该怎么做呢？

【问题讨论】：

如果您需要不同的表，您不是已经在第二个示例中完成了吗（codepen.io/nty_/pen/MbZjxo）？如果您只需要在同一个表中显示特定行，您可以使用filterBy 方法，如下所述：bootstrap-table.wenzhixin.net.cn/documentation ...（结合hideColumn 和showColumn）
@Giovazz89 这正是我想做的，但我不知道如何使它与filterBy 一起工作，因为我不太擅长脚本:)

标签： html json filter

【解决方案1】：

当你的事件被触发时（例如$(document).on('click', 'yourSelector (e.g. tr)', function(){ ... }）或者你喜欢的时候你必须调用类似的东西：

$('#table').bootstrapTable('filterBy', {'dex': 'the dex number (e.g. #004)'});

例如，如果单击一行，您应该这样做

$(document).on('click', '#table tr', function(){
   // get the current table and filter by dex number (first <td>)
   var currentTable = $(this).closest('table');
   currentTable.bootstrapTable(
      'filterBy',
      { 'dex': $(this).find('td').first().text() }
   );
   // hide columns
   currentTable.bootstrapTable('hideColumn', 'dex');
   currentTable.bootstrapTable('hideColumn', 'name');
   currentTable.bootstrapTable('hideColumn', 'abilities');
   currentTable.bootstrapTable('hideColumn', 'type');
});

当您想将表格恢复为原始状态时，您只需 .('filterBy', {}) 而不是 hideColumn 使用四个 showColumn 即可！

【讨论】：