jqueryプラグインを自作して行を自動追加・削除する機能の紹介_jquery

基本的に完成度の高いプラグインで、追加、削除、挿入、上下移動、インデックスマーク付け、数量管理などの機能が含まれており、基本的にほとんどの複数行追加のニーズを満たすことができます。もちろん、これらの機能を完了する前に、コードの量をできるだけ少なくし、ロジックを理解しやすくすることも心がけます。

このプラグインのデモ ページは http://www.lovewebgames.com/demo/autoAdd/autoAdd.html です。 を参照してください。 自動的に実行する独自の jquery プラグインを作成します。行の追加と削除 (パート 1) で紹介したように、これは単純なプラグインです。その機能は次のとおりです。システム内には があります。 > をコピーして追加すると、バッチ 操作を実行できるようにしたい場合にこのプラグインを使用できます。

プラグインのレンダリングは次のとおりです:

の以前の記事で、jquery プラグインを作成するための基本的な知識についてはすでに説明しました。次のステップでは、この関数を目を引く方法で作成してみます。多くの人は、コピー行関数の HTML コードを結合することを好みますが、このプラグインのエントリ ポイントは、HTML コードを渡してから HTML のテンプレートをコピーすることであると考えています。この作業は実際に完了できるため、このアプローチが間違っているとは言えませんが、コピーするコード行が多く、カレンダーや 3 レベルの都市メニューなどのより複雑なコントロールがある場合は、など、メンテナンスは非常に困難になります。私たちはフロントエンドを行います。これは、プログラマーの作業を軽減し、より高速で便利なエクスペリエンスをユーザーに提供することを目的としています。したがって、プログラムがスプライシングコードをエスケープしないようにし、これらのタスクをJSに任せるようにしています。jqueryには非常に便利なclone(bool)メソッドがあります。 ブール型パラメータ。DOM オブジェクトをその上のイベントも含めて完全にコピーしたい場合は、 clone(true) を使用できます。これにより、イベントを再度バインドする手間が省けます。そのため、このプラグインのコールバック メソッドは実際には使いにくいです。行を追加するコードは次のとおりです:

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

function addRow(num, isInsert , target) {

for (var i = 0; i < num - count; i ) {
var temp = content.find("." settings.tempRowClass). first().clone(true) ;
temp.find("input").val("");
temp.find("select").val("-1"); temp.find("textarea") .val("");
temp.find(":checkbox").attr("checked", false);
temp.attr("id", "") );
temp.find ("input,tr,textarea,select,:checkbox,tbody").attr("id", "");
if (temp.find(".richText").長さ > 0) {
temp.find(".ke-container").remove();
}
temp.find(".richText,input").each(function() {
$(this).attr("id", "txt_" Math.round(Math.random() * new Date().getTime()))
$(this).show(); 🎜>});
if (isInsert) {
temp.insertBefore("." settings.tempRowClass);
} else {
content.append(temp); 🎜>}
}
if (num < count) {
for (var j = count - 1; j >= num; j--) {
delRow(content.find( "." settings.tempRowClass);
}
} else {
if (settings.addCallBack)
settings.addCallBack($(temp)>}
count = content.find ("." settings.tempRowClass).length;
settings.changeInput.val();
showhideBtn();


これらのメソッドを作成したとき、サブセットを検索する前に常にコンテンツを呼び出していることに気づいたかもしれません。これは、ページ上で同時に複数の呼び出しが発生した場合の競合を防ぐためです。

このプラグインは、ほんの数百行のコードを書くだけで基本的に完成します。将来的に呼び出すのに必要な、優れた実用的なツールが完成しました。 HTMLで対応する設定を行うだけでも簡単です。わかりません。専門家がいる場合は、一緒に議論してください。Q グループに参加してください。一緒に学び、改善していきましょう！ 70210212 または 77813547。