GitHub에서 보기

테이블 열 재정렬

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

이 페이지에서

종속성

이 확장 기능은 다음 라이브러리에 의존합니다:

사용법

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

예제

Reorder Columns

옵션

reorderableColumns

  • 속성: data-reorderable-columns

  • 유형: Boolean

  • 세부 정보:

    열 드래그 기능을 활성화할지 여부를 제어합니다. true로 설정하면 사용자가 헤더를 드래그하여 열 순서를 조절할 수 있습니다.

  • 기본값: false

dragaccept

  • 속성: data-dragaccept

  • 유형: String

  • 세부 정보:

    지정된 CSS 클래스가 있는 열만 드래그할 수 있도록 합니다.

  • 기본값: null

maxMovingRows

  • 속성: data-max-moving-rows

  • 유형: Integer

  • 세부 정보:

    드래그 시 동시에 이동하는 행 수를 제어합니다. 1로 설정하면 헤더만 이동하며, 초대형 테이블(셀 수 > 1000)에서 성능을 향상시키기 위해 이 설정을 사용하는 것이 좋습니다.

  • 기본값: 10

이벤트

onReorderColumn (reorder-column.bs.table)

열 드래그가 완료되면 트리거되며, 매개변수는 새로운 헤더 필드 순서입니다.

메서드

orderColumns

  • 매개변수: object, 예: {name: 0, price: 1}

  • 세부 정보:

    전달된 구성 개체에 따라 열 순서를 다시 정렬합니다. 개체의 키는 field(열 필드 이름)이고, 값은 열 인덱스(0부터 시작)입니다.