-
Notifications
You must be signed in to change notification settings - Fork 424
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #311 from 6pac/feature/frozen-grid
Feature/frozen grid closes request #26
- Loading branch information
Showing
21 changed files
with
4,373 additions
and
294 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 174 additions & 0 deletions
174
examples/example-frozen-columns-and-rows-spreadsheet.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | ||
| <link rel="shortcut icon" type="image/ico" href="favicon.ico" /> | ||
| <title>SlickGrid Example: Spreadsheet with Frozen Rows and Columns</title> | ||
| <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> | ||
| <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.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>Virtual scrolling on both rows and columns.</li> | ||
| <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.11.2.min.js"></script> | ||
| <script src="../lib/jquery-ui-1.11.3.min.js"></script> | ||
| <script src="../lib/jquery.event.drag-2.3.0.js"></script> | ||
| <script src="../lib/jquery.mousewheel.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, frozenColumn: 3, frozenRow: 7 | ||
| }; | ||
|
|
||
| var columns = [ | ||
| { | ||
| id: "selector", | ||
| name: "", | ||
| field: "num", | ||
| width: 30 | ||
| } | ||
| ]; | ||
|
|
||
| for (var i = 0; i < 100; i++) { | ||
| columns.push({ | ||
| id: i, | ||
| //name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) + | ||
| // String.fromCharCode("A".charCodeAt(0) + (i % 26)), | ||
| name: 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 Slick.Editors.Text(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> | ||
| </html> |
Oops, something went wrong.