여러 웹 페이지 개발에 사용되고 있는 Bootstrap !!!

인기가 높은 만큼 여러 extension도 개발되어 있습니다. 


Bootstrap 사용에 대해서는 많은 블로그나 웹 페이지에서 자세히 정리되어 있어요.

여기서는 간단한 정리정도 ! 



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

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


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

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

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


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


여기서는 기본 Table을 불러오는 것인데요. 기본적으로 동적으로 Table을 생성하기 위해서 

서버에 GET 방식으로 데이터를 요청하고 그것을 활용해서 시각화하는 소스입니다. 


기본적인 틀은 만들어져 있어야 하는데 아래와 같이 정리하면 됩니다. 


위 테이블에 동적인 데이터를 넣어 테이블을 생성하는 자바스크립트 소스는 아래와 같습니다. 


매우 간단합니다. :) 

위 자바스크립트 소스에서 /app/user/ 에 Get 방식으로 요청하기 때문에 해당 URL에서 JSON 방식으로 객체를 전달해줘야 합니다. 

해당 객체에는 위 HTML 소스에서 생성한 것 처럼 각각의 객체가 id와 name 속성을 가지고 있어야 

제대로 테이블이 시각화됩니다. :)




  1. 쿨쿨 2016.05.19 19:21

    굉장히 유익하네요.
    감사합니다. 잘 보고 있어요!

+ Recent posts