suspendDirty 및 resumeDirty
SpreadJS는 워크시트에서 변경된 셀의 값을 추적하기 위해 셀에 'dirty 상태'를 표시하는 기능을 제공합니다. 이 옵션은 셀 수정 정보를 확인하는 데 유용하지만, 대량 데이터를 정렬할 때에는 성능에 큰 오버헤드를 유발할 수 있습니다.
성능 최적화를 위해서는 suspendDirty 메서드와 resumeDirty 메서드를 사용하는 것이 권장됩니다.
suspendDirty 메서드는 정렬이 완료될 때까지 SpreadJS가 셀의 dirty 상태를 표시하지 않도록 중단하고, resumeDirty 메서드는 필요 시 해당 기능을 다시 활성화합니다. 이 두 메서드를 사용하면 성능을 크게 향상시킬 수 있습니다.
다음은 SpreadJS 작업 중 성능을 개선하기 위해 suspendDirty 및 resumeDirty 메서드를 사용하는 코드 예제입니다.
var startTime, endTime;
window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var data = generateData(50000);
var colInfos = generateBindingColumnInfos(7);
loadingData(sheet, colInfos, data);
spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (sneder, args)
{
// 정렬된 셀에 dirty 상태 표시를 중단하기 위해 suspendDirty() 메서드 호출
sheet.suspendDirty();
});
spread.bind(GC.Spread.Sheets.Events.RangeSorted, function (sender, args)
{
// resumeDirty() 메서드를 호출하여 셀의 dirty 상태 표시를 복원함
sheet.resumeDirty();
});
};
function loadingData(sheet, colInfos, data)
{
sheet.suspendPaint();
sheet.autoGenerateColumns = false;
sheet.bindColumns(colInfos);
sheet.setDataSource(data);
sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, sheet.getRowCount(), sheet.getColumnCount())));
sheet.resumePaint();
}
function generateData(itemCount)
{
var data = [];
var countries = ["China", "American", "UK", "Japan", "France"];
var products = ["Computer", "Car", "Others"];
var colors = ["Red", "Green", "Blue", "White", "Black", "Yellow", "Pink", "Orange"];
var dt = new Date();
for (var i = 0; i < itemCount; i++)
{
var item =
{
id: i,
date: new Date(dt.getFullYear(), i % 12, 1),
country: countries[Math.floor(Math.random() * countries.length)],
product: products[Math.floor(Math.random() * products.length)],
color: colors[Math.floor(Math.random() * colors.length)],
amount: 1000 + Math.random() * 10000,
big: Math.random() > .5
};
data.push(item);
}
return data;
}
function generateBindingColumnInfos(colCount)
{
var bindColumnInfos = [
{ name: "id", displayName: "ID", size: 60 },
{ name: "product", displayName: "Product", size: 90 },
{ name: "country", displayName: "Country", size: 90 },
{ name: "amount", displayName: "Amount", size: 90, formatter: "#,##0" },
{ name: "date", displayName: "Date", size: 90, formatter: 'yyyy-mm-dd' },
{ name: "color", displayName: "Color", size: 85 },
{ name: "big", displayName: "Big", size: 90, cellType: new GC.Spread.Sheets.CellTypes.CheckBox() }
];
return bindColumnInfos;
}