1

テーブルプラグインのフィルタリングについて読みました。私が探しているのは、このポップアップウィンドウのようなものです。

現れる
（ソース：staticflickr.com）

ユーザーが検索ボックスに入力を開始すると、関連するチャネル/カテゴリ（前のドロップダウンボックスで選択したもの）がフィルターされます。また、フィルター処理の進行中に、アニメーション化された読み込みアクションが発生するはずです。

フィルタジョブの実装を容易にするjQueryプラグインを探しています。

4

4 に答える 4

2

プラグインがあるのは曖昧だと思います。次のようなことをしてください。

function filter($rows, category, search) {
     $rows.each(function() {
          if (category == ($("td:eq(2)", this).text() || category == "all") &&  (search. === "" || $("td:eq(1)", this).text().indexOf(search) !== -1) {
               $(":checkbox", this).removeAttr("disabled");
               $(this).show();
          }
          else
               $(this).hide(function(){
                   $(":checkbox", this).attr("disabled", "disabled");
               });
     });
}


$("select.category").change(function() {
     filter ($(this).closest("form").find("tr"), $(this).val(), $(this).closest("form").find("input.search").val());
});

$("input.search").keyUp(function() {
     filter ($(this).closest("form").find("tr"), $(this).closest("form").find("select.catagory").val(), $(this).val()); 
});

htmlの正確な形式で機能させるには、いくつかの調整が必要になる場合があります。

プラグインにするために更新します

$.fn.filter_table = function(options) {
    options = $.extend(options, {
         show: $.noop(), //Callback when a row get shown
         hide: $.noop(), // Callback when a row gets hidden
         entries: "table tr", // Selector of items to filter.
         map: {} //Required parameter
        //TODO Add default ajustment parameters here to remove ambiguity and assumptions.      
    });

    return this.each(function() {
        var form = this;

        function each(callback) {
            for (var selector in options.map) {
                 var check = options.map[selector];
                 $(selector, form).each(function(){
                     callback.call(this, check);
                 });  
            }
        }

        function show(row) {
            if (!$(row).is(":visible")) {
               options.show.apply(row);
               $(row).show();
            }
        }

        function hide(row) {
            if ($(row).is(":visible"))
               $(row).hide(options.hide);
        }

        function run_filter() {
            $(options.entries, form).each(function() {
               var row = this, matched = true;

               each(function(check) {
                   matched &= check.call(this, row);
               });

               matched ? show(this) : hide(this);
            })
        }

        //Bind event handlers:

        each(function() {
           $(this).bind($(this).is(":text") ? "keyup" : "change", run_filter);
        });

    });
};

このプラグインは次のように使用できます。

$("form").filter_table({
    map: {
       //These callback define if a row was matched:
       "select.category": function(row) {
            //this refers to the field, row refers to the row being checked.
            return $(this).val() == "all" || $(this).val() == $("td:eq(2)", row).text();
        },
        "input.search": function(row) {
            return $(this).val() == "" || $(this).val() == $("td:eq(1)", row).text();
        }
    },

    entries: "tr:has(:checkbox)", //Filter all rows that contain a checkbox.

    show: function() {
        $(":checkbox", this).removeAttr("disabled");
    },

    hide: function() {
        $(":checkbox", this).attr("disabled", "disabled");
    }
});

デバッグが完了すると、動作するはずです。私はそれをテストしていません。その部分はあなた次第だと思います。

于 2012-05-29T14:20:21.090 に答える
2

HTMLが次のようになっている場合：

<form id="filterForm">
    <input type="text" id="filterBox">
    <input type="submit" value="Filter">
</form>

<div id="checkboxContainer">
    <label><input type="checkbox" id="checkbox123"> Checkbox 123</label>
</div>

あなたは次のようなことをすることができます...

//Set variables so we only have to find each element once
var filterForm = $('#filterForm');
var filterBox = $('#filterBox');
var checkboxContainer = $('#checkboxContainer');

//Override the form submission
filterForm.submit(function() {

    //Filter by what the label contains
    checkboxContainer.find('label').each(function() {

        //If the value of filterBox is NOT in the label
        if ($(this).indexOf(filterBox.val()) == -1) {

            //Hide the label (and the checkbox since it's inside the label)
            $(this).hide();

        } else {

            //Show it in case it was hidden before
            $(this).show();

        }
    });

    //Prevent the form from submitting
    return false;
});
于 2012-05-29T14:31:04.103 に答える
2

このtablesorterfilterプラグインを使用して、必要なものを実現できます

ワーキングフィドル

また、 http：//datatables.net/もご覧ください。

于 2012-05-29T14:50:54.273 に答える
1

そこには多くのオプションがあります。ここから始めるのが良いでしょう：http：//www.wokay.com/technology/32-useful-jquery-filter-and-sort-data-plugins-62033.html

このようなフィルタリングは、それほど複雑ではありません。あなたが望むものに近づくいくつかのプラグインのソースを見て、それからあなた自身のものを書こうとすることは価値があるかもしれません。自分でやればもっとたくさん学ぶことができます！

于 2012-05-29T14:17:42.387 に答える