jquery を動的に増減させるアイデアと小さなプラグイン

昨年プロジェクトに取り組んでいたとき、コントロールを動的に追加および削除できる必要があるモジュールに遭遇しました。最初の解決策は、UpdatePanel を使用してページの部分更新を実行することでした。ページは非常に大きく、コントロールも多数あるため、動的に追加されるコントロールが多数あると非常に遅くなります。その後、JavaScriptを使って動的な増減制御をしようと考え、最終的にはページ送信時にページコントロールのデータを収集するようにしましたが、効果は大きかったのですが、当時はそのモジュールに対してのみ行っていたため、スケーラビリティに問題がありました。非常に貧弱で、当時私が書いたコードは非常に複雑で、動的増減の効果だけで 500 行以上の JavaScript コードを書きました。

その後、昨年末に時間ができたときにこのコードを書き直しましたが、現在はこのコードは 100 行未満に圧縮されており、数を増やすことも減らすことも簡単です。コントロールが非常に簡単で、使い方も非常に簡単です。

レンダリング:

簡単な例:

コードをコピー コードは次のとおりです:

< title>


<スクリプト言語="javascript" src="dynamicAddRemover.js"< /script> <スクリプト言語="javascript"> $(function(){ $("#table1").dynamicAddRemover({ addedEvent:function(newCtl) , options){

//テキストボックスをクリアします。

newCtl.find(":text").val('');
if($("table").size() > 5 )
{
//追加ボタンを非表示にします。
newCtl.find("img[id$='" options.adderId "']").hide();
}
},
removedEvent:function(prevCtl, nextCtl, options){
if($("table").size() <= 5)
{
//追加ボタンを表示します。
$("table:last").find("img[id$='" options.adderId "']").show();
}
}
}); 🎜>});

>
<選択>
<オプション値 ="volvo">ボルボ
<オプション値 ="saab">Saab >Opel
Audi
"text" name="text1" id="text1" value="テキスト">ボタン







パラメータ定義:




コードをコピー


コードは次のとおりです:

rootWrapper デフォルト: "table"
ルート コンテナーは、追加または削除する必要があるコントロールのルート コンテナーです。現在、コードはテーブル ルート コンテナーのみをサポートしています。
adderId デフォルト:"imgExpBtn"
ボタンの ID を追加します。
removerId デフォルト:"imgColBtn"
削除ボタンの ID。
addingEvent default:null
イベントを追加する前にトリガーされるカスタム イベント。パラメーターは newWrapper と options です。newWrapper は新しく追加されたコントロールの親コンテナーであり、options はパラメーター リストそのものです。
addedEvent default:null
イベントの追加後にトリガーされるカスタム イベント。パラメーターは newWrapper と options です。newWrapper は新しく追加されたコントロールの親コンテナーであり、options はパラメーター リストそのものです。
removingEvent default:null
削除イベントの前にトリガーされるカスタム イベント。パラメータは refWrapper と options で、reWrapper は削除されたコントロールの親コンテナで、options はパラメータ リストそのものです。
removedEvent default:null
削除イベントの後にトリガーされるカスタム イベント。パラメータは prevWrapper、nextWrapper、および options です。prevWrapper は削除された親コンテナの前のコンテナで、nextWrapper は削除された親コンテナの次のコンテナです。コンテナー、オプションはパラメーター リストそのものです。
collapseImgUrl default:'icon_collapse.gif'
ボタンのパスを追加します
expandImgUrl default:'icon_expand.gif'
ボタンのパスを削除します

メモ:
。$("table").dynamicAddRemover({param1:"param1", param2:"param2"}); のように、増減プロセス中に必要なカスタム パラメーターと変数を追加できます。 :options.param1 などの使用時。
。ルート コンテナには一意の ID が必要であり、指定する場合も一意である必要があります。使用する必要があるモジュール (複数のルート コンテナー) が複数ある場合は、$("#table1").dynamicAddRemover()、$("#table2").dynamicAddRemover() などを使用できます。
。新しく追加されたコントロールの ID と名前は更新されていません。特別なビジネス ニーズがある場合は、addedEvent に新しい ID を生成するビジネス ロジックを追加してください。
。このプラグインには Jquery バージョン 1.2.6 以降が必要です。


ソース コードと原理は非常に単純であり、出発点としてのみ機能します。以下はソースコードを含む添付ファイルです。

dynamicAddRemover.rar