jqGrid와 jsGrid

Meow.paw·2023년 4월 18일

웹 사이트를 구현하다보면 데이터를 표시해야 되는 경우가 굉장히 많고 표를 써야 되는 경우가 많다.
이걸 단순히 css와 jQuery로만 구현하려면 사실 조금 귀찮다

jqGrid를 사용해봤는데 생각보다 괜찮았다.

jqGrid는 웹 애플리케이션에서 테이블 형태로 표시되는 데이터를 고급스럽고 맞춤 가능하며 다양한 기능을 제공하는 jQuery 플러그인입니다. 페이징, 정렬, 필터링, 그룹화, 편집, 검색 및 데이터를 다른 형식으로 내보내기와 같은 다양한 기능을 제공합니다.

jqGrid는 사용하기 쉽고 사용자 요구에 따라 맞춤 설정할 수 있습니다. JSON, XML, CSV 및 배열과 같은 다양한 데이터 형식을 지원합니다. 또한 그리드 데이터 및 사용자 인터페이스를 조작하는 데 사용할 수 있는 다양한 이벤트와 메서드를 제공합니다.

jqGrid는 오픈 소스이며 공식 웹 사이트 또는 GitHub 리포지토리에서 다운로드할 수 있습니다. 지속적으로 개발 및 유지 보수에 기여하는 활발한 개발자 커뮤니티가 있습니다. 또한 시작하는 개발자를 돕기 위해 광범위한 문서 및 데모가 공식 웹 사이트에서 제공됩니다.

하지만 디자인을 좀 다양하게 쓰고 싶었는데 매번 지정해주기는 귀찮아서 새 그리드를 사용하기로 했다.

jsGrid는 jQuery를 기반으로한 오픈 소스 자바스크립트 라이브러리로, 웹 애플리케이션에서 테이블 데이터를 관리하고 표시하는 데 사용됩니다. jqGrid와 비슷한 기능을 제공하지만, 좀 더 경량화되어 있으며 더 간단하고 직관적인 API를 제공합니다.

jsGrid는 사용하기 쉽고 다양한 기능을 제공합니다. 데이터 필터링, 페이징, 정렬, 그룹화, 편집, 검색, 형식 지정, 검증 및 다양한 이벤트와 함께 데이터를 내보내는 등의 기능을 제공합니다. 또한 커스터마이즈할 수 있으며 다양한 테마와 템플릿을 제공하여 디자인 적용을 용이하게 합니다.

jsGrid는 오픈 소스이며 GitHub에서 다운로드하거나 npm을 통해 설치할 수 있습니다. API 문서와 다양한 예제가 제공되어 있으며, 개발자들은 이를 활용하여 자신의 프로젝트에 빠르게 적용할 수 있습니다.

내가 느낀 jsGrid는 jqGrid의 아종이다
jqGrid를 먼저 구현해봐서 그런 것도 있고 jsGrid에 대해 검색하면 jqGrid 결과가 먼저 뜨기 때문이다.
하지만 sortable(jqGrid), sorting(jsGrid) 등의 미묘한 차이가 생기기 때문에 몇 안되는 검색 결과를 믿기보다는 공식 demo나 github를 참고하는 것이 더 도움이 됐다.

http://js-grid.com/

https://github.com/tabalinas/jsgrid

대표적인 예시로 나는 jqGrid에서 드래그앤드롭으로 순서를 변경하는 코드를 작성했다.

$('#jqGrid').jqGrid('sortableRows',{
	update : function(e, data){
    //순서가 바뀌면 발생
    }
)};

이런 식인데 나는 이걸 jsGrid에서도 사용하고 싶었다.
아, 결론을 먼저 말하자면 이 기능은 jqGrid가 더 낫다.
jsGrid에서는 내가 원하는 이미지대로의 드래그앤드롭이 아니었다.
줄 모양 그대로 움직였으면 좋겠는데 줄을 드래그 하는 순간 줄 너비만큼 그대로 움직이는게 아니라 너비가 줄어서 네모네모가 되는 느낌? 좀 더 칸별로 움직이는 느낌이었다 css를 좀 더 추가하면 물론 달라지겠지만.

아무튼 jsGrid에서 사용하려고 검색을 해보니 jqGrid에서의 예시가 대부분이었고, 좀 더 찾다가 발견한건 jsGrid github에 달린 공식 답변이었다.

https://github.com/tabalinas/jsgrid/issues/1

추가할 예정이었다가 jQuery와 뭐 그런걸로 사용하라고 하더니 demo에 추가되었다고 되어있는 댓글이었다.