티스토리 뷰

FlexiGrid: 무료 그리드 위젯 라이브러리

- jqGrid와 유사한 jQuery 기반의 무료 JavaScript Grid 위젯 라이브러리
- 서버 사이드에 대한 JSON 데이터소스 요청, 싱글/멀티 로우 셀렉션, 페이징을 지원

  • 관련링크



Twitter Bootstrap에서 위화감없이 레이아웃 최적화하기

  • CSS 최적화

select[name="rp"] {
    width: auto;
}

input[size="4"] {
    width: auto;
}

div.flexigrid {
    font-size: 10pt;
}

  • HTML 최적화

<div style="overflow: auto">
  <table id="someTable"></table>
</div>

  • JavaScript 최적화

$('#someTable').flexigrid({    ... width : 'auto', height : 'auto' ... });


  • 주요 메써드

// 새로운 주소로 그리드 재로드
$('#someTable').flexOptions({url : 'someURL'}).flexReload();

// 새로운 객체로 그리드 재로드
$('#someTable').flexAddData(someDataSource).flexReload();


// 데이터소스의 객체 구조

var someDataSource = {
  total : '3', // 전체 페이지 개수
  page : '2', // 현재 페이지 번호
  rows : [ {
    id : '1001', // 해당 로우의 PK 필드 값
    cell : [ 'someValue1', 'someValue2', 'someValue3', 'someValue4', 'someValue5' ] // 그리드에 순서대로 출력될 필드 값
    } ]
 };


댓글
댓글쓰기 폼