Question

所以我试图创建我的第一个插件，它接受init之后的方法和选项。我正在阅读JQuery网站上的Authoring Plugin教程，我已经提出了这个

(function($) {
    /* Default Options */
    var defaults = {
        column_sort_map: []
    };

    /* Global Scope */
    var sort_col = false;
    var sortMethods = {
        date: function(a, b) {
            var date1 = new Date($(a).find(":nth-child(" + sort_col + ")").html());
            var date2 = new Date($(b).find(":nth-child(" + sort_col + ")").html());
            if (date1 == date2) {
                return 0;
            }
            if (date1 < date2) {
                return -1;
            }
            return 1;
        },
        string_case: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        string_nocase: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        numeric: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            if (isNaN(aa)) {
                aa = 0;
            }
            if (isNaN(bb)) {
                bb = 0;
            }
            return aa - bb;
        }
    };

    var methods = {
        init: function(options) {
            // extend options
            if (options) {
                $.extend(defaults, options);
            }
            alert(options.column_sort_map);
        },
        test: function() {
         alert("I am a Test");   
        }
    };
    $.fn.dataTable = function(method) {
        return this.each(function() {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.dataTable');
            }
        });
    };

})(jQuery);

我用

来称呼它

$("#tbl").dataTable({
    column_sort_map: [
        "numeric",
        "string_nocase",
        "string_nocase",
        "date",
        "string_nocase",
        "string_nocase",
        "numeric"
        ]
});

$("#tbl").dataTable("test");

HTML代码非常大，我不想写出新表。但是对于我的问题，这不是必需的。

我必须再次强调，这是我第一次创作这样的插件。我可能完全误解了教程，并且遇到了重大错误。

我的问题是，当我尝试访问options.column_sort_map时，我收到'undefined'错误。但是，对test的函数调用按预期工作。

Answer 1

错误与您尝试扩展默认值的方式有关。

 $.extend(defaults, options);

这实际上是设置defaults来保存新传递的选项，而不是options。

此修复应该简单：

var options =  $.extend(defaults, options);
alert(options.column_sort_map);

$。extend除了更改第一个参数外，还将返回新创建的对象。如果您不想影响默认值，请执行以下操作：

var options = $.extend({}, defaults, options);

Answer 2

您对该插件的调用不正确。您已将其设置为在调用插件时提供“方法”，但您没有为第一次调用执行此操作。你必须使用

$("#tbl").dataTable("init", . . .

然后传递你的选择。

JQuery Authoring插件。传递方法与选项

2 个答案: