템플릿

현재페이지경로
  • HOME
  • 템플릿
  • 테이블데이터

기본정보

목록
속성 내용 기타
[data-area-scroll="true"] 데이터 테이블에 스크롤기능추가시 추가속성 -
[data-table-fixed="true"] 상단 또는 좌측 고정컨텐츠가 있을경우 추가속성 -
[data-scroll-direction="x | y"] 스크롤 수직/수평 설정 가로스크롤일경우 : data-scroll-direction="x"
세로스크롤일경우 : data-scroll-direction="y" 또는 생략가능
[data-fixed="true"] 가로스크롤 고정필드일 경우 추가속성
추가설정1 세로스크롤일경우 세로높이값 설정 예) style="max-height:180px;"
미설정시 기본값으로 세팅됨(약 532px)
한페이지당 출력개수에 따라 개발별도 설정 : (타이틀 포함 보여질 row 갯수 x 30px )
추가설정2 가로스크롤일경우 각필드당 가로값 설정 %가 아닌 고정px값으로 설정(아래 샘플참고)

목록 : 일반형

목록
No. 카테고리 하위카테고리 상태 제목 작성자 조회수 작성일 관리
20 공지사항 - 공개 중복 맞이하여 중복으로 혜택받아요! 작성자 0,000 0000.00.00
19 FAQ APP사용 비공개 내가 본 보험 상품은 따로 모아 볼 수 없나요? User_ID 0,000 0000.00.00
18 용어사전 보험정보 삭제 해지환급금이 뭐에요? User_ID 0,000 0000.00.00
17
16

목록 : 세로스크롤형

목록
No. 카테고리 하위카테고리 상태 제목 작성자 조회수 작성일 관리
20 공지사항 - 공개 중복 맞이하여 중복으로 혜택받아요! 작성자 0,000 0000.00.00
19 FAQ APP사용 비공개 내가 본 보험 상품은 따로 모아 볼 수 없나요? User_ID 0,000 0000.00.00
18 용어사전 보험정보 삭제 해지환급금이 뭐에요? User_ID 0,000 0000.00.00
17
16
15
14
13
12
11
10
9
8
7
6
5
검색된 정보가 없습니다. 
<div class="tbl-t1" data-area-scroll="true" style="max-height:180px;">
	<table>
	</table>
</div>

목록 : 세로스크롤형 + 상단고정

목록
No. 카테고리 하위카테고리 상태 제목 작성자 조회수 작성일 관리
20 공지사항 - 공개 중복 맞이하여 중복으로 혜택받아요! 작성자 0,000 0000.00.00
19 FAQ APP사용 비공개 내가 본 보험 상품은 따로 모아 볼 수 없나요? User_ID 0,000 0000.00.00
18 용어사전 보험정보 삭제 해지환급금이 뭐에요? User_ID 0,000 0000.00.00
17
16
15
14
13
12
11
10
9
8
7
6
5
검색된 정보가 없습니다. 
<div class="tbl-t1" data-area-scroll="true"  data-table-fixed="true" style="max-height:360px;">
	<table>
	</table>
</div>

목록 : 가로스크롤형

목록
No. 카테고리 하위카테고리 상태 제목 작성자 조회수 작성일 관리 항목명 항목명 항목명 항목명
20 공지사항 - 공개 중복 맞이하여 중복으로 혜택받아요! 작성자 0,000 0000.00.00 - - - -
19 FAQ APP사용 비공개 내가 본 보험 상품은 따로 모아 볼 수 없나요? User_ID 0,000 0000.00.00 - - - -
18 용어사전 보험정보 삭제 해지환급금이 뭐에요? User_ID 0,000 0000.00.00 - - - -
17
17 
<div class="tbl-t1" data-area-scroll="true"  data-scroll-direction="x">
	<table>
	<colgroup><col width="고정필드2가로길1"/><col width="고정필드2가로길이"/><col width="일반필드가로길이"/>..<col width="일반필드가로길이"/></colgroup>
	<thead>
		<tr>
			<th scope="col">항목1</th>
			...
			<th scope="col">항목2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>항목1 내용</td>
			...
			<td>항목2 내용</td>
		</tr>
		..
	</table>
</div>

목록 : 가로스크롤형 + 필드고정

목록
No. 카테고리 하위카테고리 상태 제목 작성자 조회수 작성일 관리 항목명 항목명 항목명 항목명
20 공지사항 - 공개 중복 맞이하여 중복으로 혜택받아요! 작성자 0,000 0000.00.00 - - - -
19 FAQ APP사용 비공개 내가 본 보험 상품은 따로 모아 볼 수 없나요? User_ID 0,000 0000.00.00 - - - -
18 용어사전 보험정보 삭제 해지환급금이 뭐에요? User_ID 0,000 0000.00.00 - - - -
17
17 
<div class="tbl-t1" data-area-scroll="true"  data-scroll-direction="x" data-table-fixed="true">
	<table>
	..
	<colgroup><col width="고정필드2가로길1"/><col width="고정필드2가로길이"/><col width="일반필드가로길이"/>..<col width="일반필드가로길이"/></colgroup>
	<thead>
		<tr>
			<th scope="col" data-fixed="true">고정필드1</th>
			<th scope="col" data-fixed="true">고정필드2</th>
			<th scope="col">일반필드</th>
			...
			<th scope="col">일반필드</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-fixed="true">내용</td>
			<td data-fixed="true">내용</td>
			<td>내용</td>
			...
			<td>-</td>
		</tr>
		..
	</table>
</div>

기타 : 동적데이터생성 후 호출이 필요할경우

<div class="tbl-t1" data-area-scroll="true" data-table-fixed="true" id="uiListTable1">
	<table>
	..
	</table>
</div>
<div class="tbl-t1" data-area-scroll="true" data-table-fixed="true"  data-scroll-direction="x"  id="uiListTable2">
	<table>
	..
	</table>
</div>

	//세로스크롤
	admin.setScrollBoxX($('#uiListTable1'));

	//가로스크롤
	admin.setScrollBoxX($('#uiListTable2'));