IT 검색 결과
494 개의 검색 결과가 있습니다.
IT/AG Grid

[AG Grid] AG Grid 검색 및 필터 기능 예제

이번 글에서는 AG Grid 검색 및 필터 기능에 대해 기록한다. 검색 및 필터 기능에 사용되는 것은 컬럼에서의 filter 기능을 사용하면 된다. filter AG Grid에서 아래와 같이, 각 컬럼에서 데이터를 필터링 하거나 검색을 할 때 아래 input 창이 보인다. 아래와 같이, 컬럼에 특정 테스트를 입력했을 때 필터링이 된다. filter에 대한 속성 종류는 아래와 같다. Filter 종류 내용 agNumberColumnFilter 숫자 비교 필터 agTextColumnFilter 문자열 비교 필터 agDateColumnFilter 날짜 비교 필터 agSetColumnFilter AG Grid Enterprise 기능에서만 사용 가능 그래서, 무료 AG Grid(AG Grid community)..

2023. 1. 18.
IT/AG Grid

[AG Grid] AG Grid 체크 박스 기능 예제

AG Grid에서 각 Row 별로 체크 박스와 헤더 컬럼에 체크 박스에 대한 예제를 기록하려고 한다. 여기서 사용되는 gridOptions는 headerCheckboxSelection와 headerCheckboxSelection이다. 체크박스 AG Grid에서 컬럼을 정의할 때, 아래와 같이 columnDefs 리스트 안에 정의를 한다. columnDefs: [ { minWidth: 50, headerCheckboxSelection: true, // 헤더 컬럼에 체크 박스 기능 추가(2023-01-17, ANDUM) checkboxSelection: true // Row 데이터에 체크 박스 추가(2023-01-17, ANDUM) }, {headerName:"USERID", field: "USERID", ..

2023. 1. 18.
IT/AG Grid

[AG Grid] AG Grid Row 추가 및 삭제

AG Grid에서 Row를 추가하고 삭제하는 예제에 대해서 이번 글을 시작한다. AG Grid Row 추가 AG Grid 내부에서 Row를 신규로 추가하는 방법이다. 이 방법은 updateRowData 함수를 사용하여 Row를 추가할 수 있다. const GRID = { addRow: function () { // addRow 시 빈줄 추가 (2023-01-16, ANDUM) let _this = this; const newRow = {}; _this.gridOptions.api.updateRowData({add:[newRow]}); } } 위와 같이, newRow를 생성하여 gridOptions.api.updateRowData({add:[newRow]}) 로 Row를 추가할 수 있다. 결과 위와 같이,..

2023. 1. 17.
IT/AG Grid

[AG Grid] AG Grid 컬럼 정의 및 속성 정리

AG Grid의 첫 시작은 Grid를 생성하고, 컬럼을 정의하는 것부터 시작하여 속성들을 정의하여 데이터를 가져올 준비를 하는 것으로 시작한다. 이번 글은 AG Grid 컬럼 정의 및 속성에 대해 글을 작성한다. 1. 컬럼 정의 컬럼 정의는 아래와 같은 형식으로 정의를 할 수 있다. columnDefs: [ { minWidth: 10, headerCheckboxSelection: true, checkboxSelection: true, }, {headerName:"USERID", field: "USERID"}, {headerName:"NMLAST", field: "NMLAST"} ] 위의 columnDefs를 통해 체크박스, USERID, NMLAST를 정의한다. headerName : 컬럼에 보여지는 텍..

2023. 1. 16.
IT/AG Grid

[AG Grid] AG Grid row 클릭 시 데이터 가져오는 방법(onCellClicked)

AG Grid에서 특정 Cell이나 Row를 클릭했을 때, 클릭한 Row의 데이터를 가져오는 방법은 onCellClicked를 사용하면 된다. onCellClicked onCellClicked 이벤트는 셀을 클릭했을 때 호출되는 콜백 이벤트다. 그래서, 셀을 클릭하면 그 클릭한 로우에 있는 데이터를 가져올 수가 있다. 아래의 코드와 같이, gridOptions에 onCellClicked API를 추가로 넣으면, 저 params에 데이터가 들어 온다. onCellClicked: params => { // example event handler let test = params; console.log('cell was clicked', params) } 아래 화면과 같이, 셀을 클릭하고 개발자 도구에서 디버깅..

2023. 1. 13.
IT/AG Grid

[AG Grid] AG Grid 데이터 가져오는 방법(fetch 사용)

이번 글에서는 저번에는 XMLHttpRequest()를 통해 API로 던졌는데, 이번 글에서는 fetch()를 사용하여 데이터를 가져오는 방법에 대해 글을 기록한다. 2022.12.23 - [IT/AG Grid] - [AG Grid] AG Grid 데이터 가져오는 방법 [AG Grid] AG Grid 데이터 가져오는 방법 이번 글은 AG Grid를 적용하고, 프론트 단에서 백엔드 단으로 API 송신을 하여 데이터를 가져오는 방법에 대해 기록한다. 기존 솔루션에 적용되어 있는 방법과는 확연하게 달라 기록한다. 기존 솔 yongku.tistory.com 저번 글은 위의 URL을 참고하면 된다. AG Grid 기본 세팅 initGrid: function(){ let _this = this; _this.grid..

2023. 1. 11.