选择单元格

你可以在Spread.Sheets中选择单元格,行,列或者多片区域。

点击一个单元格并且拖动鼠标来选择一个区域。然后你将看到此区域被选择。 你可以调用 selectionBorderColor 和 selectionBackColor 方法改变选择区域的边框颜色与背景色, 示例代码如下: 你可以调用 selectionPolicy 和 selectionUnit 方法来设置用户如何选择项目。 SelectionPolicy 枚举提供三种选择模式: single: 允许用户仅选择单个项目 range: 允许用户选择单个连续的区域, 但是不支持选择多个不连续的区域。 muliRange: 允许用户选择单个连续的区域, 同时支持多个不连续区域选择。 SelectionUnit 枚举包含三种类型: cell: 表示最小选择单元是一个单元格。 row: 表示最小选择单位是行。 column: 表示最小选择单位是列。 你可以通过这两个方法来控制整个的选择模式。 按下 Ctrl 键并选择一些区域, 你将选择多片区域。 你也可以调用 addSelection 方法来添加更多的选择区域, 然后通过调用 getSelections 方法获取所有的选择区域。 调用 clearSelection 方法来清除所有选择区域。示例代码如下: 你可以通过 allowUserDeselect 设置来控制是否允许鼠标反选当前选择区域 除了通过鼠标进行选择, 你也可以通过调用 setSelection 方法来选择一些单元格或是通过调用 setActiveCell 方法选择一个单元格。 活动单元格是整个选择区域的第一个单元格。 调用 getActiveRowIndex 和 getActiveColumnIndex 方法来获取活动单元格的行索引和列索引, 示例代码如下: 当你设置了活动单元格, 如果此单元格并不在当前视图中, 你可以调用 showCell, showRow, 和 showColumn 方法来让活动单元格可见。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); spread.suspendPaint(); initSpread(spread); spread.resumePaint(); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.fromJSON(data[0]); _getElementById('selectionPolicy').addEventListener('change', function() { var sheet = spread.getActiveSheet(); var policy = parseInt(this.value, 10); sheet.selectionPolicy(policy); }); _getElementById('selectionUnit').addEventListener('change', function() { var sheet = spread.getActiveSheet(); var unit = parseInt(this.value, 10); sheet.selectionUnit(unit); }); _getElementById('setBackColor').addEventListener('click', function() { var sheet = spread.getActiveSheet(); var backColor = _getElementById('backColor').value; sheet.options.selectionBackColor = backColor; }); _getElementById('setBorderColor').addEventListener('click', function() { var sheet = spread.getActiveSheet(); var borderColor = _getElementById('borderColor').value; sheet.options.selectionBorderColor = borderColor; }); _getElementById('tabStoptrue_Btn').addEventListener('click', function() { setIsTabStop(spread, true); }); _getElementById('tabStopfalse_Btn').addEventListener('click', function() { setIsTabStop(spread, false); }); _getElementById('chk_allowDeselect').addEventListener('click', function() { spread.options.allowUserDeselect = this.checked; }); } function setIsTabStop(spread, isTabStop) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); for (var index = 0; index < sels.length; index++) { var selRange = sels[index]; if (selRange.col >= 0 && selRange.row >= 0) { sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop); } else if (selRange.row >= 0) { sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop); } else if (selRange.col >= 0) { sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop); } } sheet.resumePaint(); } 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$/spread/source/data/data.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="dataset.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> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> Change the provided properties to see how they affect the selection. </div> <div class="option-row"> <label for="selectionPolicy" class="normal">SelectionPolicy:</label> </div> <div class="option-row"> <select id="selectionPolicy"> <option value="0">Single</option> <option value="1">Range</option> <option value="2" selected="selected">MultiRange</option> </select> </div> <div class="option-row"> <label for="selectionUnit" class="normal">SelectionUnit:</label> </div> <div class="option-row"> <select id="selectionUnit"> <option value="0" selected="selected">Cell</option> <option value="1">Row</option> <option value="2">Column</option> </select> </div> <div class="option-row"> <input type="checkbox" id="chk_allowDeselect" checked/> <label for="chk_allowDeselect">Allow User Deselect</label> </div> <div class="option-row"> <label for="backColor" class="wide">Selection BackColor:</label> </div> <div class="option-row"> <input type="text" id="backColor" value="rgba(204,255,51, 0.3)" /> <input type="button" value="Set" id="setBackColor" class="narrow" /> </div> <div class="option-row"> <label for="borderColor" class="wide">Selection BorderColor:</label> </div> <div class="option-row"> <input type="text" id="borderColor" value="Accent 3 -40" /> <input type="button" value="Set" id="setBorderColor" class="narrow" /> </div> <div class="option-row"> <input type="button" id="tabStoptrue_Btn" value="SetTabStop True" class="wide" style="padding-top: 4px"/> <input type="button" id="tabStopfalse_Btn" value="SetTabStop False" class="wide" style="padding-top: 4px"/> <label style="display: block;padding-top: 10px;">Set this to control whether the user can set focus to a selection using the Tab key.</label> </div> </div> </div> </body> </html>
input[type="text"] { width: 160px; } label.normal { display: inline-block; width: 120px; } select { width: 120px; height: 35px; } label.wide { display: inline-block; width: 160px; } input[type="button"].narrow { width: 60px; } input[type="button"].wide { width: 160px; } .colorLabel { background-color: #F4F8EB; } .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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }