테이블 타이틀행 고정(tableHeadFixer)

테이블의 타이틀행만 고정하고 싶을때 사용한다.

tableHeadFixer라이브러리를 사용했다.

 

1.tableHeader라이브러리 추가한다.(tableHeadFixcer.js파일은 구글링으로 찾을수 있다.)

tableHeadFixcer.js 파일이 있는 경로를 참조 추가한다.

스크립트 초기 이벤트 로딩시 적용할 테이블 아이디 활용해 tableHeaderFixer 호출 한다.

$("#테이블아이디명).tableHeadFixer();

기본 옵션으로 테이블의 thead를 고정하며 옵션에 따라 상하좌우 어떤 컬럼을 고정할지 설정 할 수 있다.

 

 

옵션에 따라 첫번째 타이틀 행,좌우 특정 컬럼지정 역시 가능 하다.

tableHeadFixer옵션:

head: 테이블에서 thead를 고정함(기본값:true)

$("#테이블아이디명).tableHeadFixer();

foot: 테이블에서 tfoot을 고정함(기본값:false)

left:테이블에서 좌측 고정 컬럼수 설정함

$("#테이블아이디명).tableHeadFixer({left:5});//좌측 5개 컬럼 고정

right:테이블에서 우측 고정 컬럼수 설정함

$("#테이블아이디명).tableHeadFixer({right:5});//우측 5개 컬럼 고정

 

Script

 

HTML 테이블 상위  div스타일 조정해 overflow적용되게 했다.

라이브러리에서 헤더부분의 dom을 찾기때문에 <table>에서 프리징할 <thead>를 설정해줘야한다.

구성:

 <div style="width:100%; height: 600px; overflow: hidden; max-height: none; min-height: 0px; max-width: none; min-width: 0px;">

<table>

<thead>

<th></th>

</thead>

<tbody>

</tbody>

</table>

</div>

 

 

참고:

v-if 부분은 v-show로 수정한다.

v-if는 가상 dom으로 생성되나 v-show는 dom생성되고 display:none설정으로 들어가기때문에 태그 가져올수 있음