[ParamQuery] 그리드 시각화를 위한 jQuery Grid Plugin - ParamQuery

웹페이지에 일일히 테이블 코드를 코딩하여 넣기는 싫고 엑셀의 그리드 화면처럼 수치 중심의 데이터를 깔끔하게 보여줄 수 없을까 하던차에 우연히 알게 된 그리드 플러그인이 ParamQuery 다. 

앞서 DataTables라고 하는  또 다른 jQuery 그리드 플러그인을 소개한 적이 있었는데 이것은 그것과는 또 다른 화면구성과 인터페이스를 제공하는 그리드 플러그인이다.  

2012/12/14 - [웹/모바일 개발/웹개발] - [DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

역시 jQuery를 이용하여 만들어진 것이며 DataTables와는 다르면서도 또 다른 기능을 제공하므로 용도와 목적에 맞게 활용하면 좋을 듯 싶다.

화면이 흡사 엑셀과 같아 일단 깔끔해보이고 테마를 적용할 수 있어 별도의 테이블 코딩이 필요하지 않다. 여타의 jQuery 플러그인이 그러하듯이 기능을 구현하는데 필요한 데모소스와 API를 제공해준다. 

DataTables의 경우 관련 자료도 많고 샘플예제도 많은 편이어서 적용하다 부딪히는 문제는 대부분 구글링으로 해결이 되는 반면 ParamQuery 같은 경우 상대적으로 레퍼런스 자료가 많지 않은 편이어서 나같이 소스가져다 쓰는 사람의 입장에서는 아직 해결하지 못한 문제가 몇가지 있었다. 그래도 여전히 활용가치가 충분한 그리드이다.

하이챠트(HighCharts)와 ParamQuery를 이용해 유지보수 대시보드 화면을 구성해보았다.

나의 경우 로그이력이나 오류내역과 같은  텍스트 정보 중심의 화면 구성에는 DataTables를 사용하였고 유지보수와 같은 SM 수행관련 데이터 즉, M/M나 투입시간 등의 수치화된 데이터로 화면을 구성하는 경우에는 ParamQuery를 적용해보았는데 다행히 각각의 쓰임새와 용도에 비교적 잘 맞은것 같다.  

DataTables와 마찬가지로 Ajax 로 가져온 JSON 데이터를 파싱하여 그리드로 구현하였다. 테이블과 각각의 개별 컬럼을 모두 리사이징할 수 있고 DB와 연동하여 CRUD를 적용할 수도 있으므로 잘만 활용하면 아주 쓸모있는 웹어플리케이션을 개발할 수도 있겠다. 

아직 다 파악을 못해서 그럴 수 있겠지만 아직 테이블의 사이즈를 '%'로 지정하는 옵션을 보지 못했다. 보통 화면구성을 '%'로 분할하여 구성하는데 ParamQuery의 옵션에는 테이블 크기를 픽셀단위로만 지정하는 것외 다른 옵션은 보이지 않는다. 

어쨋든 나와 같이 유지보수 관련 데이터를 제한된 화면안에서 효율적이고 효과적으로 제시하고자 할 경우 앞서 소개한 하이챠트나 DataTables, ParamQuery와 같은 그리드는 충분히 활용가치가 있다고 판단된다.