jQuery Mobile - 컬럼 토글 테이블

컬럼 토글 테이블

테이블 컬럼을 선택적으로 표기하거나 숨길 수 있는 테이블

* 사용자가 팝업 메뉴를 통해 표시 할 컬럼을 직접 선택할 수 있다.

* 컬럼에 우선 순위를 부여해서 크기 허용 범위 안에 표시할 테이블 컬럼 항목들을 제한 할 수 있다.

* data-role="table" data-mode="columntoggle" id="tableId" 태그를 갖는 <table> 태그안에 구현하면 된다.

* <table> 태그의 id 값은 팝업 메뉴에 쓰인다.

* data-priority 속성 값으로 우선순위를 정할 수 있으며 우선 순위값이 높은 순(1이 가장 높고 6이 가장낮다) 으로 컬럼 선택 메뉴에 표시된다.

* ui-responsive 클래스

- 허용 범위 칸큼 표시 테이블 컬럼들을 자동 조절

* table-stripe 속성값

- 행들을 구별하기 쉽도록 줄무늬 형태로 행을 표시한다.

<table class="ui-responsive table-stripe" id="my-table1" data-mode="columntoggle" data-role="table">
	<thead>
	<tr>
		<th data-priority="2">학년</th>
		<th>이름</th>
		<th data-priority="3">성별</th>
		<th data-priority="1">성적</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>1</th> <td>홍길동</td> <td>남</td> <td>94</td>
	</tr>
	<tr>
	<th>4</th> <td>신나라</td> <td>여</td> <td>77</td>
	</tr>
	<tr>
		<th>3</th> <td>홍미미</td> <td>여</td> <td>88</td>
	</tr>
	</tbody>
</table>