1

フッタブルテーブルを並べ替えるときに 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 (説明) 行を正しいデータ行の下に正しく配置する並べ替え方法はありますか?

4

3 に答える 3

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 をさらに合理化できると確信しています。

于 2014-10-20T07:34:34.470 に答える