JQuery 의 Flexigrid API 사용
7243 단어 flexigrid
1. 홈 페이지
http://flexigrid.info/
2. 우세
주류 table 기능 을 지원 합 니 다. 간단 하고 실 용적 이 며 학습 주기 가 짧 습 니 다. 좋 은 table 플러그 인 입 니 다.
3. 실천
먼저 HTML 쓰기
<table class="flexme1">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr><td>This is data 1 with overflowing content</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
<tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr>
</tbody>
</table>
그리고 기적 코드 를 추가 합 니 다.
$('.flexme1').flexigrid();
됐다
다음은 나의 이 문장의 중점 이다.
Flexigrid 의 JSON API 를 말씀 해 주세요.
자 하하, 도움 이 됐 으 면 좋 겠 군.
참고:http://blog.cuegraphix.com/?p=86
기본 설정
width
table 길이 (default: auto)
height
table 의 너비 (default: 200)
striped
표 의 선 표시 (default: true)
novstripe
세로 표 표시 (default: false)
minwidth
열의 최소 폭 (default: 30)
minheight
줄 의 최소 너비 (default: 80)
resizable
table 크기 변경 가능 여부 (default: true)
title
tabke 의 제목
showTableToggleBtn
table 디 스 플레이 와 button 을 표시 하지 않 는 것 을 지정 합 니 다 (default: true)
minColToggle
최소 열 수 (기본 값: 1)
showToggleBtn
열의 표시 와 비 표시 button (default: true)
singleSelect
줄 을 더 선택 할 수 있 습 니까? (default: false)
Ajax 설정
url
Ajax 의 URL
method
Ajax 접근 방식 (기본 값: post)
dataType
데이터 형식 (default: xml)
errormsg
접근 실패 시 error message
usepager
페이지 넘 기기 도구 모음 사용 여부
nowrap
셀 데이터 양 이 너무 많 을 때 접 을 지 여부
page
페이지 표시 수
total
본점 수
sortname
정렬 된 이름
sortorder
어떤 순서 (asc, desc)
query
검색 키
qtype
검색 열
rp
한 페이지 가 표시 하 는 줄 수
useRp
줄 수 변경 을 표시 하 는 페이지 가 있 는 지 여부 입 니 다.
rpOptions
페이지 의 줄 정보 ([10, 15, 20, 25, 40])
pagestat
페이지 정보 상태
procmsg
페이지 정보 읽 기
no msg
정보 가 검색 되 지 않 았 을 때의 정보
autoload
자동 로드
hideOnSubmit
제출 버튼 숨 기기
blockOpacity
투명도 지정
기타
1.colModel 열 정보 display 정보 보이 기 name 이름. width 너비. sortable 정렬 가능 여부 align 중간 상태 hide 2. searchitems 숨 길 지 여부 검색 정보 display 정보 보이 기 name 이름. isdefault 기본 디 스 플레이 3. buttons 도구 모음 정보 name 이름. bclass css onpress 클릭 이벤트 4. onToggleCol 열 변경 이벤트 5. onChangeSort 정렬 변경 이벤트 6. onSuccess 성공 을 나타 내 는 이벤트 7. onSubmit 제출 한 이벤트 8. preProcess 데이터 처리 이벤트