jquery를 직접 만들어 자동으로 행을 추가, 삭제하는 기능 소개plug-in_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(target.closest("." settings.tempRowClass))
} else {
content.append(temp); 🎜>}
}
if (num < count) {
for (var j = count - 1; j >= num; j--) {
delRow(content.find( "." settings.tempRowClass).eq(j));
}
} else {
if (settings.addCallBack)
settings.addCallBack($(temp));
count = content.find ("." settings.tempRowClass).length;
settings.changeInput.val(count)
sumIndex()
showhideBtn()};


이 메서드를 작성할 때 하위 집합을 검색하기 전에 항상 content를 호출했다는 사실을 눈치채셨을 것입니다. 이는 한 페이지에서 동시에 여러 호출이 발생할 때 충돌을 방지하기 위한 것입니다.

이 플러그인은 작성만 하면 기본적으로 완성됩니다. 앞으로 몇 백 줄의 코드만으로 유용하고 실용적이라고 생각되는 작은 도구를 완성했습니다. HTML에서 해당 설정을 지정하는 것도 너무 쉽죠? 코드가 비교적 거친 편이니 전문가가 도와주시면 함께 토론해 보실 수 있습니다. 제 Q 그룹에 참여해 보세요. 함께 배우고 발전해보세요! 70210212 또는 77813547.