eblo

AG-GRID 칼럼 동적 HIDE/SHOW 예제칼럼을 동적으로 보여주거나 감추는 예제 Html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 AG GRID Column Hide 예제 AG GRID Column Hide 예제 Age Country Year Date var MainGrid = function(){ var _this = this; /* grid 영역 정의 */ this.gridDiv = "myGrid"; /* ..

AG-GRID Datepicker 예제그리드에 값을 넣을 때 datepicker를 써야 하는 경우에 대한 예제 입니다. Html빨간색 부분이 해당 부분입니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 AG GRID Datepi..

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..