2

以下の形式でホーム情報のリストがあります。

<div id="content">
    <div class="listing">
        <div class="photo"><a href="#"><img src="img.jpg" width="200"></a></div>
        <div class="info">
            <p class="address"><a href="#">321 Main St<br>Beverly Hills, CA 90210</a></p>
            <div class="attr">Price</div>
            <div class="val price">$325,000</div>
            <div class="attr">Sq. Ft.</div>
            <div class="val">2,600</div>
            <div class="attr">Built</div>
            <div class="val">1988</div>
            <div class="attr">Bedrooms</div>
            <div class="val">3</div>
            <div class="attr">Bathrooms</div>
            <div class="val">2.5</div>
        </div>
    </div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
    <div class="listing">{ANOTHER HOME LISTING...}</div>
</div>

JavaScript を使用して、上記の家のリストを (価格で) 並べ替えるにはどうすればよいですか。

例を挙げると、私は基本的に次のデモを実行したいと考えています (ただし、TABLE は使用しません)。

http://sam-i-am.com/work/sandbox/dojo0.9/samiam/sortableList.html

4

2 に答える 2

6

最初にレンダリングされた後、ユーザーの要求に応じてデータを並べ替えたいと想定しています。私は通常、AJAX を介してサーバー側でこれを行います。つまり、同じデータセットに対して異なる並べ替えで GET 要求を行います。これは、データをページングするときに必要です。ソート後に表示されるレコードが、以前に表示されたものとはまったく異なる可能性があるためです。

ページングされていない小さなデータセットがあり、クライアント側で並べ替えたい場合は、データを JavaScript 配列としてレンダリングし、JavaScript を介して DIV に入力します。次に、ユーザーがソートしたい場合は、配列を再ソートし、javascript レンダリング関数を再度呼び出して、新しくソートされた順序でデータを取得します。

于 2009-05-21T19:10:19.383 に答える
1

オーブマンに同意します。リストを配列に格納します。その後、手の込んだ Javascript を使用して DOM 内ですべてを行う代わりに、単純に配列を並べ替えることができます。

関係のない話ですが、すべてに div を使用する必要がありますか? (非) 順序付きリストを使用すると、意味的により優れたものになり、作成した Javascript が読みやすく維持しやすくなる可能性があります。特別に分類された div の束を参照する代わりに、(分類された) ul/ol 内で li を参照できます。

于 2009-05-21T19:13:59.827 に答える