이번 포스팅에서는 Bootstrap Table 정리 2

Bootstrap에서 기본적으로 제공되는 Table에 여러 기능을 붙여 쉽게 동적인 테이블을 만들 수 있습니다. 


깃허브 사이트는 https://github.com/wenzhixin/bootstrap-table

상세 설명이 되어 있는 사이트는 http://bootstrap-table.wenzhixin.net.cn/

예제 사이트는 http://issues.wenzhixin.net.cn/bootstrap-table/


위 사이트에 모두 정리되어 있어요. 


정리 1에 이어서 !! 2에서는 테이블 컬럼을 시각화할 때 단순 값 표현이 아니라 

값을 활용해서 커스터마이징 시킬 때 어떤 값을 사용해야 하는가.. 에 대해서 간단하게 정리해둡니다. :)



아래와 같이 테이블의 HTML 소스를 준비합니다.


이전과 다른 점은  image 필드가 추가되었다는 것입니다. 그리고 image 컬럼에서는  data-formatter="cellFormat" 이라고 작성된 부분이 있죠.

image 컬럼을 표현할 때 cellFormat을 활용하겠다는 뜻입니다. 


cellFormat은 아래와 같이 작성할 수 있습니다. 


value, row, index를 인자로 받는 함수인데요. 

value가 넘어오는 컬럼 값을 의미합니다. 


위 cellFormat 함수는 테이블에 데이터를 넣기 전에 호출되어야 합니다. :)




'자바스크립트,부트' 카테고리의 다른 글

Bootstrap alert + collapse  (0) 2016.04.22
Bootstrap3 Typeahead  (0) 2016.04.22
bootstrap navigation color change  (0) 2016.04.21
Bootstrap Table 정리 2  (0) 2016.04.19
Bootstrap Table 정리 1  (1) 2016.04.18
dragula example  (0) 2015.09.10
웹 페이지 최적화에 도움되는 사이트  (2) 2015.05.04
jQuery 기반 BlockUI 라이브러리  (0) 2015.03.11

+ Recent posts