Skip to content

Commit 457f7b9

Browse files
6pac6pac
committed
fix various minor bugs including #141, #142 
1 parent 7988ca2 commit 457f7b9

File tree

6 files changed

+262
-9
lines changed

6 files changed

+262
-9
lines changed

‎examples/example-excel-compatible-spreadsheet-dataview.html‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5+
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
6+
<title>SlickGrid example: Spreadsheet with Excel compatible cut and paste</title>
7+
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
8+
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
9+
<link rel="stylesheet" href="examples.css" type="text/css"/>
10+
<style>
11+
.slick-cell.copied {
12+
background: blue;
13+
background: rgba(0, 0, 255, 0.2);
14+
-webkit-transition: 0.5s background;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div style="position:relative">
20+
<div style="width:600px;">
21+
<div id="myGrid" style="width:100%;height:300px;"></div>
22+
</div>
23+
<br/>
24+
<div style="width:600px;">
25+
<div id="myGrid2" style="width:100%;height:300px;" class="example-grid"></div>
26+
</div>
27+
28+
<div class="options-panel">
29+
<h2>Excel compatible copy/paste manager using DataView</h2>
30+
<div>
31+
<strong>Thanks to <a href="https://github.com/Celebio/SlickGrid">Celebio</a>! <a href="http://labs.nereo.com/slick.html">(link to site)</a></strong><br /><br />
32+
This is basically the same example than <a href="example-spreadsheet.html">example-spreadsheet.html</a>,
33+
with the support of external excel-compatible software clipboard<br />
34+
</div>
35+
<h2>Paste from Excel-compatible:</h2>
36+
<ul>
37+
<li>Copy a range of cells to clipboard in Excel</li>
38+
<li>Select a cell on slickgrid</li>
39+
<li>Use Ctrl-V keyboard shortcut to paste from the clipboard</li>
40+
<li>Adds rows to bottom of grid if paste overflows</li>
41+
</ul>
42+
<h2>Copy for Excel-compatible:</h2>
43+
<ul>
44+
<li>Select a range of cells with a mouse</li>
45+
<li>Use Ctrl-C shortcut to copy cells</li>
46+
<li>You can paste the tabular data into Excel</li>
47+
</ul>
48+
49+
<h2>Undo/redo support :</h2>
50+
<ul>
51+
<li>Use buttons to undo/redo copy/paste</li>
52+
</ul>
53+
<button onclick="undoRedoBuffer.undo()"><img src="../images/arrow_undo.png" align="absmiddle"> Undo</button>
54+
<button onclick="undoRedoBuffer.redo()"><img src="../images/arrow_redo.png" align="absmiddle"> Redo</button>
55+
<h2>View Source:</h2>
56+
<ul>
57+
<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-excel-compatible-spreadsheet.html" target="_sourcewindow"> View the source for this example on Github</a></li>
58+
</ul>
59+
</div>
60+
</div>
61+
62+
<script src="../lib/firebugx.js"></script>
63+
64+
<script src="../lib/jquery-1.11.2.min.js"></script>
65+
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
66+
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
67+
68+
<script src="../slick.core.js"></script>
69+
<script src="../plugins/slick.autotooltips.js"></script>
70+
<script src="../plugins/slick.cellrangedecorator.js"></script>
71+
<script src="../plugins/slick.cellrangeselector.js"></script>
72+
<script src="../plugins/slick.cellexternalcopymanager.js"></script>
73+
<script src="../plugins/slick.cellselectionmodel.js"></script>
74+
<script src="../slick.editors.js"></script>
75+
<script src="../slick.formatters.js"></script>
76+
<script src="../slick.grid.js"></script>
77+
<script src="../slick.dataview.js"></script>
78+
79+
<script>
80+
var grid;
81+
var grid2;
82+
var data = [];
83+
var data2 = [];
84+
85+
function getVal(item, columnDef) {
86+
//return dataView.getItemById(item.id)[columnDef.field];
87+
return item[columnDef.field];
88+
}
89+
90+
function setVal(item, columnDef, value) {
91+
item[columnDef.field] = value;
92+
// dataView.updateItem(item.id, item);
93+
}
94+
95+
var options = {
96+
editable: true,
97+
enableAddRow: true,
98+
enableCellNavigation: true,
99+
asyncEditorLoading: false,
100+
autoEdit: false,
101+
dataItemColumnValueExtractor: getVal,
102+
dataItemColumnValueSetter: setVal
103+
};
104+
105+
var undoRedoBuffer = {
106+
commandQueue : [],
107+
commandCtr : 0,
108+
109+
queueAndExecuteCommand : function(editCommand) {
110+
this.commandQueue[this.commandCtr] = editCommand;
111+
this.commandCtr++;
112+
editCommand.execute();
113+
},
114+
115+
undo : function() {
116+
if (this.commandCtr == 0) { return; }
117+
118+
this.commandCtr--;
119+
var command = this.commandQueue[this.commandCtr];
120+
121+
if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
122+
command.undo();
123+
}
124+
},
125+
redo : function() {
126+
if (this.commandCtr >= this.commandQueue.length) { return; }
127+
var command = this.commandQueue[this.commandCtr];
128+
this.commandCtr++;
129+
if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
130+
command.execute();
131+
}
132+
}
133+
}
134+
135+
// undo shortcut
136+
$(document).keydown(function(e)
137+
{
138+
if (e.which == 90 && (e.ctrlKey || e.metaKey)) { // CTRL + (shift) + Z
139+
if (e.shiftKey){
140+
undoRedoBuffer.redo();
141+
} else {
142+
undoRedoBuffer.undo();
143+
}
144+
}
145+
});
146+
147+
var newRowIds = 0;
148+
149+
var pluginOptions = {
150+
clipboardCommandHandler: function(editCommand){ undoRedoBuffer.queueAndExecuteCommand.call(undoRedoBuffer,editCommand); },
151+
readOnlyMode : false,
152+
includeHeaderWhenCopying : false,
153+
newRowCreator: function(count) {
154+
for (var i = 0; i < count; i++) {
155+
var item = {
156+
id: "newRow_" + newRowIds++
157+
}
158+
grid.getData().addItem(item);
159+
}
160+
}
161+
};
162+
163+
var columns = [
164+
{
165+
id: "selector",
166+
name: "",
167+
field: "num",
168+
width: 30
169+
}
170+
];
171+
172+
for (var i = 0; i < 26; i++) {
173+
columns.push({
174+
id: i,
175+
name: String.fromCharCode("A".charCodeAt(0) + i),
176+
field: i,
177+
width: 60//,
178+
//editor: Slick.Editors.Text
179+
});
180+
}
181+
182+
columns[4] = {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete};
183+
columns[5] = {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date};
184+
185+
186+
$(function () {
187+
for (var i = 0; i < 100; i++) {
188+
var d = (data[i] = {});
189+
d["id"] = i;
190+
d["num"] = i;
191+
for (var j = 0; j < 26; j++) {
192+
d[j] = j+i;
193+
}
194+
d["percentComplete"] = Math.round(Math.random() * 100);
195+
d["start"] = new Date(Math.round(Math.random() * 1000000000));
196+
d["weekCalendar"] = [true, true, true, true, true, true, true, true, true, true, false, false, false, false];
197+
}
198+
199+
dataView = new Slick.Data.DataView();
200+
dataView.setItems(data);
201+
grid = new Slick.Grid("#myGrid", dataView, columns, options);
202+
grid.setSelectionModel(new Slick.CellSelectionModel());
203+
grid.registerPlugin(new Slick.AutoTooltips());
204+
205+
// set keyboard focus on the grid
206+
grid.getCanvasNode().focus();
207+
208+
grid.registerPlugin(new Slick.CellExternalCopyManager(pluginOptions));
209+
210+
grid.onCellChange.subscribe(function (e, args) {
211+
dataView.updateItem(args.item.id, args.item);
212+
});
213+
214+
grid.onAddNewRow.subscribe(function (e, args) {
215+
var item = args.item;
216+
var column = args.column;
217+
grid.invalidateRow(data.length);
218+
data.push(item);
219+
grid.updateRowCount();
220+
grid.render();
221+
});
222+
223+
grid2 = new Slick.Grid("#myGrid2", data, columns, options);
224+
grid2.setSelectionModel(new Slick.CellSelectionModel());
225+
226+
grid2.registerPlugin(new Slick.CellExternalCopyManager(pluginOptions));
227+
228+
})
229+
</script>
230+
</body>
231+
</html>

