Question

我正在为jQuery创建自定义过滤器插件。

到目前为止'我已设法实现以下代码：

(function ($) {

    $.fn.filterbyDate = function (filterValue) {
        var tableDate = new Date($(':eq(3)', $(val)).text());
        var days = numDaysBetween(tableDate, new Date());

        if (filterValue === "-1") {
            $(val).show();
        } else {
            switch (filterValue) {

                case "This Week":
                    if (days > 7) {
                        $(val).hide();
                    } else {
                        $(val).show();
                    }
                    break;
                case "This Month":
                    if (days > 30) {
                        $(val).hide();
                    } else {
                        $(val).show();
                    }
                    break;
                case "This Year":
                    if (days > 365) {
                        $(val).hide();
                    } else {
                        $(val).show();
                    }
                    break;
                default:
            }
        }
    };

    $.fn.filterbyClient = function (filterValue) {
        var $table = $(".tablefilter");

    $.each($table.find("tbody>tr"), function (ind, val) {
        var name = $(':eq(2)', $(val)).text();

        if (filterValue === "-1") {
            $(val).show();
        } else {
            if (name.trim() !== filterValue) {
                $(val).hide();
            } else {
                $(val).show();
            }
        }
    });
    };

}(jQuery));

它由以下人员实施：

controller1.filterByDate(date);
controller2.filterByClient(client);

这个工作原理应该是单独的，但是当我在'filterByDate'之后尝试'filterByClient'时，它自然会覆盖后者的前者。
基本上我希望filterByClient基于filterByDate

的结果

是否有任何最佳实践以某种方式“合并”需要的方法，仅过滤最新结果？

注意：这些方法由两个不同的控制器（选择列表）

调用

例如

    $("#dateFilter").change(function () {
        $(this).filterbyDate($(this).val());
    });

    $("#clientFilter").change(function() {
        $(this).filterbyClient($(this).val());
    });

Answer 1

您可以使用方法链接。在功能结束时只需return this;，并使用controller.filterByDate(date).filterByClient(client);

所以你的方法看起来像

$.fn.filterbyDate = function (filterValue) {
    //Do Stuff
    return this;
};

$.fn.filterbyClient = function (filterValue) {
    // Do Stuff
    return this;
};

编辑：

如果它被不同的控制器使用，你必须抽象你的控制器，这样方法就不必过滤控制器本身，而是他们使用的列表。

所以你可以这样做：

var list = controller1.list.filterByDate(date);
controller2.list = list.filterByClient(client);

Answer 2

您可以将要过滤的列表作为参数传递给您的函数：

(function ($) {

$.fn.filterbyDate = function (list, filterValue) {
    var filteredList = [];
    //apply filter on list and put result into filteredList...
    return filteredList;
};

$.fn.filterbyClient = function (list, filterValue) {
    var filteredList = [];
    //apply filter on list and put result into filteredList...
    return filteredList;
};

}(jQuery));

var entireList = [...];
var filterdList = controller1.filterByDate(entireList, date);
var doubleFilteredList = controller2.filterByClient(filterdList , client);

<强>更新

或者将过滤器功能合并为1，并允许一次过滤多个字段：

$.fn.filterby = function (options) {
        //apply filters
         if (options.date !== undefined) {
        //     apply date filter based on value of options.date
         }
         if (options.client !== undefined) {
        //     apply client filter on value of options.client 
         }
    };

结合＆＃39;的最佳做法jQuery方法

2 个答案: