반응형
첫 번째 표시되는 컬럼 정보 아니라 선택 한 컬럼 정보를 가져와야 합니다.
import React, { useState } from 'react'; // useEffect는 이 예제에서 필요 없으므로 제거했습니다.
import { AgGridReact } from 'ag-grid-react';
import { GridReadyEvent, GridApi, ColumnApi, ColDef, CellClickedEvent } from 'ag-grid-community'; // CellClickedEvent 타입 추가
// ag-grid CSS import (필요에 따라 테마 선택)
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 예제 데이터 타입 정의
interface RowDataType {
id: number; // 행 구분을 위한 unique ID 추가 (실제 데이터에 맞춰 조정)
make: string;
model: string;
price: number;
}
const AgGridExample: React.FC = () => {
// Grid API 상태 저장
const [gridApi, setGridApi] = useState<GridApi | null>(null);
// gridColumnApi는 이 예제에서 직접 사용되지 않으므로 제거 가능합니다. (선택 사항)
// const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null);
// 마지막으로 클릭된 셀 정보 상태 저장
const [lastClickedCellInfo, setLastClickedCellInfo] = useState<{
rowData: RowDataType; // 클릭된 셀이 속한 행의 데이터
columnField: string; // 클릭된 셀이 속한 컬럼의 필드명
} | null>(null);
// 컬럼 정의
const [columnDefs] = useState<ColDef[]>([
{ field: 'id', headerName: 'ID', hide: true }, // 내부 ID 컬럼 (숨김)
{ field: 'make', headerName: 'Make', checkboxSelection: true }, // 체크박스 컬럼
{ field: 'model', headerName: 'Model' },
{ field: 'price', headerName: 'Price' },
]);
// 행 데이터 (예제 데이터)
// 각 행에 unique ID를 추가했습니다.
const [rowData] = useState<RowDataType[]>([
{ id: 1, make: 'Toyota', model: 'Celica', price: 35000 },
{ id: 2, make: 'Ford', model: 'Mondeo', price: 32000 },
{ id: 3, make: 'Porsche', model: 'Boxster', price: 72000 },
{ id: 4, make: 'BMW', model: 'M5', price: 60000 },
{ id: 5, make: 'Audi', model: 'A4', price: 50000 },
{ id: 6, make: 'Mercedes', model: 'C Class', price: 45000 },
]);
// GridReady 이벤트 핸들러
const onGridReady = (params: GridReadyEvent) => {
setGridApi(params.api);
// setGridColumnApi(params.columnApi); // 필요 없으면 제거
// console.log('Grid is ready!');
};
// CellClicked 이벤트 핸들러
const onCellClicked = (event: CellClickedEvent) => {
// 클릭된 셀의 행 데이터와 컬럼 필드명을 상태에 저장합니다.
if (event.data && event.colDef.field) {
setLastClickedCellInfo({
rowData: event.data as RowDataType, // 타입 캐스팅
columnField: event.colDef.field,
});
// console.log(`Cell Clicked: Row ID ${event.data.id}, Column: ${event.colDef.field}`); // 확인용 로그
}
};
// '체크된 첫 번째 행 + 마지막 클릭 컬럼 정보 가져오기' 버튼 클릭 핸들러
const onCheckFirstSelectedWithClickedColumn = () => {
if (gridApi) {
const selectedNodes = gridApi.getSelectedNodes(); // getSelectedNodes를 사용하면 Row Node에 접근 가능
if (selectedNodes && selectedNodes.length > 0) {
const firstSelectedNode = selectedNodes[0]; // 첫 번째 체크된 Row Node
const firstSelectedRowData = firstSelectedNode.data as RowDataType; // 첫 번째 체크된 행 데이터
if (lastClickedCellInfo) {
// 마지막으로 클릭된 셀이 체크된 첫 번째 행과 동일한지 확인 (ID 비교)
if (lastClickedCellInfo.rowData.id === firstSelectedRowData.id) {
const clickedColumnField = lastClickedCellInfo.columnField;
const clickedColumnData = (firstSelectedRowData as any)[clickedColumnField]; // 해당 컬럼의 데이터 가져오기
alert(`
체크된 첫 번째 행 정보 (ID: ${firstSelectedRowData.id}):
- 마지막으로 클릭된 컬럼 필드명: ${clickedColumnField}
- 해당 컬럼의 데이터: ${clickedColumnData}
`);
} else {
alert(`
체크된 첫 번째 행이 마지막으로 셀을 클릭한 행과 다릅니다.
(체크된 행 ID: ${firstSelectedRowData.id}, 클릭된 셀의 행 ID: ${lastClickedCellInfo.rowData.id})
체크된 첫 번째 행 내의 셀을 클릭해주세요.
`);
}
} else {
alert('셀이 클릭된 적이 없습니다. 체크된 첫 번째 행 내의 셀을 클릭해주세요.');
}
} else {
alert('체크된 행이 없습니다.');
}
} else {
alert('Grid API가 준비되지 않았습니다.');
}
};
return (
<div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* 높이 조절 필요 */}
<h2>ag-grid 체크된 첫 번째 행 + 마지막 클릭 컬럼 정보 예제</h2>
<button onClick={onCheckFirstSelectedWithClickedColumn} style={{ marginBottom: '10px' }}>
체크된 첫 번째 행에서 마지막 클릭 컬럼 정보 가져오기
</button>
<div className="ag-theme-alpine" style={{ height: '100%', width: '100%' }}>
<AgGridReact
rowData={rowData} // 행 데이터 설정
columnDefs={columnDefs} // 컬럼 정의 설정
onGridReady={onGridReady} // GridReady 이벤트 핸들러 설정
onCellClicked={onCellClicked} // CellClicked 이벤트 핸들러 추가
rowSelection="multiple" // 여러 행 선택 가능하도록 설정
>
</AgGridReact>
</div>
</div>
);
};
export default AgGridExample;
첫 번째 행에서 선택한 컬럼의 필드명을 가져오게 변경해 주세요.
import React, { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { GridReadyEvent, GridApi, ColumnApi, ColDef } from 'ag-grid-community';
// ag-grid CSS import (필요에 따라 테마 선택)
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 예제 데이터 타입 정의
interface RowDataType {
make: string;
model: string;
price: number;
}
const AgGridExample: React.FC = () => {
// Grid API 상태 저장
const [gridApi, setGridApi] = useState<GridApi | null>(null);
const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null);
// 컬럼 정의
const [columnDefs] = useState<ColDef[]>([
{ field: 'make', headerName: 'Make', checkboxSelection: true }, // 체크박스 컬럼
{ field: 'model', headerName: 'Model' },
{ field: 'price', headerName: 'Price' },
]);
// 행 데이터 (예제 데이터)
const [rowData] = useState<RowDataType[]>([
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
{ make: 'BMW', model: 'M5', price: 60000 },
{ make: 'Audi', model: 'A4', price: 50000 },
{ make: 'Mercedes', model: 'C Class', price: 45000 },
]);
// GridReady 이벤트 핸들러
const onGridReady = (params: GridReadyEvent) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
// console.log('Grid is ready!');
};
// '체크된 첫 번째 행 데이터 가져오기' 버튼 클릭 핸들러
const onCheckFirstSelected = () => {
if (gridApi && gridColumnApi) {
const selectedRows = gridApi.getSelectedRows();
if (selectedRows && selectedRows.length > 0) {
const firstSelectedRow = selectedRows[0];
// 현재 화면에 표시된 컬럼 목록을 가져옵니다.
const allDisplayedColumns = gridColumnApi.getAllDisplayedColumns();
if (allDisplayedColumns && allDisplayedColumns.length > 0) {
// 첫 번째 표시되는 컬럼 정보를 가져옵니다.
const firstDisplayedColumn = allDisplayedColumns[0];
const firstColumnField = firstDisplayedColumn.getColDef().field; // 첫 번째 컬럼의 필드명
if (firstColumnField) {
// 첫 번째 행에서 첫 번째 컬럼의 데이터도 함께 가져옵니다.
const firstColumnData = (firstSelectedRow as any)[firstColumnField];
alert(`
체크된 첫 번째 행의 정보:
- 첫 번째 표시 컬럼 필드명: ${firstColumnField}
- 해당 컬럼의 데이터: ${firstColumnData}
`);
} else {
alert('첫 번째 표시 컬럼의 필드명을 가져올 수 없습니다.');
}
} else {
alert('표시된 컬럼 정보가 없습니다.');
}
} else {
alert('체크된 행이 없습니다.');
}
} else {
alert('Grid API 또는 Column API가 준비되지 않았습니다.');
}
};
return (
<div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* 높이 조절 필요 */}
<h2>ag-grid 체크된 첫 번째 행 정보 예제</h2>
<button onClick={onCheckFirstSelected} style={{ marginBottom: '10px' }}>
체크된 첫 번째 행의 첫 컬럼 필드명 가져오기
</button>
<div className="ag-theme-alpine" style={{ height: '100%', width: '100%' }}>
<AgGridReact
rowData={rowData} // 행 데이터 설정
columnDefs={columnDefs} // 컬럼 정의 설정
onGridReady={onGridReady} // GridReady 이벤트 핸들러 설정
rowSelection="multiple" // 여러 행 선택 가능하도록 설정
// onCellClicked={handleCellClicked} // 만약 셀 클릭 정보가 필요하다면 이 이벤트를 사용합니다.
>
</AgGridReact>
</div>
</div>
);
};
export default AgGridExample;
React17, Typescript 환경에서 ag-grid에 onGridReady에서 event: GridReadyEvent에 setGridApi(event.api) 해서 체크 버튼을 클릭하면 aggrid의 체크 된 첫 번쨰의 어느 컬럼을 선택 했는지 알수 있는 React 예제 소스
import React, { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { GridReadyEvent, GridApi, ColumnApi, ColDef } from 'ag-grid-community';
// ag-grid CSS import (필요에 따라 테마 선택)
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 예제 데이터 타입 정의
interface RowDataType {
make: string;
model: string;
price: number;
}
const AgGridExample: React.FC = () => {
// Grid API 상태 저장
const [gridApi, setGridApi] = useState<GridApi | null>(null);
const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null);
// 컬럼 정의
const [columnDefs] = useState<ColDef[]>([
{ field: 'make', headerName: 'Make', checkboxSelection: true }, // 체크박스 컬럼
{ field: 'model', headerName: 'Model' },
{ field: 'price', headerName: 'Price' },
]);
// 행 데이터 (예제 데이터)
const [rowData] = useState<RowDataType[]>([
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
{ make: 'BMW', model: 'M5', price: 60000 },
{ make: 'Audi', model: 'A4', price: 50000 },
{ make: 'Mercedes', model: 'C Class', price: 45000 },
]);
// GridReady 이벤트 핸들러
const onGridReady = (params: GridReadyEvent) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
// console.log('Grid is ready!'); // 필요시 확인용 로그
};
// '체크된 첫 번째 행 데이터 가져오기' 버튼 클릭 핸들러
const onCheckFirstSelected = () => {
if (gridApi) {
const selectedRows = gridApi.getSelectedRows();
if (selectedRows && selectedRows.length > 0) {
const firstSelectedRow = selectedRows[0];
// 첫 번째 컬럼의 field 이름을 가져옵니다.
const firstColumn = gridColumnApi?.getAllDisplayedColumns()[0];
const firstColumnField = firstColumn?.getColDef().field;
if (firstColumnField) {
// 첫 번째 행에서 첫 번째 컬럼의 데이터를 가져옵니다.
const firstColumnData = (firstSelectedRow as any)[firstColumnField];
alert(`체크된 첫 번째 행의 '${firstColumnField}' 컬럼 값: ${firstColumnData}`);
} else {
alert('첫 번째 컬럼 정보를 가져올 수 없습니다.');
}
} else {
alert('체크된 행이 없습니다.');
}
} else {
alert('Grid API가 준비되지 않았습니다.');
}
};
return (
<div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* 높이 조절 필요 */}
<h2>ag-grid 체크된 첫 번째 행 데이터 예제</h2>
<button onClick={onCheckFirstSelected} style={{ marginBottom: '10px' }}>
체크된 첫 번째 행 데이터 가져오기
</button>
<div className="ag-theme-alpine" style={{ height: '100%', width: '100%' }}>
<AgGridReact
rowData={rowData} // 행 데이터 설정
columnDefs={columnDefs} // 컬럼 정의 설정
onGridReady={onGridReady} // GridReady 이벤트 핸들러 설정
rowSelection="multiple" // 여러 행 선택 가능하도록 설정
>
</AgGridReact>
</div>
</div>
);
};
export default AgGridExample;
반응형