Actions

SpreadJS supports many keyboard actions, such as pressing the left arrow key to navigate to the left, pressing the Delete key to clear values, and so on. The key actions use the key map to link the key and the action.

You can add your own key by using the register method to link the keydown event to an action, as shown in the following code: Then press the W, A, S, and D keys to navigate, similar to the up, left, down, and right arrow keys.
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.fromJSON(data[0]); document.getElementById('addCToKeyMap').addEventListener('click', function() { var spreadNS = GC.Spread.Sheets.Commands; var commandManager = spread.commandManager(); commandManager.register( 'customNavigationUp', spreadNS.navigationUp, 'W'.charCodeAt(0), false, false, false, false ); commandManager.register( 'customNavigationLeft', spreadNS.navigationLeft, 'A'.charCodeAt(0), false, false, false, false ); commandManager.register( 'customNavigationDown', spreadNS.navigationDown, 'S'.charCodeAt(0), false, false, false, false ); commandManager.register( 'customNavigationRight', spreadNS.navigationRight, 'D'.charCodeAt(0), false, false, false, false ); }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="data.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"> <input type="button" id="addCToKeyMap" value="Set Keyboard Navigation" /> </div> <div class="option-row"> <label>Key ‘W’ = move up</label> <label>Key ‘A’ = move left</label> <label>Key ‘S’ = move down</label> <label>Key ‘D’ = move right</label> </div> </div> </div> </body> </html>
var data = [{ "version":"12.0.0", "tabStripRatio":0.6, "sheetCount":1, "sheets":{ "Sheet1":{ "name":"Sheet1", "rowCount":114, "columnCount":21, "activeRow":2, "activeCol":2, "data":{ "dataTable":{ "0":{ "0":{ "value":"Salesperson", "style": { "foreColor" : "#FFFFFF", "backColor" : "#808080", "hAlign" : 1 } }, "1":{ "value":"Region", "style": { "foreColor" : "#FFFFFF", "backColor" : "#808080", "hAlign" : 1 } }, "2":{ "value":"Sales", "style": { "foreColor" : "#FFFFFF", "backColor" : "#808080", "hAlign" : 1 } } }, "1":{ "0":{ "value":"Ally", "style":{"hAlign" : 1} }, "1":{ "value":"North", "style":{"hAlign" : 1} }, "2":{ "value":24234324, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "2":{ "0":{ "value":"Tom", "style":{"hAlign" : 1} }, "1":{ "value":"South", "style":{"hAlign" : 1} }, "2":{ "value":2342342, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "3":{ "0":{ "value":"Jack", "style":{"hAlign" : 1} }, "1":{ "value":"South", "style":{"hAlign" : 1} }, "2":{ "value":324234, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "4":{ "0":{ "value":"John", "style":{"hAlign" : 1} }, "1":{ "value":"West", "style":{"hAlign" : 1} }, "2":{ "value":2342443, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "5":{ "0":{ "value":"Lily", "style":{"hAlign" : 1} }, "1":{ "value":"North", "style":{"hAlign" : 1} }, "2":{ "value":2342342, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "6":{ "0":{ "value":"Linda", "style":{"hAlign" : 1} }, "1":{ "value":"East", "style":{"hAlign" : 1} }, "2":{ "value":5857858, "style":{"hAlign" : 1, "formatter": "$#,##0"} } }, "7":{ "0":{ "value":"Will", "style":{"hAlign" : 1} }, "1":{ "value":"North", "style":{"hAlign" : 1} }, "2":{ "value":437587965, "style":{"hAlign" : 1, "formatter": "$#,##0"} } } } }, "defaults": {"colHeaderRowHeight": 20, "colWidth": 120, "rowHeaderColWidth": 40, "rowHeight": 26}, } } }];
.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; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }