2

ユーザーがいくつかのテーブル行をソートできるように、Jquery Sortable を使用しています。

私がする必要があるのは、ユーザーがチェックボックスをチェックすると、一番上にソートされることです。

基本的にチェックした項目が上、チェックしていない項目が下になります。

作業コードへの jfiddle リンクをここに含めました。挑戦する人はいますか？

http://jsfiddle.net/z74VH/3/

html は次のとおりです。

<table border="1" cellpadding="5" cellspacing="2" id="sort">
<thead>
    <tr>
        <td>active</td>
        <td>title</td>
        <td>order</td>
    </tr>
</thead>
<tbody>
    <tr id="1">
        <td><input type="checkbox" id="active_1" checked="checked"/></td>
        <td>First Item</td>
        <td><input type="text" id="order_1" value="1"/></td>
    </tr>
    <tr id="2">
        <td><input type="checkbox" id="active_2" /></td>
        <td>Second Item</td>
        <td><input type="text" id="order_2" value="2"/></td>
    </tr>
    <tr id="3">
        <td><input type="checkbox" id="active_3" /></td>
        <td>Third Item</td>
        <td><input type="text" id="order_3" value="3"/></td>
    </tr>
</tbody>

そして、これは Jquery Sortable を呼び出す JavaScript です。

//Call the sortable jquery on the table
$("#sort tbody").sortable({
    helper: fixHelperModified
}).disableSelection();
4

1 に答える 1

0

これにアプローチするには、次の 2 つの方法があります。

1:MVVM

現在、単純な DOM オブジェクト、つまり複数の行と列を持つテーブルがあります。

これを正しく、スムーズに、確実に機能させるには、表現からデータを分離する必要があります。つまり、データを格納するための javascript オブジェクトの配列を作成してから、テーブルを動的に作成するための「レンダリング」メソッドを作成する必要があります。

データに何らかの変更が加えられた場合 (データがソート可能のドラッグまたはチェックボックスのクリックによって変更された場合) は常に、テーブルを再レンダリングして新しいソート順を表示する必要があります。

これを行うのに役立つライブラリがいくつかあります (Backbone、Ember、Knockout など)。

2: 醜い混乱

これをハードコードすることを選択した場合は、jQuery を使用して醜いアルゴリズムを作成し、その項目をチェックボックス以外の項目の一番上にプッシュする必要があります。

アルゴリズムは次のようになります。

  • 現在の親 <tr> を見つける

    var currTR = $(this).closest("tr");

  • ループ内で、チェックボックスがチェックされた状態のアイテムが見つかるまで、前のアイテムに移動します

    var prevTR = currTR.prev();
var insertTR = currTR;
while(prevTR !== null) {
    if ($(prevTR).find("input:checked").length > 0) {
        break;
    }
    insertTR = currTR;
    prevTR = prevTR.prev();
}

  • 現在の <tr> を削除します (最初のステップから)

    $(currTR).remove();

  • 2 番目のステップで見つかった最後の項目の上に現在の <tr> を挿入します (insertTR の上)

注: これはすべて疑似コードです。動作が保証されているわけではありません。

また、チェックされているアイテムが他にない場合、または現在の行が既にリストの一番上またはチェックされていないアイテムの一番上にある場合に備えて、自分自身を保護する必要があります。

個人的には、JavaScript フレームワークに移行する絶好の機会として今をお勧めします。

于 2013-08-20T17:38:00.293 に答える