Question

我在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中删除任何数据。我能用脚本过滤出来吗？我该怎么做呢？

Answer 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，您就完成了！

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

1 个答案: