Skip to content

Commit 1263660

Browse files
6pac6pac
authored
Merge pull request #311 from 6pac/feature/frozen-grid
Feature/frozen grid closes request #26
2 parents 7b03a06 + f723e15 commit 1263660

21 files changed

+4373
-294
lines changed

‎controls/slick.columnpicker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
$list.empty();
9494
updateColumnOrder();
9595
columnCheckboxes = [];
96-
96+
9797
var $li, $input;
9898
var columnLabel;
9999
for (var i = 0; i < columns.length; i++) {

‎controls/slick.gridmenu.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494

9595
function SlickGridMenu(columns, grid, options) {
9696
var _grid = grid;
97+
var _gridOptions;
9798
var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
9899
var _isMenuOpen = false;
99100
var _options = options;
@@ -113,8 +114,14 @@
113114
};
114115

115116
function init(grid) {
117+
_gridOptions = grid.getOptions();
116118
var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
117-
var $header = $('.' + _gridUid + ' .slick-header');
119+
var $header;
120+
if (_gridOptions && _gridOptions.frozenColumn && _gridOptions.frozenColumn > 0 ) {
121+
$header = $('.' + _gridUid + ' .slick-header-right');
122+
} else {
123+
$header = $('.' + _gridUid + ' .slick-header-left');
124+
}
118125
$header.attr('style', 'width: calc(100% - ' + gridMenuWidth +'px)');
119126

120127
// subscribe to the grid, when it's destroyed, we should also destroy the Grid Menu

‎examples/example-draggable-grouping.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -247,10 +247,10 @@ <h2>View Source:</h2>
247247
function toggleDraggableGrouping() {
248248
clearGroupings();
249249
if ( draggableEnabled == true ) {
250-
$(".slick-preheader-panel").hide();
251-
draggableEnabled = false;
250+
grid.setPreHeaderPanelVisibility(false);
251+
draggableEnabled = false;
252252
} else {
253-
$(".slick-preheader-panel").show();
253+
grid.setPreHeaderPanelVisibility(true);
254254
draggableEnabled = true;
255255
}
256256
}

‎examples/example-explicit-initialization.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ <h2>View Source:</h2>
7171
}
7272

7373
// create a detached container element
74-
var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
74+
var myGrid = $("<div id='myGrid' style='width:600px;height:500px;position:relative;'></div>");
7575
grid = new Slick.Grid(myGrid, data, columns, options);
7676

7777

‎examples/example-frozen-columns-and-rows-spreadsheet.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
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 Frozen Rows and Columns</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:500px;"></div>
22+
</div>
23+
24+
<div class="options-panel">
25+
<h2>Demonstrates:</h2>
26+
<ul>
27+
<li>Virtual scrolling on both rows and columns.</li>
28+
<li>Select a range of cells with a mouse</li>
29+
<li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li>
30+
<li>Use Esc to cancel a copy and paste operation</li>
31+
<li>Edit the cell and select a cell range to paste the range</li>
32+
</ul>
33+
</div>
34+
</div>
35+
36+
<script src="../lib/firebugx.js"></script>
37+
38+
<script src="../lib/jquery-1.11.2.min.js"></script>
39+
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
40+
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
41+
<script src="../lib/jquery.mousewheel.js"></script>
42+
43+
<script src="../slick.core.js"></script>
44+
<script src="../plugins/slick.autotooltips.js"></script>
45+
<script src="../plugins/slick.cellrangedecorator.js"></script>
46+
<script src="../plugins/slick.cellrangeselector.js"></script>
47+
<script src="../plugins/slick.cellcopymanager.js"></script>
48+
<script src="../plugins/slick.cellselectionmodel.js"></script>
49+
<script src="../slick.editors.js"></script>
50+
<script src="../slick.grid.js"></script>
51+
52+
<script>
53+
var grid;
54+
var data = [];
55+
var options = {
56+
editable: true,
57+
enableAddRow: true,
58+
enableCellNavigation: true,
59+
asyncEditorLoading: false,
60+
autoEdit: false, frozenColumn: 3, frozenRow: 7
61+
};
62+
63+
var columns = [
64+
{
65+
id: "selector",
66+
name: "",
67+
field: "num",
68+
width: 30
69+
}
70+
];
71+
72+
for (var i = 0; i < 100; i++) {
73+
columns.push({
74+
id: i,
75+
//name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
76+
// String.fromCharCode("A".charCodeAt(0) + (i % 26)),
77+
name: i,
78+
field: i,
79+
width: 60,
80+
editor: FormulaEditor
81+
});
82+
}
83+
84+
/***
85+
* A proof-of-concept cell editor with Excel-like range selection and insertion.
86+
*/
87+
function FormulaEditor(args) {
88+
var _self = this;
89+
var _editor = new Slick.Editors.Text(args);
90+
var _selector;
91+
92+
$.extend(this, _editor);
93+
94+
function init() {
95+
// register a plugin to select a range and append it to the textbox
96+
// since events are fired in reverse order (most recently added are executed first),
97+
// this will override other plugins like moverows or selection model and will
98+
// not require the grid to not be in the edit mode
99+
_selector = new Slick.CellRangeSelector();
100+
_selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
101+
args.grid.registerPlugin(_selector);
102+
}
103+
104+
this.destroy = function () {
105+
_selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected);
106+
grid.unregisterPlugin(_selector);
107+
_editor.destroy();
108+
};
109+
110+
this.handleCellRangeSelected = function (e, args) {
111+
_editor.setValue(
112+
_editor.getValue() +
113+
grid.getColumns()[args.range.fromCell].name +
114+
args.range.fromRow +
115+
":" +
116+
grid.getColumns()[args.range.toCell].name +
117+
args.range.toRow
118+
);
119+
};
120+
121+
122+
init();
123+
}
124+
125+
126+
$(function () {
127+
for (var i = 0; i < 100; i++) {
128+
var d = (data[i] = {});
129+
d["num"] = i;
130+
}
131+
132+
grid = new Slick.Grid("#myGrid", data, columns, options);
133+
134+
grid.setSelectionModel(new Slick.CellSelectionModel());
135+
grid.registerPlugin(new Slick.AutoTooltips());
136+
137+
// set keyboard focus on the grid
138+
grid.getCanvasNode().focus();
139+
140+
var copyManager = new Slick.CellCopyManager();
141+
grid.registerPlugin(copyManager);
142+
143+
copyManager.onPasteCells.subscribe(function (e, args) {
144+
if (args.from.length !== 1 || args.to.length !== 1) {
145+
throw "This implementation only supports single range copy and paste operations";
146+
}
147+
148+
var from = args.from[0];
149+
var to = args.to[0];
150+
var val;
151+
for (var i = 0; i <= from.toRow - from.fromRow; i++) {
152+
for (var j = 0; j <= from.toCell - from.fromCell; j++) {
153+
if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
154+
val = data[from.fromRow + i][columns[from.fromCell + j].field];
155+
data[to.fromRow + i][columns[to.fromCell + j].field] = val;
156+
grid.invalidateRow(to.fromRow + i);
157+
}
158+
}
159+
}
160+
grid.render();
161+
});
162+
163+
grid.onAddNewRow.subscribe(function (e, args) {
164+
var item = args.item;
165+
var column = args.column;
166+
grid.invalidateRow(data.length);
167+
data.push(item);
168+
grid.updateRowCount();
169+
grid.render();
170+
});
171+
})
172+
</script>
173+
</body>
174+
</html>

0 commit comments

Comments
 (0)