1

背景

我创建了一个 jQuery 插件，该插件获取页面上的所有表并通过发出远程请求来加载行。

代码示例

这是一个简单的例子，它提高了插件使用的结构。在实际示例中，加载函数发出 AJAX 请求并处理结果，将行添加到表中。

JavaScript

(function($) {

    $.table = function(el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        base.load = function() {
            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };

        base.load();
    };

    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector)
            .each(function(index) {
                new $.table(this, options);
        })
    };
})(jQuery);;

HTML

<table id="table1" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table id="table2" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我像这样初始化页面上的所有表格。

$('body').table({selector:'[data-role="table"]'});

jsfiddle

你可以看到一个例子http://jsfiddle.net/RWy5r/1/

问题

是否可以将加载函数暴露给 dom，以便我可以像这样针对对象调用它？

$("#table1").load();

或者

$("#table1").table.load();

使用上面的简单示例，结果将是 ID 为“table1”的表将<td>附加，而包括 ID 为“table2”的表在内的所有其他表将保持不变。

4

1 回答 1

1

这花了我一点时间来解决，但是解决方案非常简单。我们需要做的就是将插件创建的对象添加到 dom 中，以便我们以后可以访问它，jQuery 已经提供了一种通过 .data() 函数执行此操作的方法。

解决方案

(function($) {

    $.table = function(el, options) {
        var id = $(el).attr("id");
        $.data($(el).get(0), "table", this);//add the new object to the dom so we can access it later
        
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);

        base.load = function() {
            
            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };

        base.load();
    };

    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector).each(function(index) {
                new $.table(this, options);
        })
    };
        
    //public method to provide access to the plugin object from the dom
    $.fn.table.load = function(selection) {
        $.data($(selection).get(0), "table").load();
    } 
        
    $('body').table({selector:'[data-role="table"]'});
        
    $('#btn1').click(function(){
        $.data($("#table1").get(0), "table").load();
    });
        
 
    $('#btn2').click(function(){
        $("#table2").table.load("#table2");
    });
})(jQuery);​

看看一个工作示例http://jsfiddle.net/leviputna/RWy5r/5/

解释

初始化插件后，我将存储针对 dom 对象创建的对象，以便以后可以访问它。$.data($(el).get(0), "table", this);

然后我公开一个公共函数，它将根据选择找到对象并调用加载方法。

$.fn.table.load = function(selection) {
    $.data($(selection).get(0), "table").load();
}

最后我添加了两个点击函数来说明这个过程。

$('#btn1').click(function(){
    $.data($("#table1").get(0), "table").load();
});

我希望这个解决方案在未来对某人有所帮助。

于 2012-07-29T03:34:08.670 回答