forked from mleibman/SlickGrid
-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathexample-spreadsheet.html
176 lines (153 loc) · 5.17 KB
/
example-spreadsheet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!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"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.24.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>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/ddomingues/X-SlickGrid/blob/gh-pages/liveDemo/examples/example-spreadsheet.html"
target="_sourcewindow"> View the source for this example on Github</a></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.24.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.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 < 100; i++) {
columns.push({
id: i,
name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
String.fromCharCode("A".charCodeAt(0) + (i % 26)),
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>