syidaxgrid
홈 가격 내 정보

GRID FEATURE

셀과 행 편집

셀 편집은 하나의 값을 즉시 수정하고 전체 행 편집은 여러 필드를 하나의 행 작업으로 확정합니다. editor는 입력 UI를, editable은 쓰기 가능 여부를 지정합니다.

Markdown 원문 Features

동작 원리와 선택 기준

숫자·날짜·목록·체크박스 편집기마다 저장값의 타입을 정하세요. 파서는 입력을 값으로 바꾸고 검증은 허용 범위를 검사합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 숫자와 기본 Select 편집

수량은 음수가 아닌 숫자, 상태는 정해진 목록으로 입력합니다.

javascript
grid.columnDefs = [
  { field: 'quantity', editable: true, editor: 'number', min: 0, step: 1 },
  { field: 'status', editable: true, editor: 'select', options: [
    { value: 'open', label: '진행 중' }, { value: 'done', label: '완료' }
  ] }
];

결과 확인: 화면 라벨과 저장값을 구분합니다. 완료를 선택하면 원본에는 done이 저장되는 구성입니다.

예제 2. 행 단위 확정

표시 중인 주문의 편집을 시작한 뒤 수량을 임시로 바꾸고 확정합니다.

javascript
const started = await grid.startRowEdit('ORD-0001');
if (started) {
  await grid.stageRowEditCell('quantity', 25);
  console.log(await grid.stopRowEdit('commit'));
}

결과 확인: 행 편집 시작이 거절되면 다음 작업을 진행하지 않습니다. 확정 보고서를 통해 실제 적용 결과를 읽습니다.

예제 3. 편집 취소와 결과 구독

사용자가 취소하면 미확정 값을 버리고 실제 변경 결과만 저장 처리에 사용합니다.

javascript
await grid.stopRowEdit('cancel');
grid.addEventListener('cellValueChanged', event => console.log(event.detail));
grid.addEventListener('rowValueChanged', event => console.log(event.detail));

결과 확인: 셀별 변경과 행 전체 확정 이벤트를 중복 서버 저장으로 처리하지 않도록 앱에서 역할을 정합니다.

조합할 때와 문제를 해결할 때

표시된 그룹 제목·상세 행·미로드 자리표시자는 일반 데이터 행 편집과 다릅니다. 안정적인 ID와 편집 가능한 열이 필요합니다.

검증 실패 시 편집 세션이 유지될 수 있습니다. 확정 버튼을 눌렀다는 사실만으로 성공 메시지를 표시하지 마세요.

함께 읽기