Controls_jquery를 동적으로 늘리고 줄이는 jquery에 대한 몇 가지 아이디어와 작은 플러그인-JS 튜토리얼-php.cn

Controls_jquery를 동적으로 늘리고 줄이는 jquery에 대한 몇 가지 아이디어와 작은 플러그인

WBOY

풀어 주다： 2016-05-16 18:22:08

원래의

1130명이 탐색했습니다.

작년에 프로젝트를 진행하면서 컨트롤을 동적으로 추가하고 제거할 수 있어야 하는 모듈을 만났습니다. 첫 번째 해결 방법은 UpdatePanel을 사용하여 페이지의 부분 업데이트를 수행하는 것이었습니다. 페이지가 매우 크고 컨트롤이 많기 때문에 동적으로 추가된 컨트롤이 많으면 속도가 매우 느려집니다. 나중에 JavaScript를 사용하여 동적으로 증가 및 감소 제어를 할 생각을 했고, 마침내 페이지를 제출할 때 페이지 제어의 데이터를 수집했는데 효과는 컸지만 당시에는 해당 모듈에 대해서만 수행되었기 때문에 확장성이 없었습니다. 매우 열악하고 그 당시 JavaScript를 작성했습니다. 동적 증가 및 감소 효과만을 위해 500줄 이상의 JavaScript 코드가 작성되었습니다.

나중에 작년 말에 시간이 나면 이 코드를 다시 작성했습니다. 이제 이 코드는 100줄 미만으로 압축되었으며, 숫자를 늘리거나 줄일 수 있습니다. 컨트롤이 매우 쉽고 사용도 매우 간단합니다.

렌더링:
Controls_jquery를 동적으로 늘리고 줄이는 jquery에 대한 몇 가지 아이디어와 작은 플러그인
간단한 예:

코드 복사 코드는 다음과 같습니다. :

제목>

>제한 개수의 이벤트 추가 후 예시:

코드 복사

코드는 다음과 같습니다.

🎜><선택>
<옵션 값 ="volvo">볼보
<옵션 값 ="saab">사브 "opel"

<버튼 유형="버튼" name="btn1" value="btn1" id="btn1" >버튼< / 버튼>

볼보
사브

매개변수 정의:

코드 복사

코드는 다음과 같습니다.

 
rootWrapper 기본값: "table" 
루트 컨테이너는 추가하거나 삭제해야 하는 컨트롤의 루트 컨테이너입니다. 현재 코드는 테이블 루트 컨테이너만 지원합니다. 
adderId default:"imgExpBtn" 
버튼의 ID를 추가합니다. 
removerId default:"imgColBtn" 
삭제 버튼의 ID입니다. 
addingEvent default:null 
매개변수는 newWrapper와 options이며, options는 새로 추가된 컨트롤의 상위 컨테이너입니다. 
 addedEvent default:null 
 매개변수는 newWrapper 와 options 이며, options 는 새로 추가된 컨트롤의 상위 컨테이너입니다. 
removingEvent default:null 
매개변수는 refWrapper 및 options입니다. reWrapper는 삭제된 컨트롤의 상위 컨테이너이고 options는 매개변수 목록 자체입니다. 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