의 Grid 라이브러리 결정판 - SlickGrid

자바스크립트에서 격자 표시를 하는 라이브러리가 많은데, 그중에 가장 적합한 SlickGrid를 소개합니다.
※ 2016/3 현재 SlickGrid는 업데이트를 중지합니다(2014/3/5).대신 6pac는 주요 패치alternative master를 도입했기 때문에 이를 사용하는 것이 좋다공인.
JavaScript의 격자선 라이브러리는 다음 표에 나와 있습니다.
라이브러리 이름
개요
SlickGrid
이번 추천.뛰어난 디스플레이 속도, 편집 기능
DataTable
첫 번째 디스플레이 속도가 좀 느리지만 일단 뜨면 빨라요.
jqGrid
안 써봤지만 Example이 풍부해요.다만, 옵션이 쓰기 어려운 인상
dhtmlGrid
다기능, Example도 다양합니다.Excel을 가져올 수 있는 것은 압권입니다.하지만 비즈니스는 유료입니다.
FlexGrid
안 써봤어.업데이트가 별로 안 된 것 같아요.
솔직히 말해서 표현만 하면 어느 것이든 고기능이어서 큰 차이가 없다.
그러나 많은 격자 라이브러리는 고기능이지만 느리고 쓰기 어려워요. 편집 기능이 있지만 표시→편집 모드로 전환하는 것은 번거롭고 저장 기능도 쓰기 어려워요.
SlickGrid는 고속 디스플레이, Excel 등의 편집 기능을 갖추고 있습니다.
"엑셀처럼 하면 안 돼요?"이런 말을 많이 듣다보니 많은 사람들이 짜증을 내며 이 말을 하는 것은 쉽지 않지만, Slick Grid를 사용하면 서로 스트레스 없는 관계를 맺을 수 있겠지요.
그렇다면 SlickGrid의 힘을 실감할 수 있는 예를 소개하고 싶습니다.

1. 성능

이 예제에 표시된 데이터는 500000건입니다.다른 격자 수만 개는 가능하다!옆자리는 다르다.엑셀(2003)보다 한계선이 많아서 깜짝 놀랐어요.
http://mleibman.github.io/SlickGrid/examples/example-optimizing-dataview.html

2. 편집 기능

셀 편집이 원활합니다.아래 Example에서 Auto-edit ON 버튼을 누르면 원활함을 느낄 수 있습니다.
http://mleibman.github.io/SlickGrid/examples/example3-editing.html
나는 편집할 수 있는 격자 라이브러리를 찾아다녔는데, 무료, 요금 관계는 없었지만, 이보다 더 순조로운 것은 없었다.그리고 편집기는 스스로 간단하게 확장할 수 있다.

3. 값 표시 자유도

예를 들어 10을 10%로 계기에 표시하거나 0/1의 숫자를 체크 표시로 표시하면 각 열에 따라 값을 자유롭게 표시할 수 있습니다.많은 Grid가 줄의 색깔만 만지작거리는 상황에서 DOM 단계에서 칸의 값을 편집할 수 있는 기능은 표현력에 있어서 매우 크다.
http://mleibman.github.io/SlickGrid/examples/example2-formatters.html

기타 기능

다른 독특한 것은 다음과 같은 Example이 있습니다.
・비동기적인 묘사 처리.반복 처리 (행내 차트 등) 를 표시하는 등 비동기적으로 처리할 수 있습니다.
http://mleibman.github.io/SlickGrid/examples/example10-async-post-render.html
・ Undo 기능을 사용할 수 있습니다.
http://mleibman.github.io/SlickGrid/examples/example3b-editing-with-undo.html
물론 칸/줄의 이벤트 처리와 정렬 기능 등은 일반적인 격자 라이브러리에 모두 갖추어져 있다.
이것은 반드시 사용해야 할 요리입니다. (또한 전 라이브러리로서 jQuery/jQuery.event.drag가 필요합니다. jQuery UI에는 css가 있지만 js는 읽지 않아도 이동할 수 있습니다.)