테이블 행 재정렬

Bootstrap Table의 행 재정렬 확장 기능으로, 드래그하여 테이블 행의 순서를 조절할 수 있습니다.

이 페이지에서

종속성

이 확장 기능은 tablednd v0.9 라이브러리에 의존합니다.

기본 드래그 스타일

기본 드래그 스타일을 사용하려면 bootstrap-table-reorder-rows.css 파일을 추가로 가져와야 합니다.

사용법

<link rel="stylesheet" href="extensions/reorder-rows/bootstrap-table-reorder-rows.css">
<script src=".../jquery.tablednd.js"></script>
<script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

예제

Reorder Rows

옵션

reorderableRows

속성: data-reorderable-rows
유형: Boolean
세부 정보:

행 드래그 기능을 활성화할지 여부를 제어합니다. true로 설정하면 사용자가 행을 드래그하여 테이블 행의 순서를 조절할 수 있습니다.
기본값: false

onAllowDrop

속성: data-on-allow-drop
유형: function
세부 정보:

드래그한 행을 다른 행 위에 둘 때 호출됩니다. 함수가 true를 반환하면 해당 행에 배치할 수 있고, 그렇지 않으면 배치할 수 없습니다. 총 4개의 매개변수가 있습니다:
- 드래그된 행의 데이터
- 커서가 있는 행의 데이터
- 드래그된 행의 DOM 요소
- 커서가 있는 행의 DOM 요소
기본값: null

onDragStop

속성: data-on-drag-stop
유형: function
세부 정보:

드래그가 끝날 때 호출되며, 순서가 변경되었는지 여부와 상관없습니다. 매개변수는 테이블, 드래그된 행의 데이터, 드래그된 행의 DOM 요소입니다.
기본값: null

onDragStyle

속성: data-on-drag-style
유형: String
세부 정보:

드래그 중에 행에 적용되는 스타일입니다. 브라우저 특성으로 인해 일부 스타일(예: 테두리)은 적용되지 않을 수 있습니다.
기본값: null

onDragClass

속성: data-on-drag-class
유형: String
세부 정보:

드래그 중에 추가되는 클래스 이름으로, 배치 후 제거됩니다. onDragStyle보다 유연하며 셀 등의 내용에 상속될 수 있습니다.
기본값: reorder-rows-on-drag-class

onDropStyle

속성: data-on-drop-style
유형: String
세부 정보:

행이 배치된 후 적용되는 스타일로, 동일한 스타일 제한이 있습니다. 또한 원래 스타일을 대체하므로 필요하지 않은 경우 onDragClass를 사용하는 것이 좋습니다.
기본값: null

onReorderRowsDrag

속성: data-on-reorder-rows-drag
유형: Function
세부 정보:

사용자가 드래그를 시작할 때 호출되며, 매개변수는 드래그된 행의 DOM 요소입니다.
기본값: 빈 함수

onReorderRowsDrop

속성: data-on-reorder-rows-drop
유형: Function
세부 정보:

행이 배치될 때 호출되며, 매개변수는 배치된 DOM 요소입니다.
기본값: 빈 함수

dragHandle

속성: data-drag-handle
유형: String
세부 정보:

드래그할 때 사용할 커서 요소를 지정합니다.

참고: 이 옵션은 주로 TableDnD 플러그인과 호환성을 위해 사용되며, 특별한 요구 사항이 없는 경우 기본값을 수정하지 마세요.
기본값: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

속성: data-use-row-attr-func
유형: Boolean
세부 정보:

tr 요소에 id 속성이 없는 경우 반드시 활성화해야 하며, 그렇지 않으면 플러그인이 onDrop 이벤트를 트리거하지 않습니다.
기본값: false

이벤트

onReorderRow (reorder-row.bs.table)

행 배치가 완료되면 트리거되며, 매개변수는 다음을 포함합니다:

새로운 테이블 데이터
드래그된 행
원래 위치에 있던 행