[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
SpreadJSでは、ユーザーがセルのダーティステータスを設定することにより、ワークシートで変更されたセル値の詳細を取得できます。本オプションはセルの変更詳細を提供しますが、ユーザーが大量のデータでソートなどの操作を実行する場合、パフォーマンスのオーバーヘッドにもなります。
このような場合、パフォーマンスを最適化するにはsuspendDirtyメソッドとresumeDirtyメソッドの使用をお勧めします。
suspendDirtyメソッドで、ソートが完了するまでSpreadJSがセルのダーティステータスをマークするのを停止し、resumeDirtyメソッドで必要に応じて復元します。これらの2つのメソッドを使用することでSpreadJSのパフォーマンスを向上できます。
次のコードは、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) {
// suspendDirty()メソッドを呼び出して、ソートされたセルのダーティステータスの設定を停止します
sheet.suspendDirty();
});
spread.bind(GC.Spread.Sheets.Events.RangeSorted, function (sender, args) {
// セルのダーティステータスを復元するためにresumeDirty()メソッドを呼び出します
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;
}