본문 바로가기

slickgrid14

SlickGrid 엑셀 익스포트하기 SlickGrid의 데이터를 엑셀로 익스포트하는 방법입니다. 즉 포론트엔드에 표시된 SlickGrid의 데이터를 엑셀로 내려받을 수 있는 기능입니다. 아래의 GitHub의 SlickGrid-Export-to-Excel/dist의 모든 파일을 서버의 특정위치에 복사하세요. 저는 /SlickGrid/dist에 복사했습니다. https://github.com/ranjithprabhuk/SlickGrid-Export-to-Excel GitHub - ranjithprabhuk/SlickGrid-Export-to-Excel: jQuery plugin to export the entire data from slick grid to excel. A client si jQuery plugin to export the e.. 2022. 8. 9.
SlickGrid 데이터 초기화하기 SlickGrid의 데이터를 초기화하는 함수를 작성해서 사용하고 있습니다. SlickGrid의 데이터를 DataView에 넣어서 사용하거나, JSON 데이터를 직접 넣어서 사용하는 경우를 모두 처리 할 수 있는 함수를 만들었습니다. SlickGrid에 DataView 사용하는 코드 var dataView = new Slick.Data.DataView(); var grid = new Slick.Grid("#gridContainer", dataView, gridColumns, options); SlickGrid에 JSON 데이터 사용하는 코드 var datas = [ { "name":"홍길도", "age":50 }, { "name":"이순신", "age":42 }, { "name":"김유신", "age":2.. 2022. 7. 12.
SlickGrid 정렬 관련 구현 SlickGrid로 정렬 기능을 추가하고, 프그램으로 정렬을 하던지 또는 정렬을 초기화 하는 방법에 대해서 알아보겠습니다. 아래의 코드는 SlickGrid 생성 및 정렬 로직입니다. // 그리드 옵션 var options = { editable: true, enableAddRow: false, enableCellNavigation: true, autoHeight: false, enableColumnReorder: false }; // 그리드 컬럼 var columns = [ { id: "COL_ID_01", field: "COL_ID_01", width:80, cssClass: "text_center", formatter: verCellMergedFormatter, sortable: true, name:.. 2022. 6. 29.
SlickGrid 마우스 휠 제대로 작동하지 않을 경우 처리 방법 SlickGrid의 세로 스크롤이 제대로 작동하지 않는 경우가 있습니다. 예를 들면 마우스 휠을 연속으로 내리거나 올릴때 스크롤의 이동이 멈추는 현상이 있습니다. 그리고 컬럼을 고정하는 경우 고정된 컬럼에서는 마우스 휠이 작동하지 않습니다. 해결 방법으로는 SlickGrid 소스 내의 lib/jquery.mousewheel.js 를 페이지내에 포함(include)시키면 문제는 해결됩니다. 2022. 6. 13.
SlickGrid 세로 셀 병합(?)하기 SlickGrid는 무료이고, 대용량을처리하기에 매우 좋습니다. 하지만 상용 Grid에 비해서는 기능이 좀 떨어지기도 하죠. SlickGrid에서 세로 셀을 병합이라고 제목을 쓰기는 했지만, 사실 동일 값에 대해서 두번째 Row부터 값을 표시하지 않도록 처리하는 방법입니다. 하나의 세로 셀만 병합 코드 function verCellMergedFormatter(row, cell, value, columnDef, dataContext) { if(row == 0) return value; var items = dataView.getFilteredItems(); var preValue = items[row - 1][columnDef.field]; if(value == preValue) return ""; els.. 2022. 5. 20.
SlickGrid Cell 수정 중 Grid Data 반영하기 SlickGrid의 Cell을 수정 중에 저장 버튼을 클릭하면 Grid Data에 반영 안됩니다. Cell을 수정하고 SlickGrid의 다른 Cell을 클릭하거나, 엔터키를 입력하면 Grid Data에 반영되지만, 매우 번거롭습니다. 저장 버튼을 클릭 할 때 Grid Data를 반영하는 코드는 아래와 같으며, 취소도 할 수 있습니다. Cell 수정 중인 값 Grid Data반영하기 var grid = new Slick.Grid("#gridContainer", dataView, gridColumns, options); ... grid.getEditController().commitCurrentEdit(); Cell 수정 중인 값 취소하기 var grid = new Slick.Grid("#gridConta.. 2022. 5. 13.
SlickGrid Cell 달력 표시 한글 처리하기 SlickGrid의 Cell 에디터 중 달력(Slick.Editors.Date)의 경우 JQueryUI의 Date Picker사용합니다. 따라서 아래와 같이 처리하면 한글로 표시됩니다. $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화'.. 2022. 5. 12.
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.