[해피CGI][cgimall] Duplicate, Remove, and Sort Rows In Forms - jQuery formRowRepeater

 formRowRepeater는 동적 양식 행 관리를 위한 경량 jQuery  플러그인입니다. 사용자는 드래그 앤 드롭을 통해 양식 행을 추가/복제하고, 기존 행을 제거하고, 순서를 변경할 수 있습니다. 입력 필드, 선택 드롭다운, 확인란, 라디오 버튼 등을 포함한 다양한 입력 유형과 함께 작동합니다.

 

플러그인의 핵심 기능은 양식 내에서 중복 행을 관리하는 것입니다. 온라인 인보이스 시스템용 양식을 만든다고 상상해 보십시오. 송장의 각 항목에는 제품 이름, 수량 및 가격에 대한 필드가 필요할 수 있습니다. 이러한 필드의 여러 인스턴스를 하드 코딩하는 대신 formRowRepeater를 사용하면 단일 "템플릿 행"을 정의할 수 있습니다. 이 템플릿은 새 행을 동적으로 생성하기 위한 청사진 역할을 합니다. 그런 다음 플러그인은 이러한 행의 생성, 인덱싱 및 제거를 처리합니다.

 

또한 formRowRepeater는 jQuery UI의 드래그 가능한 위젯을 사용하여 행의 드래그 앤 드롭 정렬을 가능하게 합니다. 이는 프로젝트 관리 응용 프로그램에서 작업을 정렬하는 것과 같이 순서가 중요한 경우에 유용합니다. 행이 이동할 때마다 플러그인은 자동으로 행 순서 값을 지정합니다. 그런 다음 서버 측에서 이 정보를 처리하여 올바른 데이터 배열을 유지할 수 있습니다.


압축파일을 해제한뒤,
index.html 파일과, example2.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.

사용방법은 아래와 같습니다.