본문 바로가기

slickgrid7

SlickGrid - Cell 수정 중 저장 버튼 클릭 시 수정 된 데이터 Grid Data에 반영 시키기 SlickGrid의 Cell 편집 모드에서 데이터를 수정 후 엔터키를 입력하거나, SlickGrid의 다른 Cell을 클릭하면 Grid Data에 수정 된 값이 반영된다. 하지만 Input 버튼 등의 onClick 이벤트로 저장을 하려고 하면 수정된 값이 Grid Data에 반영되지 않는다. 따라서 저장 로직을 수행하기 전에 현재 그리드의 수정을 Commit해주어야 한다. function save(){ // 현재 수정을 Commit하여 Grid Data에 반영한다. grid.getEditController().commitCurrentEdit(); // 저장 로직 수행... } 2021. 11. 10.
SlickGrid 순번 컬럼 넣기 SlickGrid의 Formatter를 이용하여 순번 컬럼넣는 방법입니다. Formatter를 활용하면 조건에 따라 Sum, 색상 등의 자유롭게 사용가능합니다. 순번 Formatter 소스로 row Index는 0부터 시작이므로 1을 더해주면 순번이 됩니다. function NumberFormatter(row, cell, value, columnDef, dataContext) { return row + 1; } 위의 Formatter를 컴럼에 적용합니다. var columns = [ {id: "no", name: "No", field: "no", formatter: NumberFormatter}, ... ]; 실행하면 첫번째 컬럼에 순번이 표시됩니다. 전체 소스입니다. 2021. 7. 19.
Slickgrid 멀티헤더(slickgrid-colgroup-plugin) Slickgrid에서 기본적으로 멀티헤더를 지원하지 않습니다. 그래서 멀티헤더를 지원하는 플러그인(slickgrid-colgroup-plugin)을 이용해야 합니다. Slickgrid의 멀티헤더 플러그인은 slickgrid-colgroup-plugin으로 아래의 URL을 참고하세요. https://github.com/keik/slickgrid-colgroup-plugin keik/slickgrid-colgroup-plugin SlickGrid plugin to create column group in a header. - keik/slickgrid-colgroup-plugin github.com 1. 아래의 URL에서 slick.colgroup.js 소스를 Slickgrid 폴더의 plugins에 생성합.. 2021. 7. 10.
SlickGrid 새로운 Row 추가하기 SlickGrid에 새로운 Row를 추가하는 방법입니다. 1. 새로운 Row를 추가하는 Javascript 함수를 추가합니다. function addRow(){ var data = grid.getData(); data.splice(data.length,0,{no: null, title: null, creator: null}); grid.invalidateRow(data.length); grid.updateRowCount(); grid.render(); grid.scrollRowIntoView(data.length-1) } 2. HTML 에 새로운 Row를 추가하는 버튼을 추가합니다. 3. 전체 소스입니다. 2021. 3. 26.
[JS] SlickGrid 다중정렬(Multi Sort)하기 SlickGrid의 타이틀을 클릭하며 정렬이 되는데 다중정렬을 구현해보도록 하겠습니다. SlickGrid에서 다중정렬 동작은 첫번째로 컬럼을 정렬 후 시프트 키를 누르고 타이틀을 클릭하면 다중정렬이 됩니다. 1. 컬럼 정의에 정렬 할 컬럼에 "sortable: true"를 지정합니다. var columns = [ {id: "no", name: "No", field: "no", sortable: true}, {id: "title", name: "Title", field: "title", width:300, sortable: true}, {id: "creator", name: "Creator", field: "creator", width:150, sortable: false} ]; 2. Grid 옵션에 "m.. 2021. 3. 13.
[JS] SlickGrid 단순 정렬하기 SlickGrid의 타이틀을 클릭하며 정렬이 되는데 이것을 구현하는 방법입니다. 1. 컬럼 정의에 정렬 할 컬럼에 "sortable: true"를 지정합니다. var columns = [ {id: "no", name: "No", field: "no", sortable: true}, {id: "title", name: "Title", field: "title", width:300, sortable: true}, {id: "creator", name: "Creator", field: "creator", width:150, sortable: false} ]; 2. SlickGrid의 onSort 이벤트를 아래와 같이 구현합니다. grid.onSort.subscribe(function (e, args) { da.. 2021. 3. 12.
[JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기 얼마전 프로젝트에서 DevExpress의 Web Component를 사용해서 Grid를 구현했었습니다. DevExpress는 많은 기능을 제공하고 있었지만 대용량의 데이터 처리에 문제가 발생했습니다. 컬럼이 60개, 데이터가 2000개 이상일 때 데이터 바인딩 시 화면에 너무 많은 시간이 걸리더군요. 그래서 해결책으로 찾은 것이 SlickGrid입니다. 1. 아래의 GitHub에서 SlickGrid 소스를 받으세요. https://github.com/6pac/SlickGrid 6pac/SlickGrid A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an account on G.. 2021. 2. 5.