eblo

AG-GRID 추가/수정/삭제 예제예제에서 확인 할 내용1. 체크박스, 체크박스 전체 선택 및 해제- 코드를 통해 알 수있다. 2. 편집모드에서 시작, 종료 이벤트 처리 - 종료시 변경 데이터를 별도로 저장해 두었다가 저장 시점에 변경된 데이터만 서버에 전송할 필요가 있다. 3. 삭제 처리 4. 편집모드 강제 종료 하기- 편집모드에서 바로 저장, 수정 등의 버튼을 클릭하면 변경 사항이 적용이 안되는데 이때 강제 종료 시키면 해결이 된다. 5. 버튼을 통한 편집모드 이동. 6. 첫번째, 마지막에 ROW 추가하기 HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575..

AG-GRID 필터와 정렬 예제필터링과 정렬 관련 예제입니다. Html참고 mainGrid.setFilteredData(), mainGrid.sortByYearDesc()123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 AG GRID FILTER & SORT EXAMPLE AG GRID FILTER & SORT EXAMPLE 필터기능 확인 정렬 확인 전체 2004 2005 2006 2007 2008 20..

Row data 선택 이벤트 처리1. click 이벤트 처리 gridOptions에 onRowClicked를 구현하면 된다. 12345678910var gridOptions = { columnDefs: columnDefs, rowData: students, rowSelection: 'single', /* 'single' or 'multiple',*/ enableRangeSelection: true, suppressRowClickSelection: false, onRowClicked : funtion(event){ console.log('onRowClicked'); }};Colored by Color ScriptercsHtml123456789101112131415161718192021222324252627..

Cell Renderer & Style & Drop Down 설정 예제 값을 받아서 보여줄 때 가공을 해야 하는 경우가 있습니다. 코드인 경우 코드의 값으로 전환해야 하고 필요한 경우 그래프나 아이콘, 이미지 등으로 보여 줘야 할 때도 있습니다. 그런 경우 cellRenderer를 이용해서 표현할 수 있습니다. 예제코드로는 세가지를 확인해 볼 수 있습니다. 1. cell에 스타일 적용하기. - 정렬 또는 background color 등을 지정할 수 있습니다. 2. data renderering- 숫자는 오른쪽 정렬을 해야 하며 세자리 마다 콤마를 찍어 줘야 합니다. - Style, Use는 코드 값을 받으며 Value로 표현해야 합니다. 3. Data 편집시 drop down 박스 처리 (중요)- 여기..

1. 기본 예제 코드AG-GRID를 이용해서 화면에 데이터를 보여주는 예제입니다. Athlete, Age 칼럼은 좌측에 고정을 시켰습니다. HTML12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 AG GRID 예제 AG GRID 기본 예제 var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* grid 칼럼 정의 */ this.getColumnDefs = function(){ var columnDefs = [ {he..

1. AG-GRID GRID OPTIONS 정의

1. Column Definitions 자주 사용하면서 필수 값에 대해 설명합니다. 예제)123456789101112var columnDefs = [ {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'}, {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true}, {headerName:"Country", field: "country",..

AG-GRID 설치 라이브러리 추가만 하면 됩니다. Tasks 1. html 작업div 생성 2. javascript 작업칼럼정의gridOptions 정의 ag-grid생성 및 데이터 삽입 1. div 생성123 Colored by Color Scriptercs 2. 칼럼정의 12345678910111213var columnDefs = [ {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'}, {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth..

1. AG-GRID 소개자바스크립트 기반의 오픈 소스 그리드로 무료와 상용버전을 제공합니다.무료만으로도 많은 기능을 제공하며 상용도 비싸지 않으니 그리드를 도입하려고 한다면 충분히 고려해볼 만한 제품입니다. 홈페이지 : https://www.ag-grid.com/ 데모 화면 커뮤니티 버전에서 엔터프라이즈로 전환하고자 한다면 라이브러리만 교체하면 바로 적용이 됩니다. 개발자 수로 라이센스를 결정하는데 하나의 도메인에서 사용한다면 개발자당 $750입니다. 여러 애플리케이션을 개발한다면 $1200달러를 추천합니다. 유로 버전의 경우 피봇 기능, AGGREGATION 기능 등을 제공하는데 일단 써보고 필요 시 전환하면 좋을 거 같습니다. 레퍼런스를 보면 엔터프라이즈는 기능 옆에 빨간색 e가 붙는 것을 볼 수 있..

요즘 프로젝트 리팩토링을 하고 있습니다. 엑셀 관련 된 부분이 엉망인데 그 엉망인 코드를 복사해서 여기 저기 쓰고 있었습니다. 깔끔한 소스, 중복제거, 재사용 가능할 것을 목표로 만들었습니다. 1. 요구사항 프로젝트의 "/src/main/resources/static/format" 디렉토리 아래 "testExcel.xlsm"를 읽는다. 해당 엑셀의 3번째 시트의 데이터를 가져온다. 해당 엑셀의 시트명("Sheet3")으로 데이터를 가져온다.데이터는 List에 자료구조(Map)으로 반환한다. 데이터는 List에 객체로 반환한다. 헤더를 정의해서 가져온다. 엑셀의 첫번째 Row를 헤더로 사용하는 경우도 있다. 원하는 데이터를 스킵할 수 있어야 한다. 2. Gradle Dependencies compile (..