1

テーブル列をソート可能にする jquery ui ソート可能ウィジェット拡張機能があります。例のページによると、行をドラッグ不可として指定することができます。

 $(function () {
    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)'
    }).disableSelection();
    });​

そのような方法で複数の colspanned 行を設定したい。ただし、テーブルの中央に固定行を設定すると、いくつかの問題が発生します。1 つ目 - ドラッグ アンド ドロップ中にドラッグされたように固定行が表示されない、2 つ目 - 数回移動するとテーブルが壊れる。

jsfiddle の例

それを修正する方法はありますか？

アップデート：

幅=テーブル幅の絶対配置divを使用して回避策を見つけましたが、実際には好きではありません

jsfiddle の例

4

1 に答える 1

3

あなたが抱えている問題は、静的行の最初のセルをcolspan4 に設定することです。

その列を 2 番目の位置に移動すると、 の付いたセルが 2 番目の位置に移動しますcolspan。

これで、すべてを相殺する 4 のセルを含む 2 番目の列になりcolspanます。列を移動したい場合は、セル内
を避けようとします。colspans

を使用する代わりに空のセルを追加するだけで、これを修正できますcolspan。

これを置き換えます：

<tr class="footerrow"><td colspan="4">unsortable  colspan row</td></tr>

これとともに：

<tr class="footerrow"><td></td><td></td><td></td><td></td></tr>

デモ - v1 - colspan の代わりに個々の空のセルを使用する

さらに、その行の列の境界線を非表示にするスタイルをいくつか追加すると思います。

編集

私はこれでもう少し遊んで、別の選択肢を思いつくことができました. あなたのものほど滑らかではなく、もっと見られる可能性があることに注意hackyしてください.

startソート可能な拡張機能のとのコールバックを見て、 で4 つのセルを追加し、 で再度置き換えることstopができるかどうか疑問に思いました。startstop

使用startすると、並べ替え中に 4 つのセルが表示されますが、ドラッグ アンド ドロップ アクション中にフッターを表示する必要があると思っていたほど気に入りませんでした。

stop実行すると、実際の並べ替えが適用される前に実行されるstartため、目的が冗長になることに気付きました。

これは、1 つのセルを 4 に置き換えることができることを意味し、並べ替えを行い、小さな遅延を使用して 4 つのセルを再び 1 つのセルに置き換えるstop小さな時間遅延を追加します。window.setTimeoutこれは、ドラッグ アンド ドロップ中にフッターがそのまま残ることも意味します。

デモ - v2 - 並べ替えの前後に stop を使用してフッターを再描画する

それはうまくいくようですが、私が言ったように、私のものは再描画され、少しちらつきが発生するほど滑らかではありません。setTimoutまた、巨大なテーブルを取得したときに、呼び出しで 100 ミリ秒で十分かどうかもわかりません。

いずれにせよ、私はこれで楽しく作業できました。これにより、少なくともいくつかのアイデアが得られることを願っています。

DEMO v2 のコード

HTML
メモ動的に追加できるように、タイトル テキストdata-titleの保存に属性を追加しました。tr以下のフッター行 HTML を参照してください。他のすべての HTML は同じままです。

<tr class="footerrow" data-title="Additional Features"><td></td><td></td><td></td><td></td></tr>

スクリプト
開始コールバックが追加されました。ご不明な点がございましたら、お知らせください。

$(function() {
    $specialRows = $("#ex7 tr.footerrow");

    $('#ex7').sorttable({
        placeholder: 'placeholder',
        helperCells: ':not(.footerrow td)',
        stop: function(e, ui) {
            // This replaces the 1 cell with 4 and executes before the sorting actually occurs.
            buildFooterTemplates();

            // Adding a small timeout we rever to the single cell with colspan 4
            window.setTimeout(function() {
                buildFooterRows();
            }, 100);
        }
    }).disableSelection();

    var buildFooterTemplate = function(title) {
        return '<td></td><td></td><td></td><td></td>';
    };

    var buildFooterRow = function(title) {
        return '<td colspan="4" align=center>' + title + '</td>';
    };

    var buildFooterTemplates = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterTemplate());
        });
    };


    var buildFooterRows = function() {
        $specialRows.each(function() {
            var $row = $(this);
            var title = $row.attr("data-title");

            $row.empty().append(buildFooterRow(title));
        });
    };

    buildFooterRows();
});​
于 2012-11-30T22:46:31.437 に答える