0

スイッチのオン/オフ（選択、ラジオ、チェックボックス）でフィルタリングし、フィールド（名前、日付など）で並べ替えたいアイテムのリストがあります。

以下のコードは、基本的なフィルタリングには問題ありませんが、良い方法ではありません。専門的な方法でそれを行う方法を知りたいです。優れた jQuery プラグインはありますか? ウィジェットは必要ありません。背後にあるフィルタリング/並べ替えエンジンだけです。

# this code is pseudocode and not running! # 
<script>
// ready
$(function() {
    // get items
    var items = jQuery.parseJSON("items_json.php");

    // items filtered
    var items_filtered = new Array();

    // conditions/relations for filtering
    var filter1_relations = jQuery.parseJSON("filter1_relations.php");
    var filter2_relations = jQuery.parseJSON("filter2_relations.php");

    // build unfiltered list
    build_list(items);

    // build filtered list
    $(".filter").on("change", function() {
        items_filtered = run_filter1(items, filter1_relations);
        items_filtered = run_filter2(items_filtered, filter2_relations);
        build_list(items_filtered);
    });
});

// filters the 'items' by checking if a 'relation' exists
function run_filter1(items, relations) {
    items_filterd = new Array();
    $.each(items, function(key, item) {
        for (var i = 0; i < relations.length; i++) {
            if (...) {
                items_filtered.push(item);
            }
        }
    });
    return items_filtered;
}

// build list and add to #content
function build_list(items) {
    html = '<ul>';
    for (var i = 0; i < items.length; i++) {
        html += '<li>'+ items[i].name +'</li>';
    }
    html += '</ul>';

    $("#content").html(html);
}
</script>
Filter 1.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 1.2: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
<div id="content"></div>

stackoverflow を検索してこのコードを見つけましたが、それほど広範囲ではありません。

前もって感謝します！

4

2 に答える 2

1

KnockOutを使用して、かなり複雑なフォーム（「このオプションを選択すると、これらのアイテムが表示されるはずです」）を実装しました。これは、この種の作業に非常に役立ちます。

KnockOutビューモデルで条件を設定する必要がありますが、その後、それらの条件にバインドして、たとえば、特定の条件が満たされた場合にのみアイテムを表示できます。

<input type="checkbox" data-bind="visible: filter1_condition1" value="1" class="filter"/>
于 2013-01-10T22:09:38.223 に答える
1

変更のたびにループするのではなく、データを取得したら (sql または php またはその両方を介してサーバーから送信する前にデータを構造化できない場合)、各フィルターの配列をすぐに作成します。

//loop data
//loop filter conditions
//if match
if (!filter_results[filter])   filter_results[filter]=new Array () 
filter_results[filter].push(data)

edit : push の代わりに index を使用できます (高速です)

var i = -1;

その後、ループで

filter_results[filter][++i]=data

(または、インデックスの配列が多数ある場合は、新しい配列を作成するときに新しいものを作成します))

はい、インデックスと同じように、変更時に適切な配列からhtmlを作成するだけです

 var html='<ul><li>'+ filter_results[filterselected].join('</li><li>')+'</li></ul>'

何らかの方法で、ループスルーする必要があります。この方法では、一度だけループスルーします（少し前に同様の stg を処理する必要がありました-呼び出しごとに 100/200kb の pregzip データを受信します-&多くの考え/実験/メモリ使用量の評価の後、私はその方法に行きました)

于 2013-01-10T22:34:27.667 に答える