Rowspan 和 ExcelLikeBootstrap
Rowspan and ExcelLikeBootstrap
我正在使用以下 jquery 插件：Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin
这非常棒，但在某些表上，我有一个 rowspan，它把东西弄乱了。考虑到 roswpan，我该如何修复此插件以在要显示的过滤器中获取适当的日期。
我在下面的JSFiddle中做了一个例子。尝试过滤第二列，您会看到它显示的是快速过滤器中第三列的数据。
https://jsfiddle.net/83wLhg62/1/
// Use the plugin once the DOM has been loaded.
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<table id="table" class="table table-bordered table-intel">
<thead>
<tr class="table-info">
<th>Animal<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="0">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="0">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="0" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="0"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Ant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Ant</div><div class="dropdown-filter-item"><input type="checkbox" value="Barracude" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Barracude</div><div class="dropdown-filter-item"><input type="checkbox" value="Bear" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Bear</div><div class="dropdown-filter-item"><input type="checkbox" value="Crow" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Crow</div><div class="dropdown-filter-item"><input type="checkbox" value="Elephant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Elephant</div><div class="dropdown-filter-item"><input type="checkbox" value="Frog" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Frog</div><div class="dropdown-filter-item"><input type="checkbox" value="Kookaburra" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Kookaburra</div><div class="dropdown-filter-item"><input type="checkbox" value="Owl" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Owl</div><div class="dropdown-filter-item"><input type="checkbox" value="Salamander" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Salamander</div><div class="dropdown-filter-item"><input type="checkbox" value="Shark" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Shark</div></div></div></div></th>
<th>Class<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="1">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="1">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="1" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="1"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Amphibian" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Amphibian</div><div class="dropdown-filter-item"><input type="checkbox" value="Bird" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Bird</div><div class="dropdown-filter-item"><input type="checkbox" value="Fish" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Fish</div><div class="dropdown-filter-item"><input type="checkbox" value="Insect" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Insect</div><div class="dropdown-filter-item"><input type="checkbox" value="Mammal" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Mammal</div></div></div></div></th>
<th>Collective Noun<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="2">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="2">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="2" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="2"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Army" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Army</div><div class="dropdown-filter-item"><input type="checkbox" value="Cackle" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Cackle</div><div class="dropdown-filter-item"><input type="checkbox" value="Congress" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Congress</div><div class="dropdown-filter-item"><input type="checkbox" value="Gam" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Gam</div><div class="dropdown-filter-item"><input type="checkbox" value="Grist" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Grist</div><div class="dropdown-filter-item"><input type="checkbox" value="Herd" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Herd</div><div class="dropdown-filter-item"><input type="checkbox" value="Murder" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Murder</div><div class="dropdown-filter-item"><input type="checkbox" value="Parliament" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Parliament</div><div class="dropdown-filter-item"><input type="checkbox" value="Sleuth" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Sleuth</div></div></div></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Salamander</td>
<td rowspan="12">Amphibian</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr>
<tr>
<td>Owl</td>
<td rowspan="18">Bird</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr>
<tr>
<td>Shark</td>
<td rowspan="12">Fish</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr>
<tr>
<td>Ant</td>
<td rowspan="6">Insect</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
</tr>
</tbody>
</table>
</body>
</html>
最后我找到了一个方法:
当我有一个 rowspan 时添加一个带有 display:none 的列！
cf jsfiddle https://jsfiddle.net/zrf2a4qL/
<td style="display:none;">Amphibian</td>
我正在使用以下 jquery 插件：Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin
这非常棒，但在某些表上，我有一个 rowspan，它把东西弄乱了。考虑到 roswpan，我该如何修复此插件以在要显示的过滤器中获取适当的日期。
我在下面的JSFiddle中做了一个例子。尝试过滤第二列，您会看到它显示的是快速过滤器中第三列的数据。 https://jsfiddle.net/83wLhg62/1/
// Use the plugin once the DOM has been loaded.
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<table id="table" class="table table-bordered table-intel">
<thead>
<tr class="table-info">
<th>Animal<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="0">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="0">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="0" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="0"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Ant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Ant</div><div class="dropdown-filter-item"><input type="checkbox" value="Barracude" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Barracude</div><div class="dropdown-filter-item"><input type="checkbox" value="Bear" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Bear</div><div class="dropdown-filter-item"><input type="checkbox" value="Crow" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Crow</div><div class="dropdown-filter-item"><input type="checkbox" value="Elephant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Elephant</div><div class="dropdown-filter-item"><input type="checkbox" value="Frog" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Frog</div><div class="dropdown-filter-item"><input type="checkbox" value="Kookaburra" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Kookaburra</div><div class="dropdown-filter-item"><input type="checkbox" value="Owl" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Owl</div><div class="dropdown-filter-item"><input type="checkbox" value="Salamander" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Salamander</div><div class="dropdown-filter-item"><input type="checkbox" value="Shark" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Shark</div></div></div></div></th>
<th>Class<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="1">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="1">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="1" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="1"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Amphibian" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Amphibian</div><div class="dropdown-filter-item"><input type="checkbox" value="Bird" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Bird</div><div class="dropdown-filter-item"><input type="checkbox" value="Fish" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Fish</div><div class="dropdown-filter-item"><input type="checkbox" value="Insect" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Insect</div><div class="dropdown-filter-item"><input type="checkbox" value="Mammal" checked="checked" class="dropdown-filter-menu-item item" data-column="1"> Mammal</div></div></div></div></th>
<th>Collective Noun<div class="dropdown-filter-dropdown"><span class="glyphicon glyphicon-arrow-down dropdown-filter-icon"><i class="arrow-down"></i></span><div class="dropdown-filter-content" style="display: none;"><div class="dropdown-filter-sort"><span class="a-to-z" data-column="2">A to Z</span></div><div class="dropdown-filter-sort"><span class="z-to-a" data-column="2">Z to A</span></div><div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control" data-column="2" placeholder="search"></div><div class="checkbox-container"><div class="dropdown-filter-item"><input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="2"> Select All</div><div class="dropdown-filter-item"><input type="checkbox" value="Army" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Army</div><div class="dropdown-filter-item"><input type="checkbox" value="Cackle" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Cackle</div><div class="dropdown-filter-item"><input type="checkbox" value="Congress" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Congress</div><div class="dropdown-filter-item"><input type="checkbox" value="Gam" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Gam</div><div class="dropdown-filter-item"><input type="checkbox" value="Grist" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Grist</div><div class="dropdown-filter-item"><input type="checkbox" value="Herd" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Herd</div><div class="dropdown-filter-item"><input type="checkbox" value="Murder" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Murder</div><div class="dropdown-filter-item"><input type="checkbox" value="Parliament" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Parliament</div><div class="dropdown-filter-item"><input type="checkbox" value="Sleuth" checked="checked" class="dropdown-filter-menu-item item" data-column="2"> Sleuth</div></div></div></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Salamander</td>
<td rowspan="12">Amphibian</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr><tr>
<td>Salamander</td>
<td>Congress</td>
</tr><tr>
<td>Frog</td>
<td>Army</td>
</tr>
<tr>
<td>Owl</td>
<td rowspan="18">Bird</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr><tr>
<td>Owl</td>
<td>Parliament</td>
</tr><tr>
<td>Kookaburra</td>
<td>Cackle</td>
</tr><tr>
<td>Crow</td>
<td>Murder</td>
</tr>
<tr>
<td>Shark</td>
<td rowspan="12">Fish</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr><tr>
<td>Shark</td>
<td>Gam</td>
</tr><tr>
<td>Barracude</td>
<td>Grist</td>
</tr>
<tr>
<td>Ant</td>
<td rowspan="6">Insect</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr><tr>
<td>Ant</td>
<td>Army</td>
</tr>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
</tr>
</tbody>
</table>
</body>
</html>
最后我找到了一个方法:
当我有一个 rowspan 时添加一个带有 display:none 的列！
cf jsfiddle https://jsfiddle.net/zrf2a4qL/
<td style="display:none;">Amphibian</td>