diff options
Diffstat (limited to 'examples/example-spreadsheet.html')
| -rw-r--r-- | examples/example-spreadsheet.html | 330 |
1 files changed, 165 insertions, 165 deletions
diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html index 01f51a0..d1054b2 100644 --- a/examples/example-spreadsheet.html +++ b/examples/example-spreadsheet.html @@ -1,169 +1,169 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 3: Editing</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - .slick-cell.copied { - background: blue; - background: rgba(0,0,255,0.2); - -webkit-transition: 0.5s background; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:600px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>Demonstrates:</h2> - <ul> - <li>Select a range of cells with a mouse</li> - <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li> - <li>Use Esc to cancel a copy and paste operation</li> - <li>Edit the cell and select a cell range to paste the range</li> - </ul> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../plugins/slick.autotooltips.js"></script> - <script src="../plugins/slick.cellrangedecorator.js"></script> - <script src="../plugins/slick.cellrangeselector.js"></script> - <script src="../plugins/slick.cellcopymanager.js"></script> - <script src="../plugins/slick.cellselectionmodel.js"></script> - <script src="../slick.editors.js"></script> - <script src="../slick.grid.js"></script> - - <script> - var grid; - var data = []; - var options = { - editable: true, - enableAddRow: true, - enableCellNavigation: true, - asyncEditorLoading: false, - autoEdit: false - }; - - var columns = [{ - id: "selector", - name: "", - field: "num", - width: 30 - }]; - - for (var i = 0; i < 26; i++) { - columns.push({ - id: i, - name: String.fromCharCode("A".charCodeAt(0) + i), - field: i, - width: 60, - editor: FormulaEditor - }); +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 3: Editing</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .slick-cell.copied { + background: blue; + background: rgba(0, 0, 255, 0.2); + -webkit-transition: 0.5s background; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:600px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>Demonstrates:</h2> + <ul> + <li>Select a range of cells with a mouse</li> + <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li> + <li>Use Esc to cancel a copy and paste operation</li> + <li>Edit the cell and select a cell range to paste the range</li> + </ul> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../plugins/slick.autotooltips.js"></script> +<script src="../plugins/slick.cellrangedecorator.js"></script> +<script src="../plugins/slick.cellrangeselector.js"></script> +<script src="../plugins/slick.cellcopymanager.js"></script> +<script src="../plugins/slick.cellselectionmodel.js"></script> +<script src="../slick.editors.js"></script> +<script src="../slick.grid.js"></script> + +<script> + var grid; + var data = []; + var options = { + editable:true, + enableAddRow:true, + enableCellNavigation:true, + asyncEditorLoading:false, + autoEdit:false + }; + + var columns = [ + { + id:"selector", + name:"", + field:"num", + width:30 + } + ]; + + for (var i = 0; i < 26; i++) { + columns.push({ + id:i, + name:String.fromCharCode("A".charCodeAt(0) + i), + field:i, + width:60, + editor:FormulaEditor + }); + } + + /*** + * A proof-of-concept cell editor with Excel-like range selection and insertion. + */ + function FormulaEditor(args) { + var _self = this; + var _editor = new TextCellEditor(args); + var _selector; + + $.extend(this, _editor); + + function init() { + // register a plugin to select a range and append it to the textbox + // since events are fired in reverse order (most recently added are executed first), + // this will override other plugins like moverows or selection model and will + // not require the grid to not be in the edit mode + _selector = new Slick.CellRangeSelector(); + _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected); + args.grid.registerPlugin(_selector); + } + + this.destroy = function () { + _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected); + grid.unregisterPlugin(_selector); + _editor.destroy(); + }; + + this.handleCellRangeSelected = function (e, args) { + _editor.setValue( + _editor.getValue() + + grid.getColumns()[args.range.fromCell].name + + args.range.fromRow + + ":" + + grid.getColumns()[args.range.toCell].name + + args.range.toRow + ); + }; + + + init(); + } + + + $(function () { + for (var i = 0; i < 100; i++) { + var d = (data[i] = {}); + d["num"] = i; + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + + grid.setSelectionModel(new Slick.CellSelectionModel()); + grid.registerPlugin(new Slick.AutoTooltips()); + + // set keyboard focus on the grid + grid.getCanvasNode().focus(); + + var copyManager = new Slick.CellCopyManager(); + grid.registerPlugin(copyManager); + + copyManager.onPasteCells.subscribe(function (e, args) { + if (args.from.length !== 1 || args.to.length !== 1) { + throw "This implementation only supports single range copy and paste operations"; + } + + var from = args.from[0]; + var to = args.to[0]; + var val; + for (var i = 0; i <= from.toRow - from.fromRow; i++) { + for (var j = 0; j <= from.toCell - from.fromCell; j++) { + if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { + val = data[from.fromRow + i][columns[from.fromCell + j].field]; + data[to.fromRow + i][columns[to.fromCell + j].field] = val; + grid.invalidateRow(to.fromRow + i); + } } - - /*** - * A proof-of-concept cell editor with Excel-like range selection and insertion. - */ - function FormulaEditor(args) { - var _self = this; - var _editor = new TextCellEditor(args); - var _selector; - - $.extend(this, _editor); - - function init() { - // register a plugin to select a range and append it to the textbox - // since events are fired in reverse order (most recently added are executed first), - // this will override other plugins like moverows or selection model and will - // not require the grid to not be in the edit mode - _selector = new Slick.CellRangeSelector(); - _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected); - args.grid.registerPlugin(_selector); - } - - this.destroy = function() { - _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected); - grid.unregisterPlugin(_selector); - _editor.destroy(); - }; - - this.handleCellRangeSelected = function(e, args) { - _editor.setValue( - _editor.getValue() + - grid.getColumns()[args.range.fromCell].name + - args.range.fromRow + - ":" + - grid.getColumns()[args.range.toCell].name + - args.range.toRow - ); - }; - - - init(); - } - - - - $(function() - { - for (var i=0; i<100; i++) { - var d = (data[i] = {}); - d["num"] = i; - } - - grid = new Slick.Grid("#myGrid", data, columns, options); - - grid.setSelectionModel(new Slick.CellSelectionModel()); - grid.registerPlugin(new Slick.AutoTooltips()); - - // set keyboard focus on the grid - grid.getCanvasNode().focus(); - - var copyManager = new Slick.CellCopyManager(); - grid.registerPlugin(copyManager); - - copyManager.onPasteCells.subscribe(function(e,args) { - if (args.from.length !== 1 || args.to.length !== 1) { - throw "This implementation only supports single range copy and paste operations"; - } - - var from = args.from[0]; - var to = args.to[0]; - var val; - for (var i = 0; i <= from.toRow - from.fromRow; i++) { - for (var j = 0; j <= from.toCell - from.fromCell; j++) { - if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { - val = data[from.fromRow + i][columns[from.fromCell + j].field]; - data[to.fromRow + i][columns[to.fromCell + j].field] = val; - grid.invalidateRow(to.fromRow + i); - } - } - } - grid.render(); - }); - - grid.onAddNewRow.subscribe(function(e, args) { - var item = args.item; - var column = args.column; - grid.invalidateRow(data.length); - data.push(item); - grid.updateRowCount(); - grid.render(); - }); - }) - </script> - </body> + } + grid.render(); + }); + + grid.onAddNewRow.subscribe(function (e, args) { + var item = args.item; + var column = args.column; + grid.invalidateRow(data.length); + data.push(item); + grid.updateRowCount(); + grid.render(); + }); + }) +</script> +</body> </html> |