SMART datagrid v1.4 > Examples

Back  Forward

Row Inserting  Example

사용자가 직접 새로운 행을 기존 행들 사이에 추가하기 위해서는 그리드 GridBase.editOptionsinsertabletrue로 지정돼야 한다. 또, 마지막 행 다음에 추가하기 위해서는 appendabletrue로 지정돼야 한다. 두 속성 모두 기본값은 false이다. 

우선 행 삽입을 하려면 삽입 위치의 행으로 포커스를 가져간 후 insert (mac에서는 ctr+alt+I) 키를 입력한다. 입력 완료 후 행 수정과 마찬가지로 추가를 완료하기 위해서는 키보드 방향키나 마우스로 포커스를 다른 행으로 이동시키면 된다. 

아래 예제에서는 DataColumn.defaultValue, defaultExpression 속성을 이용해서 기본값을 설정한다. 

'국가'의 기본값: '제품코드'의 기본값 수식:

(rand 연산자 등에 대해서는 수식 개요 페이지를 참조한다.) 

Grid - 1
0 rows

입력 완료된 행 데이터는 GridDataSet으로 전달되고, 데이터행 추가가 완료되면 GridDataSet.onRowInserted이벤트가 발생한다. 또, 행 수정과 유사하게 그리드 행 삽입을 시작하기 직전에 GridBase.onInserting 이벤트가 발생하는데, 이 이벤트의 핸들러 내에서 명시적으로 false를 리턴하면 행 삽입을 시작할 수 없게 된다. 

 

Code -1
    grdMain.onInserting = function (grid, rowIndex) {
        if ($('#chkEventInsertable').is(':checked')) {
            return false;
        }
    };

appendabletrue면 마지막 행에서 아래 방향키를 눌러서 행 추가를 시작할 수 있다. 이벤트 등 나머지는 삽입의 경우와 동일하다. 

또, GridBase.edit를 호출해서 행 수정을 시작하는 것과 마찬가지로, GridBase.insert, GridBase.append를 호출해서 각각 행 삽입과 추가를 시작할 수 있고, 행 추가가 완료되고 데이터셋으로 전달한 값이 전달돼서 데이터행이 실제 생성되면 GridDataSet.onRowInserted 이벤트가 발생한다. 

 

Code -2
    dsMain.onRowInserted = function (ds, row) {
        console.log('Data row inserted at ' + row);  
    };
Grid - 2
0 rows

소스보기 JSP 

See Also
GridBase.onInserting
EditOptions
GridView.editOptions
Examples
행 수정
행 삭제
셀 편집
State Cells
Edit Events
Edit Keys