0

ある種のデータグリッドがあり、このサイトのようにいくつかの連鎖フィルターを追加したいとしましょう: http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN、距離、価格など）。

ユーザーがフィルター リンクをクリックするたびに、それに応じてデータグリッドのコンテンツが更新されます。ただし、変更を考慮して、他のフィルターのリンクも更新する必要があります。例: 注文フィールドを変更した場合?order_field=x、他のすべてのフィルター リンクを追加/更新する必要があります。

そのようなシナリオを実装するための最良の方法は何だと思いますか? フィルター リンクがクリックされたときに、他のすべてのフィルターのクエリ文字列パラメーターを更新する関数を作成する必要がありますか? または、隠しフィールドを使用して、各フィルターで選択したオプションを記録しますか?

可能であれば、再利用可能なソリューションが欲しいです。

4

1 に答える 1

0

データは AJAX 経由で読み込まれるため、更新するリンクはありません。少なくともアンカー タグを意味する場合はそうではありません<a>。フィルタを隠しフィールドに保存する必要さえありません。

すべてのフィルターを JSON オブジェクトとして保存します。$.ajaxAPI の設定方法によっては、JSON オブジェクトを API で使用できるものに変換する必要がある場合や、JSON オブジェクトをリクエストで直接渡すことができる場合もあります。

このサンプル コードはid="price"、マークアップにテキスト ボックスがあることを前提としています。APIに関する詳細を提供しなかったため、意図的にconvert_filters_to_parameters空白のままにしました。jQuery は、これらのパラメーターを送信する前に、GET または POST 要求にシリアル化します。

var filters = { 
    distance:null,
    price:null,
    sortBy:'distance'
}

//this assumes you have a textbox with id="price" 
$('#price').changed(function()
{
    filters.price = $(this).val();
    refresh_data();
});

function refresh_data()
{
    var parameters = convert_filters_to_parameters(filters);
    $.ajax('/my_api', 
            {
                //i left out a lot of properties here for brevity
                data: parameters,
                success: function(response) { alert(response); }
            });
}
于 2011-10-05T19:22:32.947 に答える