脏数据

脏数据可以帮助你获得变更的的数据。脏数据可以是插入的行,删除的行,更新的行(含有更新单元格的行),或者更新的单元格。当你需要捕获任何用户改变,而不必获得整个工作表时,这是特别有用的。

<p>脏概念定义如下:</p> <ul> <li><strong>通常,只有单元格值的变更才导致其成为脏数据。</strong></li> <li><strong>如果单元格是脏数据,其所在的行也将是脏数据。</strong></li> <li><strong>如果插入了一行并为其中的一个单元格设置了值,那么此行将只是一个插入的行,而不是脏数据。被设值的那个单元格也不是脏数据。</strong></li> <li><strong>加载绑定数据的项不是脏数据,但是,在通过 spreadSheet 修改绑定数据之后,它将变为脏数据。</strong></li> <li><strong>脏数据的状态不会因为撤销操作而改变。</strong></li> </ul> <p>你可以通过调用表单上的 <strong>getDirtyRows</strong> 方法来获取所有的脏行。如果存在绑定的数据,用户可以从脏行中获取 <strong>row</strong>, <strong>item</strong>, 和 <strong>originalItem</strong> 信息。否则,只能获得行数据。</p> <p>你可以通过调用 <strong>getDirtyCells</strong> 方法来获取脏单元格。当指定区域时,需要提供以下的操作参数。</p> <ul> <li><strong>row: 区域中左上方单元格的行索引值。</strong></li> <li><strong>col: 区域中左上方单元格的列索引值。</strong></li> <li><strong>rowCount: 区域行数目。</strong></li> <li><strong>colCount:区域列数目。</strong></li> </ul> <p>每一个脏单元格都提供这些信息: <strong>row</strong>, <strong>col</strong>, <strong>oldValue</strong>, <strong>newValue</strong>.</p> <p>你可以通过调用表单上的 <strong>getDeletedRows</strong> 方法来获取所有删除的行。如果存在绑定数据,用户可以从脏行中获取 <strong>row</strong> 和 <strong>originalItem</strong> 信息。否则,只能获得行数据。</p> <p>你可以通过调用表单上的 <strong>getInsertRows</strong> 方法来获取所有插入的行。每一个插入的行都提供 <strong>行</strong> 和 <strong>项目</strong> 信息。</p> <p>脏,插入和删除状态可以通过 <strong>clearPendingChanges</strong> 方法清除。在调用 <strong>setRowCount</strong>, <strong>setColumnCount</strong>, <strong>fromJSON</strong>, 或者 <strong>setDataSource</strong> 方法之后,它们也会被自动清除。你也可以按范围清除脏/插入/删除状态。会提供可选对象参数的clearChangeInfo以指定清除操作.</p> <ul> <li><strong>clearChangeInfo.row: [optional] 清除区域的行索引</strong></li> <li><strong>clearChangeInfo.col: [optional] 清除区域的列索引</strong></li> <li><strong>clearChangeInfo.rowCount: [optional] 清除区域的行数</strong></li> <li><strong>clearChangeInfo.colCount: [optional] 清除区域的列数</strong></li> <li><strong>clearChangeInfo.clearType: [optional] 清除挂起的更改的类型,包括脏/插入/删除,默认为脏,该值为GC.Spread.Sheets.ClearPendingChangeType的枚举</strong></li> </ul>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); for (var r = 0; r < 30; r++) { sheet.setText(r, 0, "A" + (r + 1)); } for (var c = 1; c < 20; c++) { sheet.setText(0, c, String.fromCharCode(65 + c) + "1"); } sheet.resumePaint(); sheet.clearPendingChanges(); var _getElementByIdtaResult = _getElementById("taResult"); function getChangedCellData(dirtyItem) { return ["Cell (", dirtyItem.row, ",", dirtyItem.col, ") changed from ", dirtyItem.oldValue, " to ", dirtyItem.newValue].join(""); } function getDirtyCellData(dirtyItem) { return ["Cell (", dirtyItem.row, ",", dirtyItem.col, ") oldValue: ", dirtyItem.oldValue, " newValue: ", dirtyItem.newValue].join(""); } function appendResult(txt) { _getElementByIdtaResult.value=_getElementByIdtaResult.value + txt + "\n"; } spread.bind(spreadNS.Events.CellChanged, function (event, data) { var row = data.row, col = data.col; if (row === undefined || col === undefined) { return; } if (sheet.hasPendingChanges(row, col)) { var dirtyDataArray = sheet.getDirtyCells(row, col); if (dirtyDataArray.length > 0) { appendResult(getChangedCellData(dirtyDataArray[0])); } } }); spread.bind(spreadNS.Events.RowChanged, function (event, data) { var row = data.row, count = data.count, propName = data.propertyName; if (row === undefined || count === undefined || propName === undefined) { return; } if (propName === "addRows" || propName === "deleteRows") { appendResult(propName + " @ " + row + (count > 1 ? " count: " + count : "")); } }); _getElementById("btnInsertRow").addEventListener('click',function () { var sels = sheet.getSelections(); var len = sels.length; if (len > 0) { var s = sels[0]; sheet.addRows(s.row, 1); } }); _getElementById("btnDeleteRow").addEventListener('click',function () { var sels = sheet.getSelections(); var len = sels.length; if (len > 0) { var s = sels[0]; sheet.deleteRows(s.row, s.rowCount); } }); _getElementById("btnGetSelectionDirtyCells").addEventListener('click',function () { var sels = sheet.getSelections(); var len = sels.length; if (len > 0) { var s = sels[0]; var row = s.row, col = s.col; if (row < 0) { row = 0; } if (col < 0) { col = 0; } var cells = sheet.getDirtyCells(row, col, s.rowCount, s.colCount); if (cells.length > 0) { appendResult("Dirty Cells:\n" + cells.map(function (item) { return getDirtyCellData(item); }).join("\n")); } } }); _getElementById("btnGetDirtyCells").addEventListener('click',function () { var cells = sheet.getDirtyCells(); if (cells.length > 0) { appendResult("Dirty Cells:\n" + cells.map(function (item) { return getDirtyCellData(item); }).join("\n")); } }); _getElementById("btnGetDirtyRows").addEventListener('click',function () { var rows = sheet.getDirtyRows(); if (rows.length > 0) { appendResult("Dirty rows @ " + rows.map(function (item) { return item.row; }).join(", ")); } }); _getElementById("btnGetInsertRows").addEventListener('click',function () { var rows = sheet.getInsertRows(); if (rows.length > 0) { appendResult("Inserted rows @ " + rows.map(function (item) { return item.row; }).join(", ")); } }); _getElementById("btnGetDeleteRows").addEventListener('click',function () { var rows = sheet.getDeletedRows(); if (rows.length > 0) { appendResult("Deleted rows @ " + rows.map(function (item) { return item.row; }).join(", ")); } }); _getElementById("btnClearPendingChanges").addEventListener('click',function () { var clearByRange = _getElementById("clearByRange").checked; if (clearByRange) { var dirty = _getElementById("clearDirty").checked ? 1 : 0; var insert = _getElementById("clearInsert").checked ? 2 : 0; var deleted = _getElementById("clearDelete").checked ? 4 : 0; var clearType = dirty | insert | deleted; var selections = sheet.getSelections(); selections.forEach((selection) => { sheet.clearPendingChanges({ clearType: clearType, row: selection.row, rowCount: selection.rowCount, col: selection.col, colCount: selection.colCount }); }); } else { sheet.clearPendingChanges(); } _getElementByIdtaResult.value = ''; }); _getElementById("btnSetRowCount").addEventListener('click',function () { sheet.setRowCount(60); }); _getElementById("btnSetColumnCount").addEventListener('click',function () { sheet.setColumnCount(16); }); }; function _getElementById(id){ return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Insert/delete rows or change row/column count using the buttons below.</p> <p>You can then get the dirty (what’s changed) rows or cells by clicking the “Get Dirty Rows”, “Get All Dirty Cells”, etc. buttons.</p> <div class="option-row"> <input type="button" id="btnInsertRow" value="Insert Row" title="Insert an new row at selected row" /> <input type="button" id="btnDeleteRow" value="Delete Rows" title="Deleted seleted rows" /> </div> <p>If clear pending change by range, please select range in sheet and select type in Dirty/Insert/Delete.</p> <div class="option-row"> <div> <input id="clearByRange" type="checkbox"> <label for="clearByRange">Clear by Range</label> </div> <div> <input id="clearDirty" type="checkbox"> <label for="clearDirty">Dirty</label> <input id="clearInsert" type="checkbox"> <label for="clearInsert">Insert</label> <input id="clearDelete" type="checkbox"> <label for="clearDelete">Delete</label> </div> <input type="button" id="btnClearPendingChanges" value="Clear Pending Changes" title="Clear pending changes" /> </div> <div class="option-row"> <input type="button" id="btnSetRowCount" value="Set Row Count" title="Set row count to 60" /> <input type="button" id="btnSetColumnCount" value="Set Column Count" title="Set column count to 16" /> </div> <div class="option-row"> <input type="button" id="btnGetDirtyRows" value="Get Dirty Rows" /> <input type="button" id="btnGetDirtyCells" value="Get All Dirty Cells" /> <input type="button" id="btnGetSelectionDirtyCells" value="Get Selection Dirty Cells" /> </div> <div class="option-row"> <input type="button" id="btnGetInsertRows" value="Get Insert Rows" /> <input type="button" id="btnGetDeleteRows" value="Get Delete Rows" /> </div> <div class="option-row" style="width:100%;height:80px;"> <textarea id="taResult" style="width:100%;padding:0;float:right;height:80px;background:none"></textarea> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } p{ padding:2px 10px; background-color:lavender; } input[type="button"] { width: 100%; margin-bottom: 2px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }