1

バックグラウンド

作成したjQueryプラグインがあります。プラグインはページ上のすべてのテーブルを取得し、リモートリクエストを行うことで行を読み込みます。

コード例

これは、プラグインで使用される構造化の高さを示す簡単な例です。実際の例では、load関数が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/

質問

load関数を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);

次に、選択に対してオブジェクトを検索し、loadメソッドを呼び出すパブリック関数を公開しています。

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

最後に、実際のプロセスを説明するために、クリック機能を2つ追加しました。

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

このソリューションが将来誰かに役立つことを願っています。

于 2012-07-29T03:34:08.670 に答える