FlexGrid에서 행 추가 및 제거
대부분의 경우 그리드에서 행을 추가하거나 제거하기 위한 코드를 작성할 필요가 없습니다. 기본적으로, 열 헤더 행 하나와 바인딩 항목 행이 하나씩 있습니다(그리드의 itemsSource 속성을 설정할 때 자동으로 추가됩니다.
사용자가 런타임에 행을 추가하거나 제거할 수 있도록 허용하려면, 다음 속성을 사용하십시오:
allowAddNew: 이 속성을 true로 설정하면 그리드의 하단에 새 행 'template'이 표시됩니다. 사용자는 새 행 템플릿의 셀을 작성하여 itemsSource 배열에 새 행을 추가할 수 있습니다.
allowRemove: 이 속성을 true로 설정하면 그리드에서 'Delete' 키를 처리하고 선택된 행을 제거합니다. 사용자는 행 헤더를 클릭하여 행을 선택한 다음, 'Delete'를 눌러 itemsSource 배열에서 바인딩된 항목을 제거할 수 있습니다.
newRowAtTop: 이 속성을 true로 설정하면 그리드가 새 행 템플릿을 하단이 아닌 그리드 상단에 표시합니다.
아래 그리드를 통해 작동 방식을 확인하실 수 있습니다:
import * as wjGrid from '@mescius/wijmo.grid';
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//enable allowAddNew and allowDelete in the FlexGrid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSource: data,
allowAddNew: true,
allowDelete: true
});