테이블 필터 제어

Bootstrap Table의 필터 제어 확장 기능으로, 테이블 열에 필터링 기능을 추가합니다.

이 페이지에서

필터 제어 확장 기능은 테이블의 각 열에 입력 상자나 드롭다운 선택 상자 등의 필터 컨트롤을 추가하여 사용자가 데이터를 빠르게 필터링하고 데이터 검색 효율을 높일 수 있도록 합니다.

사용법

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

예제

Filter Control

옵션

filterControl

속성: data-filter-control
유형: Boolean
세부 정보:

열 필터 기능을 활성화할지 여부를 지정합니다. true로 설정하면 테이블 열에 자동으로 입력 상자나 드롭다운 선택 상자 등의 필터 컨트롤이 추가됩니다.
기본값: false

filterControlVisible

속성: data-filter-control-visible
유형: Boolean
세부 정보:

필터 컨트롤을 표시할지 여부를 지정합니다. false로 설정하면 모든 필터 입력 컨트롤이 숨겨지지만 필터 기능은 계속 유효합니다.
기본값: true

alignmentSelectControlOptions

속성: data-alignment-select-control-options
유형: String
세부 정보:

드롭다운 선택 상자의 옵션 정렬 방식을 설정합니다. 가능한 값: left(왼쪽 정렬), right(오른쪽 정렬) 또는 auto(자동 정렬).
기본값: undefined

filterControlContainer

속성: data-filter-control-container
유형: Selector
세부 정보:

필터 컨트롤의 컨테이너 선택기를 지정합니다. 예를 들어 #filter로 설정하면 모든 필터 컨트롤이 id가 filter인 요소에 렌더링됩니다.

컨테이너의 각 필터 요소(input 또는 select)는 bootstrap-table-filter-control-<FieldName> 클래스를 포함해야 합니다. 여기서 <FieldName>은 해당 열의 field 속성 값으로 대체해야 합니다.
기본값: false

filterDataCollector

속성: data-filter-data-collector
유형: Function
세부 정보:

드롭다운 필터 상자에 추가할 옵션 데이터를 수집하는 데이터 수집 함수입니다. formatter를 통해 표시되는 태그 데이터(예: 쉼표로 구분된 태그 목록)를 처리하는 데 자주 사용됩니다.
기본값: undefined

filterControlMultipleSearch

속성: data-filter-control-multiple-search
유형: bool
세부 정보:

다중 검색 기능을 활성화할지 여부를 지정합니다. true로 설정하면 사용자는 하나의 입력 상자에서 여러 값을 검색할 수 있습니다.

여러 검색 값은 구분 기호로 분리되며, 구분 기호는 filterControlMultipleSearchDelimiter 옵션을 통해 사용자 정의할 수 있습니다.
기본값: false

filterControlMultipleSearchDelimiter

속성: data-filter-control-multiple-search-delimiter
유형: String
세부 정보:

검색 값을 분리할 때 사용할 구분 기호를 정의합니다.
기본값: ,

filterControlSearchClear

속성: data-filter-control-search-clear
유형: bool
세부 정보:

검색 초기화 기능을 활성화할지 여부를 지정합니다. true로 설정하면 테이블 옵션 showSearchButton과 함께 사용하여 모든 필터 조건을 한 번에 초기화할 수 있습니다.
기본값: true

searchOnEnterKey

속성: data-search-on-enter-key
유형: Boolean
세부 정보:

true로 설정하면 사용자가 Enter 키를 누를 때 검색이 트리거됩니다.
기본값: false

showFilterControlSwitch

속성: data-show-filter-control-switch
유형: Boolean
세부 정보:

true로 설정하면 필터 컨트롤 전환 버튼이 표시됩니다.
기본값: false

sortSelectOptions

속성: data-sort-select-options
유형: Boolean
세부 정보:

true로 설정하면 드롭다운 컨트롤의 옵션이 정렬됩니다.
기본값: false

열 옵션

filterControl

속성: data-filter-control
유형: String
세부 정보:

해당 열의 필터 컨트롤 유형을 설정합니다:
- input: 텍스트 입력 상자
- select: 드롭다운 선택 상자
- datepicker: HTML5 날짜 선택기
기본값: undefined

filterControlPlaceholder

속성: data-filter-control-placeholder
유형: String
세부 정보:

입력 상자 컨트롤의 플레이스홀더 텍스트를 설정합니다. 컨트롤 유형이 input일 때만 유효합니다.
기본값: ''

filterCustomSearch

속성: data-filter-custom-search
유형: function
세부 정보:

기본 검색을 대체하는 사용자 정의 검색 함수입니다. 매개변수:
- text: 검색 텍스트.
- value: 비교할 열 값.
- field: 열 필드 이름.
- data: 테이블 데이터.
false를 반환하면 현재 행/열이 필터링됨을 의미합니다. true를 반환하면 유지됨을 의미합니다. null을 반환하면 현재 값의 사용자 정의 검색을 건너뜀을 의미합니다.
기본값: undefined

filterData

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

사용자 정의 드롭다운 필터 데이터를 설정합니다. 다음을 지원합니다: var:variable 변수에서 로드; obj:variable.key 객체에서 로드; url:http://www.example.com/data.json 원격 JSON 파일에서 로드; json:{key:data} JSON 문자열에서 로드; func:functionName 함수 반환 값에서 로드.
기본값: undefined

filterDatepickerOptions

속성: data-filter-datepicker-options
유형: Object
세부 정보:

날짜 선택기를 사용할 때 이 옵션을 통해 기본 구성을 전달합니다. 예: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. 자세한 내용은공식 문서를 참조하세요.
기본값: undefined

filterDefault

속성: data-filter-default
유형: String
세부 정보:

필터의 기본값을 설정합니다.
기본값: undefined

filterOrderBy

속성: data-filter-order-by
유형: String
세부 정보:

드롭다운 옵션의 정렬 방식을 설정합니다: 오름차순('asc'), 내림차순('desc') 또는 서버 반환 순서('server').
기본값: 'asc'

filterStartsWithSearch

속성: data-filter-starts-with-search
유형: Boolean
세부 정보:

true로 설정하면 “접두사 일치” 검색 모드가 활성화됩니다.
기본값: false

filterStrictSearch

속성: data-filter-strict-search
유형: Boolean
세부 정보:

true로 설정하면 엄격한 일치 검색 모드가 활성화됩니다.
기본값: false

아이콘

clear: 'glyphicon-trash icon-clear'
filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

이벤트

onColumnSearch (column-search.bs.table)

열 데이터가 검색을 트리거할 때 발생합니다.

onCreatedControls (created-controls.bs.table)

필터 컨트롤이 생성 완료되면 발생합니다.

메서드

triggerSearch

검색 작업을 수동으로 트리거합니다.

clearFilterControl

이 플러그인에서 추가한 모든 컨트롤을 지웁니다( showSearchClearButton 옵션과 유사).

toggleFilterControl

필터 컨트롤의 표시/숨김을 전환합니다.

지역화

formatClearFilters

유형: Function
기본값: function () { return "Clear Filters" }

formatFilterControlSwitch

유형: Function
기본값: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

유형: Function
기본값: function () { return "Hide controls" }

formatFilterControlSwitchShow

유형: Function
기본값: function () { return "Show controls" }