复制粘贴增强

SpreadJS 提供了一个选项,可以指定在复制或粘贴数据时要包含哪些列头。

SpreadJS 还提供了一个选项,可以控制数据是否只能粘贴到可见或不可见的单元格/行/列。

只需要设置Workbook的options属性的copyPasteHeaderOptions来表明是否包含行头数据或者列头数据。例如: GC.Spread.Sheets.CopyPasteHeaderOptions: noHeaders: 0 rowHeaders: 1 columnHeaders: 2, allHeaders: 3 现在,Spread Sheets支持复制多片非连续区域的数据然后粘贴到单片区域。支持下面的两种用例: 相同的行索引和行数 相同的列索引和列数 Spread Sheets在复制的时候会忽略被筛选出去的行。 SpreadJS 还支持在粘贴单元格时跳过不可见单元格范围,只需将 workbook 选项中的 pasteSkipInvisibleRange 设置为 true(默认值为 false)。 在以下情况下,会存在不可见范围: 使用筛选器 存在分组 列的 columnWidth = 0 或行的 rowHeight = 0 单元格被隐藏
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function initSpread(spread) { var sd = data; if (!spread) { return; } spread.suspendPaint(); var sheet = spread.getActiveSheet(); setDataWithHeader(sheet); sheet.setValue(5, 0, "复制所有名称(A8:A14)和所有价格(C8:C14)的非连续单元格,然后粘贴到某处(例如 F5)。"); loadGoodListTable(sheet, 7, 0); var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(8, 0, 6, 4)); sheet.rowFilter(rowFilter); rowFilter.addFilterItem(1, new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.cellValueCondition, { compareType: GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.notEqualsTo, expected: "Vegetable" })); sheet.defaults.colWidth = 100; spread.resumePaint(); var copyPasteHeaderOptions = document.getElementById('copyPasteHeaderOptions'); copyPasteHeaderOptions.value = spread.options.copyPasteHeaderOptions; copyPasteHeaderOptions.addEventListener('change', function () { spread.options.copyPasteHeaderOptions = parseInt(copyPasteHeaderOptions.value); }); var pasteSkipInvisibleRange = document.getElementById("pasteSkipInvisibleRange"); pasteSkipInvisibleRange.checked = spread.options.pasteSkipInvisibleRange; pasteSkipInvisibleRange.addEventListener('change', function () { spread.options.pasteSkipInvisibleRange = this.checked; }); } function setDataWithHeader(sheet) { sheet.getRange(0, 0, 1, 5, 1).backColor("#B3B3B3"); sheet.getRange(0, 0, 1, 5, 1).foreColor("white"); sheet.setValue(0, 0, '周一', 1); sheet.setValue(0, 1, '周二', 1); sheet.setValue(0, 2, '周三', 1); sheet.setValue(0, 3, '周四', 1); sheet.setValue(0, 4, '周五', 1); sheet.setValue(0, 0, '8:00', 2); sheet.setValue(1, 0, '9:00', 2); sheet.setValue(2, 0, '10:00', 2); sheet.setValue(3, 0, '11:00', 2); sheet.setRowHeight(0, 45); sheet.setRowHeight(1, 45); sheet.setRowHeight(2, 45); sheet.setRowHeight(3, 45); sheet.getRange(0, 0, 4, 1).backColor("#c0d88b"); sheet.getRange(0, 1, 4, 1).backColor("#dbe6bf"); sheet.getRange(0, 2, 4, 1).backColor("#f9f9f9"); sheet.getRange(0, 3, 4, 1).backColor("#fce0c0"); sheet.getRange(0, 4, 4, 1).backColor("#fecc8d"); sheet.setValue(0, 0, '法语'); sheet.setValue(0, 2, '法语'); sheet.setValue(0, 4, '法语'); sheet.setValue(1, 1, '艺术史'); sheet.setValue(1, 3, '艺术史'); sheet.setValue(2, 0, '数学'); sheet.setValue(2, 2, '数学'); sheet.setValue(2, 4, '数学'); sheet.setValue(3, 1, '编程'); sheet.setValue(3, 3, '编程'); } function loadGoodListTable(sheet, startRow, startCol) { if (startRow === undefined) { startRow = 0; } if (startCol === undefined) { startCol = 0; } if (sheet.getRowCount(GC.Spread.Sheets.SheetArea.viewport) - startRow < 8 || sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) - startCol < 3) { return; } // sheet.addSpan(startRow + 0, startCol + 0, 1, 4); sheet.setRowHeight(startRow + 0, 40); sheet.setValue(startRow + 0, startCol + 0, "商品列表"); var title = sheet.getCell(startRow + 0, startCol + 0); title.font("bold 20px arial"); title.vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getRange(startRow + 0, startCol + 0, 1, 4).backColor("#B3B3B3").foreColor("white"); sheet.setColumnWidth(startCol + 0, 100); sheet.setColumnWidth(startCol + 1, 100); sheet.setColumnWidth(startCol + 2, 100); sheet.setColumnWidth(startCol + 3, 120); sheet.getRange(startRow + 0, startCol + 0, 8, 4).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), { all: true }); sheet.setValue(startRow + 1, startCol + 0, "名称"); sheet.setValue(startRow + 1, startCol + 1, "类别"); sheet.setValue(startRow + 1, startCol + 2, "价格"); sheet.setValue(startRow + 1, startCol + 3, "购物地点"); for (var i = 0; i < 4; i++) { sheet.getCell(startRow + 1, startCol + i).font("bold 15px arial"); } sheet.setValue(startRow + 2, startCol + 0, "苹果"); sheet.setValue(startRow + 3, startCol + 0, "土豆"); sheet.setValue(startRow + 4, startCol + 0, "西红柿"); sheet.setValue(startRow + 5, startCol + 0, "三明治"); sheet.setValue(startRow + 6, startCol + 0, "汉堡包"); sheet.setValue(startRow + 7, startCol + 0, "葡萄"); sheet.setValue(startRow + 2, startCol + 1, "水果"); sheet.setValue(startRow + 3, startCol + 1, "蔬菜"); sheet.setValue(startRow + 4, startCol + 1, "蔬菜"); sheet.setValue(startRow + 5, startCol + 1, "食品"); sheet.setValue(startRow + 6, startCol + 1, "食品"); sheet.setValue(startRow + 7, startCol + 1, "水果"); sheet.setValue(startRow + 2, startCol + 2, 1.00); sheet.setValue(startRow + 3, startCol + 2, 2.01); sheet.setValue(startRow + 4, startCol + 2, 3.21); sheet.setValue(startRow + 5, startCol + 2, 2); sheet.setValue(startRow + 6, startCol + 2, 2); sheet.setValue(startRow + 7, startCol + 2, 4); var myFormatter = new GC.Spread.Formatter.GeneralFormatter("¥#,##0.00;[Red] ¥#,##0.00"); for (var i = 2; i < 8; i++) { sheet.getCell(startRow + i, startCol + 2).formatter(myFormatter); } sheet.setValue(startRow + 2, startCol + 3, "胖东来"); sheet.setValue(startRow + 3, startCol + 3, "其他"); sheet.setValue(startRow + 4, startCol + 3, "其他"); sheet.setValue(startRow + 5, startCol + 3, "胖东来"); sheet.setValue(startRow + 6, startCol + 3, "胖东来"); sheet.setValue(startRow + 7, startCol + 3, "其他"); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="$DEMOROOT$/spread/source/data/copyPasteEnhancement.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> 您可以选择在 Spread 组件中复制/粘贴数据时是否也复制/粘贴标题。 <div class="option-row"> <p>选择下面的选项,然后选择工作表中的行或列标题,例如 “FRI” 列或 “8:00” 行,然后进行复制或粘贴以查看结果。</p> <label> 复制粘贴标题选项 <select id="copyPasteHeaderOptions"> <option value="0">无标题</option> <option value="1">行标题</option> <option value="2">列标题</option> <option value="3">所有标题</option> </select> </label> </div> <div class="option-row"> <p>启用或禁用 “跳过隐藏区域粘贴” 选项(使用下面的复选框),尝试复制或剪切范围 A1:A4(MON 列,8:00 - 11:00)或 C9:C14(WED,第 9 - 14 行),然后粘贴到范围 F8:F13,查看其对复制/粘贴行为的影响。</p> <input style="width: 20px;float: left;" type="checkbox" id="pasteSkipInvisibleRange" checked="checked" /> <label for="pasteSkipInvisibleRange">跳过隐藏区域粘贴</label> </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; } select { padding: 4px 6px; width: 100%; box-sizing: border-box; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }