footable - 使用 colspan 行进行Footable排序

Question

在对Footable表进行排序时使用带有 colspans 的行时出现排序问题。

我的表结构：

<table class="table footable">
	<thead>
		<tr>
			<th>Name</th>
			<th data-type="numeric">Date of Birth</th>
			<th>Country</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Bill Smith</td>
			<td data-value="315532800">1/1/1980</td>
			<td>England</td>
		</tr>
		<tr>
			<td colspan="3">Some long description of Bill<td>
		</tr>
		
		<!-- Many, many other rows -->
	</tbody>
</table>

我有一个复选框可以打开/关闭 colspan 行，但是如果显示它们并且您按列排序，则所有 colspan 行都会组合在一起。

JSFiddle 演示

有没有一种方法可以正确地将 colspan（描述）行放置在正确的数据行下方？

Answer 1

我已经设法用Javascript（使用jQuery）解决了这个问题。

基本上我默认隐藏“描述”行（在 CSS 中），我有一个复选框来切换它们的可见性。

我的 javascript 挂钩到 Footable 的排序（排序后）事件，并且基本上移动了描述行，因此它们始终位于“数据”行下方。

$('#details').footable().bind({
    'footable_sorted': function(e) {
        var rows = $('#details tbody tr.data');

        rows.each(function()
        {
            var personid = $(this).data('row-person');

            var detail = $('#details tbody tr.descriptions[data-detail-person="'+ personid +'"]');
            $(detail).insertAfter($(this));
        });
    }
});

我还必须向我的表（类/ID）添加额外的标记来启用它。

请参阅我的Fiddler 演示以获取完整的详细信息。

测试多达 370 行并提供可接受的性能。
我确信我的 HTML/JS 可以进一步简化。

Answer 2

所以问题的根源在于描述行是一个单独的行，并且没有与它上面的数据行“链接”。用户知道描述行属于哪个数据行的唯一方法是行的顺序。对表格进行排序后，顺序会发生变化，您不能再依靠顺序来链接数据和描述行。（哇，这有点难以阅读。我提前道歉......）

因此，解决此问题的一种方法是将数据行和描述行都包含在同一行中。

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th data-type="numeric">Date of Birth</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Bill Smith</td>
              <td data-value="315532800">1/1/1980</td>
              <td>England</td>
            </tr>
            <tr>
              <td colspan="3">Some long description of Bill</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table>
            <tr>
              <td>John Smith</td>
              <td data-value="315532800">1/1/1980</td>
              <td>France</td>
            </tr>
            <tr>
              <td colspan="3">Some long description of John</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

这是一个显示此操作的 plunk：http: //plnkr.co/edit/NvmUgzvaAix1x7WUGYSM

Answer 3

这是对带有 colspan 的行的修复： $('table.footable').find('td[colspan]').siblings().remove();