부트 스트랩 기반의 경량 테이블 플러그인 부트 스트랩 테이블에는 고정 테이블 헤더, 단일/체크 잉, 정렬, 페이징, 검색 및 사용자 정의 테이블 헤더와 같은 강력한 기능이있어 개발 효율성을 향상시키고 개발 시간을 줄일 수 있습니다.
1. 플러그인 설명 : 부트 스트랩 테이블은 데이터 테이블 형식을 표시하고 풍부한 지원, 라디오 박스, 확인란, 정렬, 페이징 등, 플러그인 다운로드를 제공합니다.
2. 기능 :
Bootstrap 3을 기반으로 개발했습니다 (Bootstrap 2도 지원됩니다)
반응 형 인터페이스
고정 헤더
완전히 구성 가능합니다
데이터 속성을 지원합니다
열을 표시/숨기십시오
테이블 헤더를 표시/숨기십시오
Ajax를 사용하여 JSON 데이터를 얻습니다
테이블 헤더를 클릭하여 간단히 정렬하십시오
사용자 정의 열 표시를 지원합니다
단일/재 선출을 지원합니다
강력한 페이징 기능
명함 레이아웃을 지원합니다
다국어를 지원합니다
3. 사용 방법 :
1) HTML 페이지의 헤드 태그에 부트 스트랩 라이브러리 (프로젝트가 아직 사용되지 않은 경우)와 부트 스트랩-테이블 .CS를 소개하십시오.
<link rel = "Stylesheet"href = "bootstrap.min.css"> <link rel = "Stylesheet"href = "bootstrap-table.css">
2) jQuery 라이브러리, 부트 스트랩 라이브러리 (프로젝트가 아직 사용되지 않은 경우) 및 Bootstrap-Table.js를 소개하여 헤드 태그 또는 바디 태그가 닫히기 전에 (권장).
<script src = "jquery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) 데이터 소스를 지정하십시오. 두 가지 방법이 있습니다
방법 1 : 데이터 속성 태그를 전달합니다
일반 테이블에서 Data-Toggle = "테이블"설정 JavaScript를 작성하지 않고 부트 스트랩 테이블을 사용할 수 있습니다.
<table data-toggle = "table"data-url = "data.json"> <tead> ... </tead> </table>
방법 2 : JavaScript를 통해 데이터 소스를 설정합니다
JavaScript를 통해 ID 속성으로 테이블을 활성화하십시오.
$ ( '#table'). 부트 스트랩 가능 ({url : 'data.json'}) ;:4. 버그 설명 :
태그 속성 메소드를 사용하여 필드 포맷터를 설정할 때 효과가없고 그림이 불분명하다는 것을 알았습니다. 연구 예제를 직접 다운로드하고 주소를 다운로드 할 수 있습니다 .
예 : <th data-field = "sex"data-formatter = "format_sex"> gender </th>
1) 이유 :
bootstrap-table.js 라인 399, Formatter 유형만이 코드에서 함수입니다.
2) 해결책 :
399 행에서 코드 블록 수정 :
수정 전
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item);}수정 후 :
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item); } else if (typeof that.header.formatters [j] === 'string') {if (typeof window [wind }}여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는 부트 스트랩 테이블의 사용 방법입니다. 부트 스트랩 테이블의 사용 방법을 마스터하는 것이 도움이되기를 바랍니다.