6

私はjQueryプラグインを書いているので、このコードは非常によく使用されるコードであるため、多くの場所で再利用できます。コード自体は、非表示の行から複製されたテーブルに新しい行を追加します。新しい行に対して一連の操作を実行します。

私は現在、次のように参照しています。

$(".abc .grid").grid();

ただし、コールバックを含めて、プラグインが呼び出される各領域で、行が追加されたときにもう少しユニークなことを実行できるようにします。以前にjQueryAJAXプラグインを使用したことがあるので、successコールバック関数を使用しましたが、コードがバックグラウンドでどのように機能するかを理解できません。これが私が達成したいことです：

$(".abc .grid").grid({
    row_added: function() {
        // do something a bit more specific here
    }
});

これが私のプラグインコードです

(function($){           

    $.fn.extend({ 

        //pass the options variable to the function
        grid: function() {

            return this.each(function() {

                grid_table=$(this).find('.grid-table > tbody');
                grid_hidden_row=$(this).find('.grid-hidden-row');
                //console.debug(grid_hidden_row);
                $(this).find('.grid-add-row').click(function(event) {
                /* 
                 * clone row takes a hidden dummy row, clones it and appends a unique row 
                 * identifier to the id. Clone maintains our jQuery binds
                 */

                    // get the last id
                    last_row=$(grid_table).find('tr:last').attr('id');
                    if(last_row===undefined) {
                        new_row=1;
                    } else {
                        new_row=parseInt(last_row.replace('row',''),10)+1;
                    }

                    // append element to target, changes it's id and shows it
                    $(grid_table).append($(grid_hidden_row).clone(true).attr('id','row'+new_row).removeClass('grid-hidden-row').show());

                    // append unique row identifier on id and name attribute of seledct, input and a
                    $('#row'+new_row).find('select, input, a').each(function(id) {
                        $(this).appendAttr('id','_row'+new_row);
                        $(this).replaceAttr('name','_REPLACE_',new_row);
                    });

                    // disable all the readonly_if_lines options if this is the first row
                    if(new_row==1) {
                        $('.readonly_if_lines :not(:selected)').attr('disabled','disabled');
                    }
                });

                $(this).find('.grid-remove-row').click(function(event) {
                /* 
                 * Remove row does what it says on the tin, as well as a few other house 
                 * keeping bits and pieces
                 */

                    // remove the parent tr
                    $(this).parents('tr').remove();

                    // recalculate the order value5
                    //calcTotal('.net_value ','#gridform','#gridform_total');

                    // if we've removed the last row remove readonly locks
                    row_count=grid_table.find('tr').size();
                    console.info(row_count);
                    if(row_count===0) {
                        $('.readonly_if_lines :disabled').removeAttr('disabled');
                    }

                });

            });

        }

    });

})(jQuery);

私は通常elgooGで検索を行いました...しかし、ほとんど結果が得られずに多くのノイズが発生しているようです。助けていただければ幸いです。

ありがとう！

4

2 に答える 2

9

多分このようなもの？

$.fn.extend({ 

    //pass the options variable to the function
    grid: function(callbacks) {

        // The following can be used so you don't need
        // to test for callback existence in the rest 
        // of the plugin
        var defaults = {
            before: function() {},
            after: function() {},
            row_added: function() {}                
        }
        callbacks = $.extend({},defaults,callbacks);

        // perform callback
        if (callbacks.before)
            callbacks.before();

        return this.each(function() {
            // do stuff
            if (callbacks.row_added)
                callbacks.row_added();
            // do more stuff
        }

        // perform callback
        if (callbacks.after)
            callbacks.after();
   }
});

このようなものでそれを呼び出します：

$("#grid").grid({
    before: function() {},
    after: function() {},
    row_added: function() {}
});

編集：コールバックの存在をテストする必要がないように、デフォルトのコールバックを追加しました。個人的には、電話をかける前に存在をテストするのが好きですが、このルートを好むかもしれません。

于 2010-05-28T10:29:31.417 に答える
2

Yuoはこの投稿を読むことができます：

http://www.learningjquery.com/2009/03/making-a-jquery-plugin-truly-customizable

コールバック機能の提供に関する段落が含まれています。

var defaults = {

    onImageShow : function(){}, // we define an empty anonymous function
                                // so that we don't need to check its
                                // existence before calling it.
    // ... rest of settings ...
};

// Later on in the plugin:     
$nextButton.bind('click', showNextImage);

function showNextImage() {
    // DO stuff to show the image here...
    // ...
    // Here's the callback:
    settings.onImageShow.call(this);
}
于 2010-05-28T10:33:13.687 に答える