‎examples/example-excel-compatible-spreadsheet.html‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
55
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
6-
<title>SlickGrid example 3: Editing</title>
6+
<title>SlickGrid example: Spreadsheet with Excel compatible cut and paste</title>
77
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
88
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
99
<link rel="stylesheet" href="examples.css" type="text/css"/>
@@ -20,8 +20,9 @@
2020
<div style="width:600px;">
2121
<div id="myGrid" style="width:100%;height:300px;"></div>
2222
</div>
23+
<br/>
2324
<div style="width:600px;">
24-
<div id="myGrid2" style="width:100%;height:300px;"></div>
25+
<div id="myGrid2" style="width:100%;height:300px;" class="example-grid"></div>
2526
</div>
2627

2728
<div class="options-panel">
@@ -80,6 +81,24 @@ <h2>View Source:</h2>
8081
var data = [];
8182
var data2 = [];
8283

84+
// sample of use of optional get and set functions
85+
// (otherwise the editor is used to serialise the data to a string,
86+
// then as a fallback the data value is used as-is)
87+
88+
// function getVal(item, columnDef) {
89+
// return item[columnDef.field];
90+
// }
91+
//
92+
// function setVal(item, columnDef, value) {
93+
// item[columnDef.field] = value;
94+
// }
95+
//
96+
// var options = {
97+
// ... ,
98+
// dataItemColumnValueExtractor: getVal,
99+
// dataItemColumnValueSetter: setVal
100+
// };
101+
83102
var options = {
84103
editable: true,
85104
enableAddRow: true,

‎examples/example5-collapsing.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ <h2>View Source:</h2>
8787

8888

8989
var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
90+
if (value == null || value == undefined || dataContext === undefined) { return ""; }
91+
9092
value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
9193
var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
9294
var idx = dataView.getIdxById(dataContext.id);

‎examples/examples.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ ul {
3030
margin: 0;
3131
}
3232

33-
#myGrid {
33+
#myGrid, .example-grid {
3434
background: white;
3535
outline: 0;
3636
border: 1px solid gray;

‎plugins/slick.cellexternalcopymanager.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,7 @@
8989
editor.loadValue(item);
9090
retVal = editor.serializeValue();
9191
editor.destroy();
92-
}
93-
else {
92+
} else {
9493
retVal = item[columnDef.field];
9594
}
9695

@@ -114,6 +113,8 @@
114113
editor.loadValue(item);
115114
editor.applyValue(item, value);
116115
editor.destroy();
116+
} else {
117+
item[columnDef.field] = value;
117118
}
118119
}
119120

‎slick.grid.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3607,8 +3607,8 @@ if (typeof Slick === "undefined") {
36073607
this.editor.applyValue(item, this.serializedValue);
36083608
updateRow(this.row);
36093609
trigger(self.onCellChange, {
3610-
row: activeRow,
3611-
cell: activeCell,
3610+
row: this.row,
3611+
cell: this.cell,
36123612
item: item,
36133613
grid: self
36143614
});
@@ -3617,8 +3617,8 @@ if (typeof Slick === "undefined") {
36173617
this.editor.applyValue(item, this.prevSerializedValue);
36183618
updateRow(this.row);
36193619
trigger(self.onCellChange, {
3620-
row: activeRow,
3621-
cell: activeCell,
3620+
row: this.row,
3621+
cell: this.cell,
36223622
item: item,
36233623
grid: self
36243624
});

0 commit comments

Comments
 (0)