slickgrid-rails 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.rvmrc +1 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +75 -0
- data/LICENSE +22 -0
- data/README.md +29 -0
- data/Rakefile +2 -0
- data/fetch.sh +8 -0
- data/lib/slickgrid-rails.rb +1 -0
- data/lib/slickgrid/rails.rb +5 -0
- data/lib/slickgrid/rails/engine.rb +7 -0
- data/lib/slickgrid/rails/version.rb +6 -0
- data/lib/slickgrid/table.rb +72 -0
- data/slickgrid-rails.gemspec +22 -0
- data/vendor/assets/images/slick/actions.gif +0 -0
- data/vendor/assets/images/slick/ajax-loader-small.gif +0 -0
- data/vendor/assets/images/slick/arrow_redo.png +0 -0
- data/vendor/assets/images/slick/arrow_right_peppermint.png +0 -0
- data/vendor/assets/images/slick/arrow_right_spearmint.png +0 -0
- data/vendor/assets/images/slick/arrow_undo.png +0 -0
- data/vendor/assets/images/slick/bullet_blue.png +0 -0
- data/vendor/assets/images/slick/bullet_star.png +0 -0
- data/vendor/assets/images/slick/bullet_toggle_minus.png +0 -0
- data/vendor/assets/images/slick/bullet_toggle_plus.png +0 -0
- data/vendor/assets/images/slick/calendar.gif +0 -0
- data/vendor/assets/images/slick/collapse.gif +0 -0
- data/vendor/assets/images/slick/comment_yellow.gif +0 -0
- data/vendor/assets/images/slick/down.gif +0 -0
- data/vendor/assets/images/slick/drag-handle.png +0 -0
- data/vendor/assets/images/slick/editor-helper-bg.gif +0 -0
- data/vendor/assets/images/slick/expand.gif +0 -0
- data/vendor/assets/images/slick/header-bg.gif +0 -0
- data/vendor/assets/images/slick/header-columns-bg.gif +0 -0
- data/vendor/assets/images/slick/header-columns-over-bg.gif +0 -0
- data/vendor/assets/images/slick/help.png +0 -0
- data/vendor/assets/images/slick/info.gif +0 -0
- data/vendor/assets/images/slick/listview.gif +0 -0
- data/vendor/assets/images/slick/pencil.gif +0 -0
- data/vendor/assets/images/slick/row-over-bg.gif +0 -0
- data/vendor/assets/images/slick/sort-asc.gif +0 -0
- data/vendor/assets/images/slick/sort-asc.png +0 -0
- data/vendor/assets/images/slick/sort-desc.gif +0 -0
- data/vendor/assets/images/slick/sort-desc.png +0 -0
- data/vendor/assets/images/slick/stripes.png +0 -0
- data/vendor/assets/images/slick/tag_red.png +0 -0
- data/vendor/assets/images/slick/tick.png +0 -0
- data/vendor/assets/images/slick/user_identity.gif +0 -0
- data/vendor/assets/images/slick/user_identity_plus.gif +0 -0
- data/vendor/assets/javascripts/slick.js +4 -0
- data/vendor/assets/javascripts/slick/controls/columnpicker.js +106 -0
- data/vendor/assets/javascripts/slick/controls/pager.js +151 -0
- data/vendor/assets/javascripts/slick/core.js +424 -0
- data/vendor/assets/javascripts/slick/dataview.js +908 -0
- data/vendor/assets/javascripts/slick/editors.js +512 -0
- data/vendor/assets/javascripts/slick/formatters.js +55 -0
- data/vendor/assets/javascripts/slick/grid.js +2783 -0
- data/vendor/assets/javascripts/slick/groupitemmetadataprovider.js +139 -0
- data/vendor/assets/javascripts/slick/plugins/autotooltips.js +48 -0
- data/vendor/assets/javascripts/slick/plugins/cellcopymanager.js +86 -0
- data/vendor/assets/javascripts/slick/plugins/cellrangedecorator.js +64 -0
- data/vendor/assets/javascripts/slick/plugins/cellrangeselector.js +112 -0
- data/vendor/assets/javascripts/slick/plugins/cellselectionmodel.js +92 -0
- data/vendor/assets/javascripts/slick/plugins/checkboxselectcolumn.js +154 -0
- data/vendor/assets/javascripts/slick/plugins/rowmovemanager.js +132 -0
- data/vendor/assets/javascripts/slick/plugins/rowselectionmodel.js +187 -0
- data/vendor/assets/javascripts/slick/remotemodel.js +164 -0
- data/vendor/assets/stylesheets/slick/controls/columnpicker.css +30 -0
- data/vendor/assets/stylesheets/slick/controls/pager.css.scss +41 -0
- data/vendor/assets/stylesheets/slick/default-theme.css.scss +104 -0
- data/vendor/assets/stylesheets/slick/grid.css.scss +158 -0
- metadata +158 -0
@@ -0,0 +1,55 @@
|
|
1
|
+
/***
|
2
|
+
* Contains basic SlickGrid formatters.
|
3
|
+
* @module Formatters
|
4
|
+
* @namespace Slick
|
5
|
+
*/
|
6
|
+
|
7
|
+
(function ($) {
|
8
|
+
// register namespace
|
9
|
+
$.extend(true, window, {
|
10
|
+
"Slick": {
|
11
|
+
"Formatters": {
|
12
|
+
"PercentComplete": PercentCompleteFormatter,
|
13
|
+
"PercentCompleteBar": PercentCompleteBarFormatter,
|
14
|
+
"YesNo": YesNoFormatter,
|
15
|
+
"Checkmark": CheckmarkFormatter
|
16
|
+
}
|
17
|
+
}
|
18
|
+
});
|
19
|
+
|
20
|
+
function PercentCompleteFormatter(row, cell, value, columnDef, dataContext) {
|
21
|
+
if (value == null || value === "") {
|
22
|
+
return "-";
|
23
|
+
} else if (value < 50) {
|
24
|
+
return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
|
25
|
+
} else {
|
26
|
+
return "<span style='color:green'>" + value + "%</span>";
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
function PercentCompleteBarFormatter(row, cell, value, columnDef, dataContext) {
|
31
|
+
if (value == null || value === "") {
|
32
|
+
return "";
|
33
|
+
}
|
34
|
+
|
35
|
+
var color;
|
36
|
+
|
37
|
+
if (value < 30) {
|
38
|
+
color = "red";
|
39
|
+
} else if (value < 70) {
|
40
|
+
color = "silver";
|
41
|
+
} else {
|
42
|
+
color = "green";
|
43
|
+
}
|
44
|
+
|
45
|
+
return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
|
46
|
+
}
|
47
|
+
|
48
|
+
function YesNoFormatter(row, cell, value, columnDef, dataContext) {
|
49
|
+
return value ? "Yes" : "No";
|
50
|
+
}
|
51
|
+
|
52
|
+
function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
|
53
|
+
return value ? "<img src='../images/tick.png'>" : "";
|
54
|
+
}
|
55
|
+
})(jQuery);
|
@@ -0,0 +1,2783 @@
|
|
1
|
+
/**
|
2
|
+
* @license
|
3
|
+
* (c) 2009-2012 Michael Leibman
|
4
|
+
* michael{dot}leibman{at}gmail{dot}com
|
5
|
+
* http://github.com/mleibman/slickgrid
|
6
|
+
*
|
7
|
+
* Distributed under MIT license.
|
8
|
+
* All rights reserved.
|
9
|
+
*
|
10
|
+
* SlickGrid v2.0
|
11
|
+
*
|
12
|
+
* NOTES:
|
13
|
+
* Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.
|
14
|
+
* This increases the speed dramatically, but can only be done safely because there are no event handlers
|
15
|
+
* or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy()
|
16
|
+
* and do proper cleanup.
|
17
|
+
*/
|
18
|
+
|
19
|
+
// make sure required JavaScript modules are loaded
|
20
|
+
if (typeof jQuery === "undefined") {
|
21
|
+
throw "SlickGrid requires jquery module to be loaded";
|
22
|
+
}
|
23
|
+
if (!jQuery.fn.drag) {
|
24
|
+
throw "SlickGrid requires jquery.event.drag module to be loaded";
|
25
|
+
}
|
26
|
+
if (typeof Slick === "undefined") {
|
27
|
+
throw "slick.core.js not loaded";
|
28
|
+
}
|
29
|
+
|
30
|
+
|
31
|
+
(function ($) {
|
32
|
+
// Slick.Grid
|
33
|
+
$.extend(true, window, {
|
34
|
+
Slick: {
|
35
|
+
Grid: SlickGrid
|
36
|
+
}
|
37
|
+
});
|
38
|
+
|
39
|
+
// shared across all grids on the page
|
40
|
+
var scrollbarDimensions;
|
41
|
+
var maxSupportedCssHeight; // browser's breaking point
|
42
|
+
|
43
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
44
|
+
// SlickGrid class implementation (available as Slick.Grid)
|
45
|
+
|
46
|
+
/**
|
47
|
+
* Creates a new instance of the grid.
|
48
|
+
* @class SlickGrid
|
49
|
+
* @constructor
|
50
|
+
* @param {Node} container Container node to create the grid in.
|
51
|
+
* @param {Array,Object} data An array of objects for databinding.
|
52
|
+
* @param {Array} columns An array of column definitions.
|
53
|
+
* @param {Object} options Grid options.
|
54
|
+
**/
|
55
|
+
function SlickGrid(container, data, columns, options) {
|
56
|
+
// settings
|
57
|
+
var defaults = {
|
58
|
+
explicitInitialization: false,
|
59
|
+
rowHeight: 25,
|
60
|
+
defaultColumnWidth: 80,
|
61
|
+
enableAddRow: false,
|
62
|
+
leaveSpaceForNewRows: false,
|
63
|
+
editable: false,
|
64
|
+
autoEdit: true,
|
65
|
+
enableCellNavigation: true,
|
66
|
+
enableColumnReorder: true,
|
67
|
+
asyncEditorLoading: false,
|
68
|
+
asyncEditorLoadDelay: 100,
|
69
|
+
forceFitColumns: false,
|
70
|
+
enableAsyncPostRender: false,
|
71
|
+
asyncPostRenderDelay: 60,
|
72
|
+
autoHeight: false,
|
73
|
+
editorLock: Slick.GlobalEditorLock,
|
74
|
+
showHeaderRow: false,
|
75
|
+
headerRowHeight: 25,
|
76
|
+
showTopPanel: false,
|
77
|
+
topPanelHeight: 25,
|
78
|
+
formatterFactory: null,
|
79
|
+
editorFactory: null,
|
80
|
+
cellFlashingCssClass: "flashing",
|
81
|
+
selectedCellCssClass: "selected",
|
82
|
+
multiSelect: true,
|
83
|
+
enableTextSelectionOnCells: false,
|
84
|
+
dataItemColumnValueExtractor: null,
|
85
|
+
fullWidthRows: false,
|
86
|
+
multiColumnSort: false,
|
87
|
+
defaultFormatter: defaultFormatter
|
88
|
+
};
|
89
|
+
|
90
|
+
var columnDefaults = {
|
91
|
+
name: "",
|
92
|
+
resizable: true,
|
93
|
+
sortable: false,
|
94
|
+
minWidth: 30,
|
95
|
+
rerenderOnResize: false,
|
96
|
+
headerCssClass: null
|
97
|
+
};
|
98
|
+
|
99
|
+
// scroller
|
100
|
+
var th; // virtual height
|
101
|
+
var h; // real scrollable height
|
102
|
+
var ph; // page height
|
103
|
+
var n; // number of pages
|
104
|
+
var cj; // "jumpiness" coefficient
|
105
|
+
|
106
|
+
var page = 0; // current page
|
107
|
+
var offset = 0; // current page offset
|
108
|
+
var scrollDir = 1;
|
109
|
+
|
110
|
+
// private
|
111
|
+
var initialized = false;
|
112
|
+
var $container;
|
113
|
+
var uid = "slickgrid_" + Math.round(1000000 * Math.random());
|
114
|
+
var self = this;
|
115
|
+
var $headerScroller;
|
116
|
+
var $headers;
|
117
|
+
var $headerRow, $headerRowScroller;
|
118
|
+
var $topPanelScroller;
|
119
|
+
var $topPanel;
|
120
|
+
var $viewport;
|
121
|
+
var $canvas;
|
122
|
+
var $style;
|
123
|
+
var stylesheet, columnCssRulesL = [], columnCssRulesR = [];
|
124
|
+
var viewportH, viewportW;
|
125
|
+
var canvasWidth;
|
126
|
+
var viewportHasHScroll, viewportHasVScroll;
|
127
|
+
var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding
|
128
|
+
cellWidthDiff = 0, cellHeightDiff = 0;
|
129
|
+
var absoluteColumnMinWidth;
|
130
|
+
var numberOfRows = 0;
|
131
|
+
|
132
|
+
var activePosX;
|
133
|
+
var activeRow, activeCell;
|
134
|
+
var activeCellNode = null;
|
135
|
+
var currentEditor = null;
|
136
|
+
var serializedEditorValue;
|
137
|
+
var editController;
|
138
|
+
|
139
|
+
var rowsCache = {};
|
140
|
+
var renderedRows = 0;
|
141
|
+
var numVisibleRows;
|
142
|
+
var prevScrollTop = 0;
|
143
|
+
var scrollTop = 0;
|
144
|
+
var lastRenderedScrollTop = 0;
|
145
|
+
var prevScrollLeft = 0;
|
146
|
+
var avgRowRenderTime = 10;
|
147
|
+
|
148
|
+
var selectionModel;
|
149
|
+
var selectedRows = [];
|
150
|
+
|
151
|
+
var plugins = [];
|
152
|
+
var cellCssClasses = {};
|
153
|
+
|
154
|
+
var columnsById = {};
|
155
|
+
var sortColumns = [];
|
156
|
+
|
157
|
+
|
158
|
+
// async call handles
|
159
|
+
var h_editorLoader = null;
|
160
|
+
var h_render = null;
|
161
|
+
var h_postrender = null;
|
162
|
+
var postProcessedRows = {};
|
163
|
+
var postProcessToRow = null;
|
164
|
+
var postProcessFromRow = null;
|
165
|
+
|
166
|
+
// perf counters
|
167
|
+
var counter_rows_rendered = 0;
|
168
|
+
var counter_rows_removed = 0;
|
169
|
+
|
170
|
+
|
171
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
172
|
+
// Initialization
|
173
|
+
|
174
|
+
function init() {
|
175
|
+
$container = $(container);
|
176
|
+
if ($container.length < 1) {
|
177
|
+
throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");
|
178
|
+
}
|
179
|
+
|
180
|
+
// calculate these only once and share between grid instances
|
181
|
+
maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();
|
182
|
+
scrollbarDimensions = scrollbarDimensions || measureScrollbar();
|
183
|
+
|
184
|
+
options = $.extend({}, defaults, options);
|
185
|
+
columnDefaults.width = options.defaultColumnWidth;
|
186
|
+
|
187
|
+
// validate loaded JavaScript modules against requested options
|
188
|
+
if (options.enableColumnReorder && !$.fn.sortable) {
|
189
|
+
throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded");
|
190
|
+
}
|
191
|
+
|
192
|
+
editController = {
|
193
|
+
"commitCurrentEdit": commitCurrentEdit,
|
194
|
+
"cancelCurrentEdit": cancelCurrentEdit
|
195
|
+
};
|
196
|
+
|
197
|
+
$container
|
198
|
+
.empty()
|
199
|
+
.attr("tabIndex", 0)
|
200
|
+
.attr("hideFocus", true)
|
201
|
+
.css("overflow", "hidden")
|
202
|
+
.css("outline", 0)
|
203
|
+
.addClass(uid)
|
204
|
+
.addClass("ui-widget");
|
205
|
+
|
206
|
+
// set up a positioning container if needed
|
207
|
+
if (!/relative|absolute|fixed/.test($container.css("position"))) {
|
208
|
+
$container.css("position", "relative");
|
209
|
+
}
|
210
|
+
|
211
|
+
$headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
|
212
|
+
$headers = $("<div class='slick-header-columns' style='width:10000px; left:-1000px' />").appendTo($headerScroller);
|
213
|
+
|
214
|
+
$headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
|
215
|
+
$headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
|
216
|
+
|
217
|
+
$topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
|
218
|
+
$topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);
|
219
|
+
|
220
|
+
if (!options.showTopPanel) {
|
221
|
+
$topPanelScroller.hide();
|
222
|
+
}
|
223
|
+
|
224
|
+
if (!options.showHeaderRow) {
|
225
|
+
$headerRowScroller.hide();
|
226
|
+
}
|
227
|
+
|
228
|
+
$viewport = $("<div class='slick-viewport' tabIndex='0' hideFocus style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
|
229
|
+
$viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
|
230
|
+
|
231
|
+
$canvas = $("<div class='grid-canvas' tabIndex='0' hideFocus />").appendTo($viewport);
|
232
|
+
|
233
|
+
if (!options.explicitInitialization) {
|
234
|
+
finishInitialization();
|
235
|
+
}
|
236
|
+
}
|
237
|
+
|
238
|
+
function finishInitialization() {
|
239
|
+
if (!initialized) {
|
240
|
+
initialized = true;
|
241
|
+
|
242
|
+
viewportW = parseFloat($.css($container[0], "width", true));
|
243
|
+
|
244
|
+
// header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)
|
245
|
+
// calculate the diff so we can set consistent sizes
|
246
|
+
measureCellPaddingAndBorder();
|
247
|
+
|
248
|
+
// for usability reasons, all text selection in SlickGrid is disabled
|
249
|
+
// with the exception of input and textarea elements (selection must
|
250
|
+
// be enabled there so that editors work as expected); note that
|
251
|
+
// selection in grid cells (grid body) is already unavailable in
|
252
|
+
// all browsers except IE
|
253
|
+
disableSelection($headers); // disable all text selection in header (including input and textarea)
|
254
|
+
|
255
|
+
if (!options.enableTextSelectionOnCells) {
|
256
|
+
// disable text selection in grid cells except in input and textarea elements
|
257
|
+
// (this is IE-specific, because selectstart event will only fire in IE)
|
258
|
+
$viewport.bind("selectstart.ui", function (event) {
|
259
|
+
return $(event.target).is("input,textarea");
|
260
|
+
});
|
261
|
+
}
|
262
|
+
|
263
|
+
createColumnHeaders();
|
264
|
+
setupColumnSort();
|
265
|
+
createCssRules();
|
266
|
+
resizeCanvas();
|
267
|
+
bindAncestorScrollEvents();
|
268
|
+
|
269
|
+
$container
|
270
|
+
.on("resize.slickgrid", resizeCanvas);
|
271
|
+
$viewport
|
272
|
+
.on("scroll.slickgrid", handleScroll);
|
273
|
+
$headerScroller
|
274
|
+
.on("contextmenu.slickgrid", handleHeaderContextMenu)
|
275
|
+
.on("click.slickgrid", handleHeaderClick);
|
276
|
+
$canvas
|
277
|
+
.on("keydown.slickgrid", handleKeyDown)
|
278
|
+
.on("click.slickgrid", handleClick)
|
279
|
+
.on("dblclick.slickgrid", handleDblClick)
|
280
|
+
.on("contextmenu.slickgrid", handleContextMenu)
|
281
|
+
.on("draginit", handleDragInit)
|
282
|
+
.on("dragstart", handleDragStart)
|
283
|
+
.on("drag", handleDrag)
|
284
|
+
.on("dragend", handleDragEnd)
|
285
|
+
.on("mouseenter", ".slick-cell", handleMouseEnter)
|
286
|
+
.on("mouseleave", ".slick-cell", handleMouseLeave);
|
287
|
+
}
|
288
|
+
}
|
289
|
+
|
290
|
+
function registerPlugin(plugin) {
|
291
|
+
plugins.unshift(plugin);
|
292
|
+
plugin.init(self);
|
293
|
+
}
|
294
|
+
|
295
|
+
function unregisterPlugin(plugin) {
|
296
|
+
for (var i = plugins.length; i >= 0; i--) {
|
297
|
+
if (plugins[i] === plugin) {
|
298
|
+
if (plugins[i].destroy) {
|
299
|
+
plugins[i].destroy();
|
300
|
+
}
|
301
|
+
plugins.splice(i, 1);
|
302
|
+
break;
|
303
|
+
}
|
304
|
+
}
|
305
|
+
}
|
306
|
+
|
307
|
+
function setSelectionModel(model) {
|
308
|
+
if (selectionModel) {
|
309
|
+
selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged);
|
310
|
+
if (selectionModel.destroy) {
|
311
|
+
selectionModel.destroy();
|
312
|
+
}
|
313
|
+
}
|
314
|
+
|
315
|
+
selectionModel = model;
|
316
|
+
if (selectionModel) {
|
317
|
+
selectionModel.init(self);
|
318
|
+
selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged);
|
319
|
+
}
|
320
|
+
}
|
321
|
+
|
322
|
+
function getSelectionModel() {
|
323
|
+
return selectionModel;
|
324
|
+
}
|
325
|
+
|
326
|
+
function getCanvasNode() {
|
327
|
+
return $canvas[0];
|
328
|
+
}
|
329
|
+
|
330
|
+
function measureScrollbar() {
|
331
|
+
var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
|
332
|
+
var dim = {
|
333
|
+
width: $c.width() - $c[0].clientWidth,
|
334
|
+
height: $c.height() - $c[0].clientHeight
|
335
|
+
};
|
336
|
+
$c.remove();
|
337
|
+
return dim;
|
338
|
+
}
|
339
|
+
|
340
|
+
function getCanvasWidth() {
|
341
|
+
var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
|
342
|
+
var rowWidth = 0;
|
343
|
+
var i = columns.length;
|
344
|
+
while (i--) {
|
345
|
+
rowWidth += (columns[i].width || columnDefaults.width);
|
346
|
+
}
|
347
|
+
return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth;
|
348
|
+
}
|
349
|
+
|
350
|
+
function updateCanvasWidth(forceColumnWidthsUpdate) {
|
351
|
+
var oldCanvasWidth = canvasWidth;
|
352
|
+
canvasWidth = getCanvasWidth();
|
353
|
+
|
354
|
+
if (canvasWidth != oldCanvasWidth) {
|
355
|
+
$canvas.width(canvasWidth);
|
356
|
+
$headerRow.width(canvasWidth);
|
357
|
+
viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);
|
358
|
+
}
|
359
|
+
|
360
|
+
if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {
|
361
|
+
applyColumnWidths();
|
362
|
+
}
|
363
|
+
}
|
364
|
+
|
365
|
+
function disableSelection($target) {
|
366
|
+
if ($target && $target.jquery) {
|
367
|
+
$target
|
368
|
+
.attr("unselectable", "on")
|
369
|
+
.css("MozUserSelect", "none")
|
370
|
+
.bind("selectstart.ui", function () {
|
371
|
+
return false;
|
372
|
+
}); // from jquery:ui.core.js 1.7.2
|
373
|
+
}
|
374
|
+
}
|
375
|
+
|
376
|
+
function getMaxSupportedCssHeight() {
|
377
|
+
var increment = 1000000;
|
378
|
+
var supportedHeight = increment;
|
379
|
+
// FF reports the height back but still renders blank after ~6M px
|
380
|
+
var testUpTo = ($.browser.mozilla) ? 5000000 : 1000000000;
|
381
|
+
var div = $("<div style='display:none' />").appendTo(document.body);
|
382
|
+
|
383
|
+
while (supportedHeight <= testUpTo) {
|
384
|
+
div.css("height", supportedHeight + increment);
|
385
|
+
if (div.height() !== supportedHeight + increment) {
|
386
|
+
break;
|
387
|
+
} else {
|
388
|
+
supportedHeight += increment;
|
389
|
+
}
|
390
|
+
}
|
391
|
+
|
392
|
+
div.remove();
|
393
|
+
return supportedHeight;
|
394
|
+
}
|
395
|
+
|
396
|
+
// TODO: this is static. need to handle page mutation.
|
397
|
+
function bindAncestorScrollEvents() {
|
398
|
+
var elem = $canvas[0];
|
399
|
+
while ((elem = elem.parentNode) != document.body && elem != null) {
|
400
|
+
// bind to scroll containers only
|
401
|
+
if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) {
|
402
|
+
$(elem).bind("scroll.slickgrid", handleActiveCellPositionChange);
|
403
|
+
}
|
404
|
+
}
|
405
|
+
}
|
406
|
+
|
407
|
+
function unbindAncestorScrollEvents() {
|
408
|
+
$canvas.parents().unbind("scroll.slickgrid");
|
409
|
+
}
|
410
|
+
|
411
|
+
function updateColumnHeader(columnId, title, toolTip) {
|
412
|
+
if (!initialized) { return; }
|
413
|
+
var idx = getColumnIndex(columnId);
|
414
|
+
var $header = $headers.children().eq(idx);
|
415
|
+
if ($header) {
|
416
|
+
columns[idx].name = title;
|
417
|
+
columns[idx].toolTip = toolTip;
|
418
|
+
$header
|
419
|
+
.attr("title", toolTip || title || "")
|
420
|
+
.children().eq(0).html(title);
|
421
|
+
}
|
422
|
+
}
|
423
|
+
|
424
|
+
function getHeaderRow() {
|
425
|
+
return $headerRow[0];
|
426
|
+
}
|
427
|
+
|
428
|
+
function getHeaderRowColumn(columnId) {
|
429
|
+
var idx = getColumnIndex(columnId);
|
430
|
+
var $header = $headerRow.children().eq(idx);
|
431
|
+
return $header && $header[0];
|
432
|
+
}
|
433
|
+
|
434
|
+
function createColumnHeaders() {
|
435
|
+
function hoverBegin() {
|
436
|
+
$(this).addClass("ui-state-hover");
|
437
|
+
}
|
438
|
+
|
439
|
+
function hoverEnd() {
|
440
|
+
$(this).removeClass("ui-state-hover");
|
441
|
+
}
|
442
|
+
|
443
|
+
$headers.empty();
|
444
|
+
$headerRow.empty();
|
445
|
+
columnsById = {};
|
446
|
+
|
447
|
+
for (var i = 0; i < columns.length; i++) {
|
448
|
+
var m = columns[i] = $.extend({}, columnDefaults, columns[i]);
|
449
|
+
columnsById[m.id] = i;
|
450
|
+
|
451
|
+
var header = $("<div class='ui-state-default slick-header-column' id='" + uid + m.id + "' />")
|
452
|
+
.html("<span class='slick-column-name'>" + m.name + "</span>")
|
453
|
+
.width(m.width - headerColumnWidthDiff)
|
454
|
+
.attr("title", m.toolTip || m.name || "")
|
455
|
+
.data("fieldId", m.id)
|
456
|
+
.addClass(m.headerCssClass || "")
|
457
|
+
.appendTo($headers);
|
458
|
+
|
459
|
+
if (options.enableColumnReorder || m.sortable) {
|
460
|
+
header.hover(hoverBegin, hoverEnd);
|
461
|
+
}
|
462
|
+
|
463
|
+
if (m.sortable) {
|
464
|
+
header.append("<span class='slick-sort-indicator' />");
|
465
|
+
}
|
466
|
+
|
467
|
+
if (options.showHeaderRow) {
|
468
|
+
$("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")
|
469
|
+
.appendTo($headerRow);
|
470
|
+
}
|
471
|
+
}
|
472
|
+
|
473
|
+
if (options.showHeaderRow) {
|
474
|
+
// add a spacer to let the container scroll beyond the header row columns width
|
475
|
+
$("<div style='display:block;height:1px;width:10000px;position:absolute;top:0;left:0;'></div>")
|
476
|
+
.appendTo($headerRowScroller);
|
477
|
+
}
|
478
|
+
|
479
|
+
setSortColumns(sortColumns);
|
480
|
+
setupColumnResize();
|
481
|
+
if (options.enableColumnReorder) {
|
482
|
+
setupColumnReorder();
|
483
|
+
}
|
484
|
+
}
|
485
|
+
|
486
|
+
function setupColumnSort() {
|
487
|
+
$headers.click(function (e) {
|
488
|
+
if ($(e.target).hasClass("slick-resizable-handle")) {
|
489
|
+
return;
|
490
|
+
}
|
491
|
+
|
492
|
+
var $col = $(e.target).closest(".slick-header-column");
|
493
|
+
if (!$col.length) {
|
494
|
+
return;
|
495
|
+
}
|
496
|
+
|
497
|
+
var column = columns[getColumnIndex($col.data("fieldId"))];
|
498
|
+
if (column.sortable) {
|
499
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
500
|
+
return;
|
501
|
+
}
|
502
|
+
|
503
|
+
var sortOpts = null;
|
504
|
+
for (var i = 0; i < sortColumns.length; i++) {
|
505
|
+
if (sortColumns[i].columnId == column.id) {
|
506
|
+
sortOpts = sortColumns[i];
|
507
|
+
sortOpts.sortAsc = !sortOpts.sortAsc;
|
508
|
+
break;
|
509
|
+
}
|
510
|
+
}
|
511
|
+
|
512
|
+
if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
|
513
|
+
sortColumns = [];
|
514
|
+
}
|
515
|
+
|
516
|
+
if (!sortOpts) {
|
517
|
+
sortOpts = { columnId: column.id, sortAsc: true };
|
518
|
+
sortColumns.push(sortOpts);
|
519
|
+
} else if (sortColumns.length == 0) {
|
520
|
+
sortColumns.push(sortOpts);
|
521
|
+
}
|
522
|
+
|
523
|
+
setSortColumns(sortColumns);
|
524
|
+
|
525
|
+
if (!options.multiColumnSort) {
|
526
|
+
trigger(self.onSort, {
|
527
|
+
multiColumnSort: false,
|
528
|
+
sortCol: column,
|
529
|
+
sortAsc: sortOpts.sortAsc}, e);
|
530
|
+
} else {
|
531
|
+
trigger(self.onSort, {
|
532
|
+
multiColumnSort: true,
|
533
|
+
sortCols: $.map(sortColumns, function(col) {
|
534
|
+
return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
|
535
|
+
})}, e);
|
536
|
+
}
|
537
|
+
}
|
538
|
+
});
|
539
|
+
}
|
540
|
+
|
541
|
+
function setupColumnReorder() {
|
542
|
+
$headers.sortable({
|
543
|
+
containment: "parent",
|
544
|
+
axis: "x",
|
545
|
+
cursor: "default",
|
546
|
+
tolerance: "intersection",
|
547
|
+
helper: "clone",
|
548
|
+
placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
|
549
|
+
forcePlaceholderSize: true,
|
550
|
+
start: function (e, ui) {
|
551
|
+
$(ui.helper).addClass("slick-header-column-active");
|
552
|
+
},
|
553
|
+
beforeStop: function (e, ui) {
|
554
|
+
$(ui.helper).removeClass("slick-header-column-active");
|
555
|
+
},
|
556
|
+
stop: function (e) {
|
557
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
558
|
+
$(this).sortable("cancel");
|
559
|
+
return;
|
560
|
+
}
|
561
|
+
|
562
|
+
var reorderedIds = $headers.sortable("toArray");
|
563
|
+
var reorderedColumns = [];
|
564
|
+
for (var i = 0; i < reorderedIds.length; i++) {
|
565
|
+
reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
|
566
|
+
}
|
567
|
+
setColumns(reorderedColumns);
|
568
|
+
|
569
|
+
trigger(self.onColumnsReordered, {});
|
570
|
+
e.stopPropagation();
|
571
|
+
setupColumnResize();
|
572
|
+
}
|
573
|
+
});
|
574
|
+
}
|
575
|
+
|
576
|
+
function setupColumnResize() {
|
577
|
+
var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable;
|
578
|
+
columnElements = $headers.children();
|
579
|
+
columnElements.find(".slick-resizable-handle").remove();
|
580
|
+
columnElements.each(function (i, e) {
|
581
|
+
if (columns[i].resizable) {
|
582
|
+
if (firstResizable === undefined) {
|
583
|
+
firstResizable = i;
|
584
|
+
}
|
585
|
+
lastResizable = i;
|
586
|
+
}
|
587
|
+
});
|
588
|
+
if (firstResizable === undefined) {
|
589
|
+
return;
|
590
|
+
}
|
591
|
+
columnElements.each(function (i, e) {
|
592
|
+
if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) {
|
593
|
+
return;
|
594
|
+
}
|
595
|
+
$col = $(e);
|
596
|
+
$("<div class='slick-resizable-handle' />")
|
597
|
+
.appendTo(e)
|
598
|
+
.bind("dragstart", function (e, dd) {
|
599
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
600
|
+
return false;
|
601
|
+
}
|
602
|
+
pageX = e.pageX;
|
603
|
+
$(this).parent().addClass("slick-header-column-active");
|
604
|
+
var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
|
605
|
+
// lock each column's width option to current width
|
606
|
+
columnElements.each(function (i, e) {
|
607
|
+
columns[i].previousWidth = $(e).outerWidth();
|
608
|
+
});
|
609
|
+
if (options.forceFitColumns) {
|
610
|
+
shrinkLeewayOnRight = 0;
|
611
|
+
stretchLeewayOnRight = 0;
|
612
|
+
// colums on right affect maxPageX/minPageX
|
613
|
+
for (j = i + 1; j < columnElements.length; j++) {
|
614
|
+
c = columns[j];
|
615
|
+
if (c.resizable) {
|
616
|
+
if (stretchLeewayOnRight !== null) {
|
617
|
+
if (c.maxWidth) {
|
618
|
+
stretchLeewayOnRight += c.maxWidth - c.previousWidth;
|
619
|
+
} else {
|
620
|
+
stretchLeewayOnRight = null;
|
621
|
+
}
|
622
|
+
}
|
623
|
+
shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
|
624
|
+
}
|
625
|
+
}
|
626
|
+
}
|
627
|
+
var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
|
628
|
+
for (j = 0; j <= i; j++) {
|
629
|
+
// columns on left only affect minPageX
|
630
|
+
c = columns[j];
|
631
|
+
if (c.resizable) {
|
632
|
+
if (stretchLeewayOnLeft !== null) {
|
633
|
+
if (c.maxWidth) {
|
634
|
+
stretchLeewayOnLeft += c.maxWidth - c.previousWidth;
|
635
|
+
} else {
|
636
|
+
stretchLeewayOnLeft = null;
|
637
|
+
}
|
638
|
+
}
|
639
|
+
shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);
|
640
|
+
}
|
641
|
+
}
|
642
|
+
if (shrinkLeewayOnRight === null) {
|
643
|
+
shrinkLeewayOnRight = 100000;
|
644
|
+
}
|
645
|
+
if (shrinkLeewayOnLeft === null) {
|
646
|
+
shrinkLeewayOnLeft = 100000;
|
647
|
+
}
|
648
|
+
if (stretchLeewayOnRight === null) {
|
649
|
+
stretchLeewayOnRight = 100000;
|
650
|
+
}
|
651
|
+
if (stretchLeewayOnLeft === null) {
|
652
|
+
stretchLeewayOnLeft = 100000;
|
653
|
+
}
|
654
|
+
maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);
|
655
|
+
minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);
|
656
|
+
})
|
657
|
+
.bind("drag", function (e, dd) {
|
658
|
+
var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x;
|
659
|
+
if (d < 0) { // shrink column
|
660
|
+
x = d;
|
661
|
+
for (j = i; j >= 0; j--) {
|
662
|
+
c = columns[j];
|
663
|
+
if (c.resizable) {
|
664
|
+
actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
|
665
|
+
if (x && c.previousWidth + x < actualMinWidth) {
|
666
|
+
x += c.previousWidth - actualMinWidth;
|
667
|
+
c.width = actualMinWidth;
|
668
|
+
} else {
|
669
|
+
c.width = c.previousWidth + x;
|
670
|
+
x = 0;
|
671
|
+
}
|
672
|
+
}
|
673
|
+
}
|
674
|
+
|
675
|
+
if (options.forceFitColumns) {
|
676
|
+
x = -d;
|
677
|
+
for (j = i + 1; j < columnElements.length; j++) {
|
678
|
+
c = columns[j];
|
679
|
+
if (c.resizable) {
|
680
|
+
if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
|
681
|
+
x -= c.maxWidth - c.previousWidth;
|
682
|
+
c.width = c.maxWidth;
|
683
|
+
} else {
|
684
|
+
c.width = c.previousWidth + x;
|
685
|
+
x = 0;
|
686
|
+
}
|
687
|
+
}
|
688
|
+
}
|
689
|
+
}
|
690
|
+
} else { // stretch column
|
691
|
+
x = d;
|
692
|
+
for (j = i; j >= 0; j--) {
|
693
|
+
c = columns[j];
|
694
|
+
if (c.resizable) {
|
695
|
+
if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
|
696
|
+
x -= c.maxWidth - c.previousWidth;
|
697
|
+
c.width = c.maxWidth;
|
698
|
+
} else {
|
699
|
+
c.width = c.previousWidth + x;
|
700
|
+
x = 0;
|
701
|
+
}
|
702
|
+
}
|
703
|
+
}
|
704
|
+
|
705
|
+
if (options.forceFitColumns) {
|
706
|
+
x = -d;
|
707
|
+
for (j = i + 1; j < columnElements.length; j++) {
|
708
|
+
c = columns[j];
|
709
|
+
if (c.resizable) {
|
710
|
+
actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
|
711
|
+
if (x && c.previousWidth + x < actualMinWidth) {
|
712
|
+
x += c.previousWidth - actualMinWidth;
|
713
|
+
c.width = actualMinWidth;
|
714
|
+
} else {
|
715
|
+
c.width = c.previousWidth + x;
|
716
|
+
x = 0;
|
717
|
+
}
|
718
|
+
}
|
719
|
+
}
|
720
|
+
}
|
721
|
+
}
|
722
|
+
applyColumnHeaderWidths();
|
723
|
+
if (options.syncColumnCellResize) {
|
724
|
+
applyColumnWidths();
|
725
|
+
}
|
726
|
+
})
|
727
|
+
.bind("dragend", function (e, dd) {
|
728
|
+
var newWidth;
|
729
|
+
$(this).parent().removeClass("slick-header-column-active");
|
730
|
+
for (j = 0; j < columnElements.length; j++) {
|
731
|
+
c = columns[j];
|
732
|
+
newWidth = $(columnElements[j]).outerWidth();
|
733
|
+
|
734
|
+
if (c.previousWidth !== newWidth && c.rerenderOnResize) {
|
735
|
+
invalidateAllRows();
|
736
|
+
}
|
737
|
+
}
|
738
|
+
updateCanvasWidth(true);
|
739
|
+
render();
|
740
|
+
trigger(self.onColumnsResized, {});
|
741
|
+
});
|
742
|
+
});
|
743
|
+
}
|
744
|
+
|
745
|
+
function getVBoxDelta($el) {
|
746
|
+
var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
|
747
|
+
var delta = 0;
|
748
|
+
$.each(p, function (n, val) {
|
749
|
+
delta += parseFloat($el.css(val)) || 0;
|
750
|
+
});
|
751
|
+
return delta;
|
752
|
+
}
|
753
|
+
|
754
|
+
function measureCellPaddingAndBorder() {
|
755
|
+
var el;
|
756
|
+
var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
|
757
|
+
var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
|
758
|
+
|
759
|
+
el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
|
760
|
+
headerColumnWidthDiff = headerColumnHeightDiff = 0;
|
761
|
+
$.each(h, function (n, val) {
|
762
|
+
headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
|
763
|
+
});
|
764
|
+
$.each(v, function (n, val) {
|
765
|
+
headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
|
766
|
+
});
|
767
|
+
el.remove();
|
768
|
+
|
769
|
+
var r = $("<div class='slick-row' />").appendTo($canvas);
|
770
|
+
el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
|
771
|
+
cellWidthDiff = cellHeightDiff = 0;
|
772
|
+
$.each(h, function (n, val) {
|
773
|
+
cellWidthDiff += parseFloat(el.css(val)) || 0;
|
774
|
+
});
|
775
|
+
$.each(v, function (n, val) {
|
776
|
+
cellHeightDiff += parseFloat(el.css(val)) || 0;
|
777
|
+
});
|
778
|
+
r.remove();
|
779
|
+
|
780
|
+
absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
|
781
|
+
}
|
782
|
+
|
783
|
+
function createCssRules() {
|
784
|
+
$style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
|
785
|
+
var rowHeight = (options.rowHeight - cellHeightDiff);
|
786
|
+
var rules = [
|
787
|
+
"." + uid + " .slick-header-column { left: 1000px; }",
|
788
|
+
"." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
|
789
|
+
"." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
|
790
|
+
"." + uid + " .slick-cell { height:" + rowHeight + "px; }",
|
791
|
+
"." + uid + " .slick-row { height:" + options.rowHeight + "px; }"
|
792
|
+
];
|
793
|
+
|
794
|
+
for (var i = 0; i < columns.length; i++) {
|
795
|
+
rules.push("." + uid + " .l" + i + " { }");
|
796
|
+
rules.push("." + uid + " .r" + i + " { }");
|
797
|
+
}
|
798
|
+
|
799
|
+
if ($style[0].styleSheet) { // IE
|
800
|
+
$style[0].styleSheet.cssText = rules.join(" ");
|
801
|
+
} else {
|
802
|
+
$style[0].appendChild(document.createTextNode(rules.join(" ")));
|
803
|
+
}
|
804
|
+
|
805
|
+
var sheets = document.styleSheets;
|
806
|
+
for (var i = 0; i < sheets.length; i++) {
|
807
|
+
if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
|
808
|
+
stylesheet = sheets[i];
|
809
|
+
break;
|
810
|
+
}
|
811
|
+
}
|
812
|
+
|
813
|
+
// find and cache column CSS rules
|
814
|
+
columnCssRulesL = [], columnCssRulesR = [];
|
815
|
+
var cssRules = (stylesheet.cssRules || stylesheet.rules);
|
816
|
+
var matches, columnIdx;
|
817
|
+
for (var i = 0; i < cssRules.length; i++) {
|
818
|
+
if (matches = /\.l\d+/.exec(cssRules[i].selectorText)) {
|
819
|
+
columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
|
820
|
+
columnCssRulesL[columnIdx] = cssRules[i];
|
821
|
+
} else if (matches = /\.r\d+/.exec(cssRules[i].selectorText)) {
|
822
|
+
columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);
|
823
|
+
columnCssRulesR[columnIdx] = cssRules[i];
|
824
|
+
}
|
825
|
+
}
|
826
|
+
}
|
827
|
+
|
828
|
+
function removeCssRules() {
|
829
|
+
$style.remove();
|
830
|
+
}
|
831
|
+
|
832
|
+
function destroy() {
|
833
|
+
getEditorLock().cancelCurrentEdit();
|
834
|
+
|
835
|
+
trigger(self.onBeforeDestroy, {});
|
836
|
+
|
837
|
+
for (var i = 0; i < plugins.length; i++) {
|
838
|
+
unregisterPlugin(plugins[i]);
|
839
|
+
}
|
840
|
+
|
841
|
+
if (options.enableColumnReorder && $headers.sortable) {
|
842
|
+
$headers.sortable("destroy");
|
843
|
+
}
|
844
|
+
|
845
|
+
unbindAncestorScrollEvents();
|
846
|
+
$container.unbind(".slickgrid");
|
847
|
+
removeCssRules();
|
848
|
+
|
849
|
+
$canvas.unbind("draginit dragstart dragend drag");
|
850
|
+
$container.empty().removeClass(uid);
|
851
|
+
}
|
852
|
+
|
853
|
+
|
854
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
855
|
+
// General
|
856
|
+
|
857
|
+
function trigger(evt, args, e) {
|
858
|
+
e = e || new Slick.EventData();
|
859
|
+
args = args || {};
|
860
|
+
args.grid = self;
|
861
|
+
return evt.notify(args, e, self);
|
862
|
+
}
|
863
|
+
|
864
|
+
function getEditorLock() {
|
865
|
+
return options.editorLock;
|
866
|
+
}
|
867
|
+
|
868
|
+
function getEditController() {
|
869
|
+
return editController;
|
870
|
+
}
|
871
|
+
|
872
|
+
function getColumnIndex(id) {
|
873
|
+
return columnsById[id];
|
874
|
+
}
|
875
|
+
|
876
|
+
function autosizeColumns() {
|
877
|
+
var i, c,
|
878
|
+
widths = [],
|
879
|
+
shrinkLeeway = 0,
|
880
|
+
total = 0,
|
881
|
+
prevTotal,
|
882
|
+
availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;
|
883
|
+
|
884
|
+
for (i = 0; i < columns.length; i++) {
|
885
|
+
c = columns[i];
|
886
|
+
widths.push(c.width);
|
887
|
+
total += c.width;
|
888
|
+
if (c.resizable) {
|
889
|
+
shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth);
|
890
|
+
}
|
891
|
+
}
|
892
|
+
|
893
|
+
// shrink
|
894
|
+
prevTotal = total;
|
895
|
+
while (total > availWidth && shrinkLeeway) {
|
896
|
+
var shrinkProportion = (total - availWidth) / shrinkLeeway;
|
897
|
+
for (i = 0; i < columns.length && total > availWidth; i++) {
|
898
|
+
c = columns[i];
|
899
|
+
var width = widths[i];
|
900
|
+
if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) {
|
901
|
+
continue;
|
902
|
+
}
|
903
|
+
var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth);
|
904
|
+
var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;
|
905
|
+
shrinkSize = Math.min(shrinkSize, width - absMinWidth);
|
906
|
+
total -= shrinkSize;
|
907
|
+
shrinkLeeway -= shrinkSize;
|
908
|
+
widths[i] -= shrinkSize;
|
909
|
+
}
|
910
|
+
if (prevTotal == total) { // avoid infinite loop
|
911
|
+
break;
|
912
|
+
}
|
913
|
+
prevTotal = total;
|
914
|
+
}
|
915
|
+
|
916
|
+
// grow
|
917
|
+
prevTotal = total;
|
918
|
+
while (total < availWidth) {
|
919
|
+
var growProportion = availWidth / total;
|
920
|
+
for (i = 0; i < columns.length && total < availWidth; i++) {
|
921
|
+
c = columns[i];
|
922
|
+
if (!c.resizable || c.maxWidth <= c.width) {
|
923
|
+
continue;
|
924
|
+
}
|
925
|
+
var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1;
|
926
|
+
total += growSize;
|
927
|
+
widths[i] += growSize;
|
928
|
+
}
|
929
|
+
if (prevTotal == total) { // avoid infinite loop
|
930
|
+
break;
|
931
|
+
}
|
932
|
+
prevTotal = total;
|
933
|
+
}
|
934
|
+
|
935
|
+
var reRender = false;
|
936
|
+
for (i = 0; i < columns.length; i++) {
|
937
|
+
if (columns[i].rerenderOnResize && columns[i].width != widths[i]) {
|
938
|
+
reRender = true;
|
939
|
+
}
|
940
|
+
columns[i].width = widths[i];
|
941
|
+
}
|
942
|
+
|
943
|
+
applyColumnHeaderWidths();
|
944
|
+
updateCanvasWidth(true);
|
945
|
+
if (reRender) {
|
946
|
+
invalidateAllRows();
|
947
|
+
render();
|
948
|
+
}
|
949
|
+
}
|
950
|
+
|
951
|
+
function applyColumnHeaderWidths() {
|
952
|
+
if (!initialized) { return; }
|
953
|
+
var h;
|
954
|
+
for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {
|
955
|
+
h = $(headers[i]);
|
956
|
+
if (h.width() !== columns[i].width - headerColumnWidthDiff) {
|
957
|
+
h.width(columns[i].width - headerColumnWidthDiff);
|
958
|
+
}
|
959
|
+
}
|
960
|
+
}
|
961
|
+
|
962
|
+
function applyColumnWidths() {
|
963
|
+
var x = 0, w, rule;
|
964
|
+
for (var i = 0; i < columns.length; i++) {
|
965
|
+
w = columns[i].width;
|
966
|
+
|
967
|
+
rule = columnCssRulesL[i];
|
968
|
+
rule.style.left = x + "px";
|
969
|
+
|
970
|
+
rule = columnCssRulesR[i];
|
971
|
+
rule.style.right = (canvasWidth - x - w) + "px";
|
972
|
+
|
973
|
+
x += columns[i].width;
|
974
|
+
}
|
975
|
+
}
|
976
|
+
|
977
|
+
function setSortColumn(columnId, ascending) {
|
978
|
+
setSortColumns([{ columnId: columnId, sortAsc: ascending}]);
|
979
|
+
}
|
980
|
+
|
981
|
+
function setSortColumns(cols) {
|
982
|
+
sortColumns = cols;
|
983
|
+
|
984
|
+
var headerColumnEls = $headers.children();
|
985
|
+
headerColumnEls
|
986
|
+
.removeClass("slick-header-column-sorted")
|
987
|
+
.find(".slick-sort-indicator")
|
988
|
+
.removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
|
989
|
+
|
990
|
+
$.each(sortColumns, function(i, col) {
|
991
|
+
if (col.sortAsc == null) {
|
992
|
+
col.sortAsc = true;
|
993
|
+
}
|
994
|
+
var columnIndex = getColumnIndex(col.columnId);
|
995
|
+
if (columnIndex != null) {
|
996
|
+
headerColumnEls.eq(columnIndex)
|
997
|
+
.addClass("slick-header-column-sorted")
|
998
|
+
.find(".slick-sort-indicator")
|
999
|
+
.addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
|
1000
|
+
}
|
1001
|
+
});
|
1002
|
+
}
|
1003
|
+
|
1004
|
+
function handleSelectedRangesChanged(e, ranges) {
|
1005
|
+
selectedRows = [];
|
1006
|
+
var hash = {};
|
1007
|
+
for (var i = 0; i < ranges.length; i++) {
|
1008
|
+
for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
|
1009
|
+
if (!hash[j]) { // prevent duplicates
|
1010
|
+
selectedRows.push(j);
|
1011
|
+
}
|
1012
|
+
hash[j] = {};
|
1013
|
+
for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
|
1014
|
+
if (canCellBeSelected(j, k)) {
|
1015
|
+
hash[j][columns[k].id] = options.selectedCellCssClass;
|
1016
|
+
}
|
1017
|
+
}
|
1018
|
+
}
|
1019
|
+
}
|
1020
|
+
|
1021
|
+
setCellCssStyles(options.selectedCellCssClass, hash);
|
1022
|
+
|
1023
|
+
trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e);
|
1024
|
+
}
|
1025
|
+
|
1026
|
+
function getColumns() {
|
1027
|
+
return columns;
|
1028
|
+
}
|
1029
|
+
|
1030
|
+
function setColumns(columnDefinitions) {
|
1031
|
+
columns = columnDefinitions;
|
1032
|
+
if (initialized) {
|
1033
|
+
invalidateAllRows();
|
1034
|
+
createColumnHeaders();
|
1035
|
+
removeCssRules();
|
1036
|
+
createCssRules();
|
1037
|
+
resizeCanvas();
|
1038
|
+
applyColumnWidths();
|
1039
|
+
handleScroll();
|
1040
|
+
}
|
1041
|
+
}
|
1042
|
+
|
1043
|
+
function getOptions() {
|
1044
|
+
return options;
|
1045
|
+
}
|
1046
|
+
|
1047
|
+
function setOptions(args) {
|
1048
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
1049
|
+
return;
|
1050
|
+
}
|
1051
|
+
|
1052
|
+
makeActiveCellNormal();
|
1053
|
+
|
1054
|
+
if (options.enableAddRow !== args.enableAddRow) {
|
1055
|
+
invalidateRow(getDataLength());
|
1056
|
+
}
|
1057
|
+
|
1058
|
+
options = $.extend(options, args);
|
1059
|
+
|
1060
|
+
$viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
|
1061
|
+
render();
|
1062
|
+
}
|
1063
|
+
|
1064
|
+
function setData(newData, scrollToTop) {
|
1065
|
+
invalidateAllRows();
|
1066
|
+
data = newData;
|
1067
|
+
if (scrollToTop) {
|
1068
|
+
scrollTo(0);
|
1069
|
+
}
|
1070
|
+
}
|
1071
|
+
|
1072
|
+
function getData() {
|
1073
|
+
return data;
|
1074
|
+
}
|
1075
|
+
|
1076
|
+
function getDataLength() {
|
1077
|
+
if (data.getLength) {
|
1078
|
+
return data.getLength();
|
1079
|
+
} else {
|
1080
|
+
return data.length;
|
1081
|
+
}
|
1082
|
+
}
|
1083
|
+
|
1084
|
+
function getDataItem(i) {
|
1085
|
+
if (data.getItem) {
|
1086
|
+
return data.getItem(i);
|
1087
|
+
} else {
|
1088
|
+
return data[i];
|
1089
|
+
}
|
1090
|
+
}
|
1091
|
+
|
1092
|
+
function getTopPanel() {
|
1093
|
+
return $topPanel[0];
|
1094
|
+
}
|
1095
|
+
|
1096
|
+
function showTopPanel() {
|
1097
|
+
options.showTopPanel = true;
|
1098
|
+
$topPanelScroller.slideDown("fast", resizeCanvas);
|
1099
|
+
}
|
1100
|
+
|
1101
|
+
function hideTopPanel() {
|
1102
|
+
options.showTopPanel = false;
|
1103
|
+
$topPanelScroller.slideUp("fast", resizeCanvas);
|
1104
|
+
}
|
1105
|
+
|
1106
|
+
function showHeaderRowColumns() {
|
1107
|
+
options.showHeaderRow = true;
|
1108
|
+
$headerRowScroller.slideDown("fast", resizeCanvas);
|
1109
|
+
}
|
1110
|
+
|
1111
|
+
function hideHeaderRowColumns() {
|
1112
|
+
options.showHeaderRow = false;
|
1113
|
+
$headerRowScroller.slideUp("fast", resizeCanvas);
|
1114
|
+
}
|
1115
|
+
|
1116
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
1117
|
+
// Rendering / Scrolling
|
1118
|
+
|
1119
|
+
function scrollTo(y) {
|
1120
|
+
var oldOffset = offset;
|
1121
|
+
|
1122
|
+
page = Math.min(n - 1, Math.floor(y / ph));
|
1123
|
+
offset = Math.round(page * cj);
|
1124
|
+
var newScrollTop = y - offset;
|
1125
|
+
|
1126
|
+
if (offset != oldOffset) {
|
1127
|
+
var range = getVisibleRange(newScrollTop);
|
1128
|
+
cleanupRows(range.top, range.bottom);
|
1129
|
+
updateRowPositions();
|
1130
|
+
}
|
1131
|
+
|
1132
|
+
if (prevScrollTop != newScrollTop) {
|
1133
|
+
scrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1;
|
1134
|
+
$viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop);
|
1135
|
+
|
1136
|
+
trigger(self.onViewportChanged, {});
|
1137
|
+
}
|
1138
|
+
}
|
1139
|
+
|
1140
|
+
function defaultFormatter(row, cell, value, columnDef, dataContext) {
|
1141
|
+
if (value == null) {
|
1142
|
+
return "";
|
1143
|
+
} else {
|
1144
|
+
return value.toString().replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
1145
|
+
}
|
1146
|
+
}
|
1147
|
+
|
1148
|
+
function getFormatter(row, column) {
|
1149
|
+
var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
|
1150
|
+
|
1151
|
+
// look up by id, then index
|
1152
|
+
var columnOverrides = rowMetadata &&
|
1153
|
+
rowMetadata.columns &&
|
1154
|
+
(rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);
|
1155
|
+
|
1156
|
+
return (columnOverrides && columnOverrides.formatter) ||
|
1157
|
+
(rowMetadata && rowMetadata.formatter) ||
|
1158
|
+
column.formatter ||
|
1159
|
+
(options.formatterFactory && options.formatterFactory.getFormatter(column)) ||
|
1160
|
+
options.defaultFormatter;
|
1161
|
+
}
|
1162
|
+
|
1163
|
+
function getEditor(row, cell) {
|
1164
|
+
var column = columns[cell];
|
1165
|
+
var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
|
1166
|
+
var columnMetadata = rowMetadata && rowMetadata.columns;
|
1167
|
+
|
1168
|
+
if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) {
|
1169
|
+
return columnMetadata[column.id].editor;
|
1170
|
+
}
|
1171
|
+
if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) {
|
1172
|
+
return columnMetadata[cell].editor;
|
1173
|
+
}
|
1174
|
+
|
1175
|
+
return column.editor || (options.editorFactory && options.editorFactory.getEditor(column));
|
1176
|
+
}
|
1177
|
+
|
1178
|
+
function getDataItemValueForColumn(item, columnDef) {
|
1179
|
+
if (options.dataItemColumnValueExtractor) {
|
1180
|
+
return options.dataItemColumnValueExtractor(item, columnDef);
|
1181
|
+
}
|
1182
|
+
return item[columnDef.field];
|
1183
|
+
}
|
1184
|
+
|
1185
|
+
function appendRowHtml(stringArray, row) {
|
1186
|
+
var d = getDataItem(row);
|
1187
|
+
var dataLoading = row < getDataLength() && !d;
|
1188
|
+
var cellCss;
|
1189
|
+
var rowCss = "slick-row " +
|
1190
|
+
(dataLoading ? " loading" : "") +
|
1191
|
+
(row % 2 == 1 ? " odd" : " even");
|
1192
|
+
|
1193
|
+
var metadata = data.getItemMetadata && data.getItemMetadata(row);
|
1194
|
+
|
1195
|
+
if (metadata && metadata.cssClasses) {
|
1196
|
+
rowCss += " " + metadata.cssClasses;
|
1197
|
+
}
|
1198
|
+
|
1199
|
+
stringArray.push("<div class='ui-widget-content " + rowCss + "' row='" + row + "' style='top:" + (options.rowHeight * row - offset) + "px'>");
|
1200
|
+
|
1201
|
+
var colspan, m;
|
1202
|
+
for (var i = 0, cols = columns.length; i < cols; i++) {
|
1203
|
+
m = columns[i];
|
1204
|
+
colspan = getColspan(row, i); // TODO: don't calc unless we have to
|
1205
|
+
cellCss = "slick-cell l" + i + " r" + Math.min(columns.length - 1, i + colspan - 1) + (m.cssClass ? " " + m.cssClass : "");
|
1206
|
+
if (row === activeRow && i === activeCell) {
|
1207
|
+
cellCss += (" active");
|
1208
|
+
}
|
1209
|
+
|
1210
|
+
// TODO: merge them together in the setter
|
1211
|
+
for (var key in cellCssClasses) {
|
1212
|
+
if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) {
|
1213
|
+
cellCss += (" " + cellCssClasses[key][row][m.id]);
|
1214
|
+
}
|
1215
|
+
}
|
1216
|
+
|
1217
|
+
stringArray.push("<div class='" + cellCss + "'>");
|
1218
|
+
|
1219
|
+
// if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
|
1220
|
+
if (d) {
|
1221
|
+
stringArray.push(getFormatter(row, m)(row, i, getDataItemValueForColumn(d, m), m, d));
|
1222
|
+
}
|
1223
|
+
|
1224
|
+
stringArray.push("</div>");
|
1225
|
+
|
1226
|
+
if (colspan) {
|
1227
|
+
i += (colspan - 1);
|
1228
|
+
}
|
1229
|
+
}
|
1230
|
+
|
1231
|
+
stringArray.push("</div>");
|
1232
|
+
}
|
1233
|
+
|
1234
|
+
function cleanupRows(rangeToKeep) {
|
1235
|
+
for (var i in rowsCache) {
|
1236
|
+
if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) {
|
1237
|
+
removeRowFromCache(i);
|
1238
|
+
}
|
1239
|
+
}
|
1240
|
+
}
|
1241
|
+
|
1242
|
+
function invalidate() {
|
1243
|
+
updateRowCount();
|
1244
|
+
invalidateAllRows();
|
1245
|
+
render();
|
1246
|
+
}
|
1247
|
+
|
1248
|
+
function invalidateAllRows() {
|
1249
|
+
if (currentEditor) {
|
1250
|
+
makeActiveCellNormal();
|
1251
|
+
}
|
1252
|
+
for (var row in rowsCache) {
|
1253
|
+
removeRowFromCache(row);
|
1254
|
+
}
|
1255
|
+
}
|
1256
|
+
|
1257
|
+
function removeRowFromCache(row) {
|
1258
|
+
var node = rowsCache[row];
|
1259
|
+
if (!node) {
|
1260
|
+
return;
|
1261
|
+
}
|
1262
|
+
$canvas[0].removeChild(node);
|
1263
|
+
delete rowsCache[row];
|
1264
|
+
delete postProcessedRows[row];
|
1265
|
+
renderedRows--;
|
1266
|
+
counter_rows_removed++;
|
1267
|
+
}
|
1268
|
+
|
1269
|
+
function invalidateRows(rows) {
|
1270
|
+
var i, rl;
|
1271
|
+
if (!rows || !rows.length) {
|
1272
|
+
return;
|
1273
|
+
}
|
1274
|
+
scrollDir = 0;
|
1275
|
+
for (i = 0, rl = rows.length; i < rl; i++) {
|
1276
|
+
if (currentEditor && activeRow === i) {
|
1277
|
+
makeActiveCellNormal();
|
1278
|
+
}
|
1279
|
+
if (rowsCache[rows[i]]) {
|
1280
|
+
removeRowFromCache(rows[i]);
|
1281
|
+
}
|
1282
|
+
}
|
1283
|
+
}
|
1284
|
+
|
1285
|
+
function invalidateRow(row) {
|
1286
|
+
invalidateRows([row]);
|
1287
|
+
}
|
1288
|
+
|
1289
|
+
function updateCell(row, cell) {
|
1290
|
+
var cellNode = getCellNode(row, cell);
|
1291
|
+
if (!cellNode) {
|
1292
|
+
return;
|
1293
|
+
}
|
1294
|
+
|
1295
|
+
var m = columns[cell], d = getDataItem(row);
|
1296
|
+
if (currentEditor && activeRow === row && activeCell === cell) {
|
1297
|
+
currentEditor.loadValue(d);
|
1298
|
+
} else {
|
1299
|
+
cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";
|
1300
|
+
invalidatePostProcessingResults(row);
|
1301
|
+
}
|
1302
|
+
}
|
1303
|
+
|
1304
|
+
function updateRow(row) {
|
1305
|
+
if (!rowsCache[row]) {
|
1306
|
+
return;
|
1307
|
+
}
|
1308
|
+
|
1309
|
+
$(rowsCache[row]).children().each(function (i) {
|
1310
|
+
var m = columns[i], d = getDataItem(row);
|
1311
|
+
if (row === activeRow && i === activeCell && currentEditor) {
|
1312
|
+
currentEditor.loadValue(getDataItem(activeRow));
|
1313
|
+
} else if (d) {
|
1314
|
+
this.innerHTML = getFormatter(row, m)(row, i, getDataItemValueForColumn(d, m), m, getDataItem(row));
|
1315
|
+
} else {
|
1316
|
+
this.innerHTML = "";
|
1317
|
+
}
|
1318
|
+
});
|
1319
|
+
|
1320
|
+
invalidatePostProcessingResults(row);
|
1321
|
+
}
|
1322
|
+
|
1323
|
+
function getViewportHeight() {
|
1324
|
+
return parseFloat($.css($container[0], "height", true)) -
|
1325
|
+
parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) -
|
1326
|
+
(options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
|
1327
|
+
(options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0);
|
1328
|
+
}
|
1329
|
+
|
1330
|
+
function resizeCanvas() {
|
1331
|
+
if (!initialized) { return; }
|
1332
|
+
if (options.autoHeight) {
|
1333
|
+
viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0) + (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0));
|
1334
|
+
} else {
|
1335
|
+
viewportH = getViewportHeight();
|
1336
|
+
}
|
1337
|
+
|
1338
|
+
numVisibleRows = Math.ceil(viewportH / options.rowHeight);
|
1339
|
+
viewportW = parseFloat($.css($container[0], "width", true));
|
1340
|
+
$viewport.height(viewportH);
|
1341
|
+
|
1342
|
+
if (options.forceFitColumns) {
|
1343
|
+
autosizeColumns();
|
1344
|
+
}
|
1345
|
+
|
1346
|
+
updateRowCount();
|
1347
|
+
render();
|
1348
|
+
}
|
1349
|
+
|
1350
|
+
function updateRowCount() {
|
1351
|
+
if (!initialized) { return; }
|
1352
|
+
numberOfRows = getDataLength() +
|
1353
|
+
(options.enableAddRow ? 1 : 0) +
|
1354
|
+
(options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);
|
1355
|
+
|
1356
|
+
var oldViewportHasVScroll = viewportHasVScroll;
|
1357
|
+
// with autoHeight, we do not need to accommodate the vertical scroll bar
|
1358
|
+
viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH);
|
1359
|
+
|
1360
|
+
// remove the rows that are now outside of the data range
|
1361
|
+
// this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows
|
1362
|
+
var l = options.enableAddRow ? getDataLength() : getDataLength() - 1;
|
1363
|
+
for (var i in rowsCache) {
|
1364
|
+
if (i >= l) {
|
1365
|
+
removeRowFromCache(i);
|
1366
|
+
}
|
1367
|
+
}
|
1368
|
+
|
1369
|
+
var oldH = h;
|
1370
|
+
th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height);
|
1371
|
+
if (th < maxSupportedCssHeight) {
|
1372
|
+
// just one page
|
1373
|
+
h = ph = th;
|
1374
|
+
n = 1;
|
1375
|
+
cj = 0;
|
1376
|
+
} else {
|
1377
|
+
// break into pages
|
1378
|
+
h = maxSupportedCssHeight;
|
1379
|
+
ph = h / 100;
|
1380
|
+
n = Math.floor(th / ph);
|
1381
|
+
cj = (th - h) / (n - 1);
|
1382
|
+
}
|
1383
|
+
|
1384
|
+
if (h !== oldH) {
|
1385
|
+
$canvas.css("height", h);
|
1386
|
+
scrollTop = $viewport[0].scrollTop;
|
1387
|
+
}
|
1388
|
+
|
1389
|
+
var oldScrollTopInRange = (scrollTop + offset <= th - viewportH);
|
1390
|
+
|
1391
|
+
if (th == 0 || scrollTop == 0) {
|
1392
|
+
page = offset = 0;
|
1393
|
+
} else if (oldScrollTopInRange) {
|
1394
|
+
// maintain virtual position
|
1395
|
+
scrollTo(scrollTop + offset);
|
1396
|
+
} else {
|
1397
|
+
// scroll to bottom
|
1398
|
+
scrollTo(th - viewportH);
|
1399
|
+
}
|
1400
|
+
|
1401
|
+
if (h != oldH && options.autoHeight) {
|
1402
|
+
resizeCanvas();
|
1403
|
+
}
|
1404
|
+
|
1405
|
+
if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) {
|
1406
|
+
autosizeColumns();
|
1407
|
+
}
|
1408
|
+
updateCanvasWidth(false);
|
1409
|
+
}
|
1410
|
+
|
1411
|
+
function getVisibleRange(viewportTop) {
|
1412
|
+
if (viewportTop == null) {
|
1413
|
+
viewportTop = scrollTop;
|
1414
|
+
}
|
1415
|
+
|
1416
|
+
return {
|
1417
|
+
top: Math.floor((viewportTop + offset) / options.rowHeight),
|
1418
|
+
bottom: Math.ceil((viewportTop + offset + viewportH) / options.rowHeight)
|
1419
|
+
};
|
1420
|
+
}
|
1421
|
+
|
1422
|
+
function getRenderedRange(viewportTop) {
|
1423
|
+
var range = getVisibleRange(viewportTop);
|
1424
|
+
var buffer = Math.round(viewportH / options.rowHeight);
|
1425
|
+
var minBuffer = 3;
|
1426
|
+
|
1427
|
+
if (scrollDir == -1) {
|
1428
|
+
range.top -= buffer;
|
1429
|
+
range.bottom += minBuffer;
|
1430
|
+
} else if (scrollDir == 1) {
|
1431
|
+
range.top -= minBuffer;
|
1432
|
+
range.bottom += buffer;
|
1433
|
+
} else {
|
1434
|
+
range.top -= minBuffer;
|
1435
|
+
range.bottom += minBuffer;
|
1436
|
+
}
|
1437
|
+
|
1438
|
+
range.top = Math.max(0, range.top);
|
1439
|
+
range.bottom = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, range.bottom);
|
1440
|
+
|
1441
|
+
return range;
|
1442
|
+
}
|
1443
|
+
|
1444
|
+
function renderRows(range) {
|
1445
|
+
var i, l,
|
1446
|
+
parentNode = $canvas[0],
|
1447
|
+
rowsBefore = renderedRows,
|
1448
|
+
stringArray = [],
|
1449
|
+
rows = [],
|
1450
|
+
startTimestamp = new Date(),
|
1451
|
+
needToReselectCell = false;
|
1452
|
+
|
1453
|
+
for (i = range.top; i <= range.bottom; i++) {
|
1454
|
+
if (rowsCache[i]) {
|
1455
|
+
continue;
|
1456
|
+
}
|
1457
|
+
renderedRows++;
|
1458
|
+
rows.push(i);
|
1459
|
+
appendRowHtml(stringArray, i);
|
1460
|
+
if (activeCellNode && activeRow === i) {
|
1461
|
+
needToReselectCell = true;
|
1462
|
+
}
|
1463
|
+
counter_rows_rendered++;
|
1464
|
+
}
|
1465
|
+
|
1466
|
+
if (!rows.length) { return; }
|
1467
|
+
|
1468
|
+
var x = document.createElement("div");
|
1469
|
+
x.innerHTML = stringArray.join("");
|
1470
|
+
|
1471
|
+
for (i = 0, l = x.childNodes.length; i < l; i++) {
|
1472
|
+
rowsCache[rows[i]] = parentNode.appendChild(x.firstChild);
|
1473
|
+
}
|
1474
|
+
|
1475
|
+
if (needToReselectCell) {
|
1476
|
+
activeCellNode = getCellNode(activeRow, activeCell);
|
1477
|
+
}
|
1478
|
+
|
1479
|
+
if (renderedRows - rowsBefore > 5) {
|
1480
|
+
avgRowRenderTime = (new Date() - startTimestamp) / (renderedRows - rowsBefore);
|
1481
|
+
}
|
1482
|
+
}
|
1483
|
+
|
1484
|
+
function startPostProcessing() {
|
1485
|
+
if (!options.enableAsyncPostRender) {
|
1486
|
+
return;
|
1487
|
+
}
|
1488
|
+
clearTimeout(h_postrender);
|
1489
|
+
h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
|
1490
|
+
}
|
1491
|
+
|
1492
|
+
function invalidatePostProcessingResults(row) {
|
1493
|
+
delete postProcessedRows[row];
|
1494
|
+
postProcessFromRow = Math.min(postProcessFromRow, row);
|
1495
|
+
postProcessToRow = Math.max(postProcessToRow, row);
|
1496
|
+
startPostProcessing();
|
1497
|
+
}
|
1498
|
+
|
1499
|
+
function updateRowPositions() {
|
1500
|
+
for (var row in rowsCache) {
|
1501
|
+
rowsCache[row].style.top = (row * options.rowHeight - offset) + "px";
|
1502
|
+
}
|
1503
|
+
}
|
1504
|
+
|
1505
|
+
function render() {
|
1506
|
+
if (!initialized) { return; }
|
1507
|
+
var visible = getVisibleRange();
|
1508
|
+
var rendered = getRenderedRange();
|
1509
|
+
|
1510
|
+
// remove rows no longer in the viewport
|
1511
|
+
cleanupRows(rendered);
|
1512
|
+
|
1513
|
+
// add new rows
|
1514
|
+
renderRows(rendered);
|
1515
|
+
|
1516
|
+
postProcessFromRow = visible.top;
|
1517
|
+
postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom);
|
1518
|
+
startPostProcessing();
|
1519
|
+
|
1520
|
+
lastRenderedScrollTop = scrollTop;
|
1521
|
+
h_render = null;
|
1522
|
+
}
|
1523
|
+
|
1524
|
+
function handleScroll() {
|
1525
|
+
scrollTop = $viewport[0].scrollTop;
|
1526
|
+
var scrollLeft = $viewport[0].scrollLeft;
|
1527
|
+
var scrollDist = Math.abs(scrollTop - prevScrollTop);
|
1528
|
+
|
1529
|
+
if (scrollLeft !== prevScrollLeft) {
|
1530
|
+
prevScrollLeft = scrollLeft;
|
1531
|
+
$headerScroller[0].scrollLeft = scrollLeft;
|
1532
|
+
$topPanelScroller[0].scrollLeft = scrollLeft;
|
1533
|
+
$headerRowScroller[0].scrollLeft = scrollLeft;
|
1534
|
+
}
|
1535
|
+
|
1536
|
+
if (scrollDist) {
|
1537
|
+
scrollDir = prevScrollTop < scrollTop ? 1 : -1;
|
1538
|
+
prevScrollTop = scrollTop;
|
1539
|
+
|
1540
|
+
// switch virtual pages if needed
|
1541
|
+
if (scrollDist < viewportH) {
|
1542
|
+
scrollTo(scrollTop + offset);
|
1543
|
+
} else {
|
1544
|
+
var oldOffset = offset;
|
1545
|
+
page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));
|
1546
|
+
offset = Math.round(page * cj);
|
1547
|
+
if (oldOffset != offset) {
|
1548
|
+
invalidateAllRows();
|
1549
|
+
}
|
1550
|
+
}
|
1551
|
+
|
1552
|
+
if (h_render) {
|
1553
|
+
clearTimeout(h_render);
|
1554
|
+
}
|
1555
|
+
|
1556
|
+
if (Math.abs(lastRenderedScrollTop - scrollTop) < viewportH) {
|
1557
|
+
render();
|
1558
|
+
} else {
|
1559
|
+
h_render = setTimeout(render, 50);
|
1560
|
+
}
|
1561
|
+
|
1562
|
+
trigger(self.onViewportChanged, {});
|
1563
|
+
}
|
1564
|
+
|
1565
|
+
trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});
|
1566
|
+
}
|
1567
|
+
|
1568
|
+
function asyncPostProcessRows() {
|
1569
|
+
while (postProcessFromRow <= postProcessToRow) {
|
1570
|
+
var row = (scrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;
|
1571
|
+
var rowNode = rowsCache[row];
|
1572
|
+
if (!rowNode || postProcessedRows[row] || row >= getDataLength()) {
|
1573
|
+
continue;
|
1574
|
+
}
|
1575
|
+
|
1576
|
+
var d = getDataItem(row), cellNodes = rowNode.childNodes;
|
1577
|
+
for (var i = 0, j = 0, l = columns.length; i < l; ++i) {
|
1578
|
+
var m = columns[i];
|
1579
|
+
if (m.asyncPostRender) {
|
1580
|
+
m.asyncPostRender(cellNodes[j], postProcessFromRow, d, m);
|
1581
|
+
}
|
1582
|
+
++j;
|
1583
|
+
}
|
1584
|
+
|
1585
|
+
postProcessedRows[row] = true;
|
1586
|
+
h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);
|
1587
|
+
return;
|
1588
|
+
}
|
1589
|
+
}
|
1590
|
+
|
1591
|
+
function updateCellCssStylesOnRenderedRows(addedHash, removedHash) {
|
1592
|
+
var node, columnId, addedRowHash, removedRowHash;
|
1593
|
+
for (var row in rowsCache) {
|
1594
|
+
removedRowHash = removedHash && removedHash[row];
|
1595
|
+
addedRowHash = addedHash && addedHash[row];
|
1596
|
+
|
1597
|
+
if (removedRowHash) {
|
1598
|
+
for (columnId in removedRowHash) {
|
1599
|
+
if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
|
1600
|
+
node = getCellNode(row, getColumnIndex(columnId));
|
1601
|
+
if (node) {
|
1602
|
+
$(node).removeClass(removedRowHash[columnId]);
|
1603
|
+
}
|
1604
|
+
}
|
1605
|
+
}
|
1606
|
+
}
|
1607
|
+
|
1608
|
+
if (addedRowHash) {
|
1609
|
+
for (columnId in addedRowHash) {
|
1610
|
+
if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {
|
1611
|
+
node = getCellNode(row, getColumnIndex(columnId));
|
1612
|
+
if (node) {
|
1613
|
+
$(node).addClass(addedRowHash[columnId]);
|
1614
|
+
}
|
1615
|
+
}
|
1616
|
+
}
|
1617
|
+
}
|
1618
|
+
}
|
1619
|
+
}
|
1620
|
+
|
1621
|
+
function addCellCssStyles(key, hash) {
|
1622
|
+
if (cellCssClasses[key]) {
|
1623
|
+
throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists.";
|
1624
|
+
}
|
1625
|
+
|
1626
|
+
cellCssClasses[key] = hash;
|
1627
|
+
updateCellCssStylesOnRenderedRows(hash, null);
|
1628
|
+
|
1629
|
+
trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
|
1630
|
+
}
|
1631
|
+
|
1632
|
+
function removeCellCssStyles(key) {
|
1633
|
+
if (!cellCssClasses[key]) {
|
1634
|
+
return;
|
1635
|
+
}
|
1636
|
+
|
1637
|
+
updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);
|
1638
|
+
delete cellCssClasses[key];
|
1639
|
+
|
1640
|
+
trigger(self.onCellCssStylesChanged, { "key": key, "hash": null });
|
1641
|
+
}
|
1642
|
+
|
1643
|
+
function setCellCssStyles(key, hash) {
|
1644
|
+
var prevHash = cellCssClasses[key];
|
1645
|
+
|
1646
|
+
cellCssClasses[key] = hash;
|
1647
|
+
updateCellCssStylesOnRenderedRows(hash, prevHash);
|
1648
|
+
|
1649
|
+
trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });
|
1650
|
+
}
|
1651
|
+
|
1652
|
+
function getCellCssStyles(key) {
|
1653
|
+
return cellCssClasses[key];
|
1654
|
+
}
|
1655
|
+
|
1656
|
+
function flashCell(row, cell, speed) {
|
1657
|
+
speed = speed || 100;
|
1658
|
+
if (rowsCache[row]) {
|
1659
|
+
var $cell = $(getCellNode(row, cell));
|
1660
|
+
|
1661
|
+
function toggleCellClass(times) {
|
1662
|
+
if (!times) {
|
1663
|
+
return;
|
1664
|
+
}
|
1665
|
+
setTimeout(function () {
|
1666
|
+
$cell.queue(function () {
|
1667
|
+
$cell.toggleClass(options.cellFlashingCssClass).dequeue();
|
1668
|
+
toggleCellClass(times - 1);
|
1669
|
+
});
|
1670
|
+
},
|
1671
|
+
speed);
|
1672
|
+
}
|
1673
|
+
|
1674
|
+
toggleCellClass(4);
|
1675
|
+
}
|
1676
|
+
}
|
1677
|
+
|
1678
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
1679
|
+
// Interactivity
|
1680
|
+
|
1681
|
+
function handleDragInit(e, dd) {
|
1682
|
+
var cell = getCellFromEvent(e);
|
1683
|
+
if (!cell || !cellExists(cell.row, cell.cell)) {
|
1684
|
+
return false;
|
1685
|
+
}
|
1686
|
+
|
1687
|
+
retval = trigger(self.onDragInit, dd, e);
|
1688
|
+
if (e.isImmediatePropagationStopped()) {
|
1689
|
+
return retval;
|
1690
|
+
}
|
1691
|
+
|
1692
|
+
// if nobody claims to be handling drag'n'drop by stopping immediate propagation,
|
1693
|
+
// cancel out of it
|
1694
|
+
return false;
|
1695
|
+
}
|
1696
|
+
|
1697
|
+
function handleDragStart(e, dd) {
|
1698
|
+
var cell = getCellFromEvent(e);
|
1699
|
+
if (!cell || !cellExists(cell.row, cell.cell)) {
|
1700
|
+
return false;
|
1701
|
+
}
|
1702
|
+
|
1703
|
+
var retval = trigger(self.onDragStart, dd, e);
|
1704
|
+
if (e.isImmediatePropagationStopped()) {
|
1705
|
+
return retval;
|
1706
|
+
}
|
1707
|
+
|
1708
|
+
return false;
|
1709
|
+
}
|
1710
|
+
|
1711
|
+
function handleDrag(e, dd) {
|
1712
|
+
return trigger(self.onDrag, dd, e);
|
1713
|
+
}
|
1714
|
+
|
1715
|
+
function handleDragEnd(e, dd) {
|
1716
|
+
trigger(self.onDragEnd, dd, e);
|
1717
|
+
}
|
1718
|
+
|
1719
|
+
function handleKeyDown(e) {
|
1720
|
+
trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e);
|
1721
|
+
var handled = e.isImmediatePropagationStopped();
|
1722
|
+
|
1723
|
+
if (!handled) {
|
1724
|
+
if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
|
1725
|
+
if (e.which == 27) {
|
1726
|
+
if (!getEditorLock().isActive()) {
|
1727
|
+
return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)
|
1728
|
+
}
|
1729
|
+
cancelEditAndSetFocus();
|
1730
|
+
} else if (e.which == 37) {
|
1731
|
+
navigateLeft();
|
1732
|
+
} else if (e.which == 39) {
|
1733
|
+
navigateRight();
|
1734
|
+
} else if (e.which == 38) {
|
1735
|
+
navigateUp();
|
1736
|
+
} else if (e.which == 40) {
|
1737
|
+
navigateDown();
|
1738
|
+
} else if (e.which == 9) {
|
1739
|
+
navigateNext();
|
1740
|
+
} else if (e.which == 13) {
|
1741
|
+
if (options.editable) {
|
1742
|
+
if (currentEditor) {
|
1743
|
+
// adding new row
|
1744
|
+
if (activeRow === getDataLength()) {
|
1745
|
+
navigateDown();
|
1746
|
+
}
|
1747
|
+
else {
|
1748
|
+
commitEditAndSetFocus();
|
1749
|
+
}
|
1750
|
+
} else {
|
1751
|
+
if (getEditorLock().commitCurrentEdit()) {
|
1752
|
+
makeActiveCellEditable();
|
1753
|
+
}
|
1754
|
+
}
|
1755
|
+
}
|
1756
|
+
} else {
|
1757
|
+
return;
|
1758
|
+
}
|
1759
|
+
} else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) {
|
1760
|
+
navigatePrev();
|
1761
|
+
} else {
|
1762
|
+
return;
|
1763
|
+
}
|
1764
|
+
}
|
1765
|
+
|
1766
|
+
// the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it
|
1767
|
+
e.stopPropagation();
|
1768
|
+
e.preventDefault();
|
1769
|
+
try {
|
1770
|
+
e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.)
|
1771
|
+
}
|
1772
|
+
// ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl"
|
1773
|
+
// (hitting control key only, nothing else), "Shift" (maybe others)
|
1774
|
+
catch (error) {
|
1775
|
+
}
|
1776
|
+
}
|
1777
|
+
|
1778
|
+
function handleClick(e) {
|
1779
|
+
var cell = getCellFromEvent(e);
|
1780
|
+
if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
|
1781
|
+
return;
|
1782
|
+
}
|
1783
|
+
|
1784
|
+
trigger(self.onClick, {row: cell.row, cell: cell.cell}, e);
|
1785
|
+
if (e.isImmediatePropagationStopped()) {
|
1786
|
+
return;
|
1787
|
+
}
|
1788
|
+
|
1789
|
+
if (canCellBeActive(cell.row, cell.cell)) {
|
1790
|
+
if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) {
|
1791
|
+
scrollRowIntoView(cell.row, false);
|
1792
|
+
setActiveCellInternal(getCellNode(cell.row, cell.cell), (cell.row === getDataLength()) || options.autoEdit);
|
1793
|
+
}
|
1794
|
+
}
|
1795
|
+
}
|
1796
|
+
|
1797
|
+
function handleContextMenu(e) {
|
1798
|
+
var $cell = $(e.target).closest(".slick-cell", $canvas);
|
1799
|
+
if ($cell.length === 0) {
|
1800
|
+
return;
|
1801
|
+
}
|
1802
|
+
|
1803
|
+
// are we editing this cell?
|
1804
|
+
if (activeCellNode === $cell[0] && currentEditor !== null) {
|
1805
|
+
return;
|
1806
|
+
}
|
1807
|
+
|
1808
|
+
trigger(self.onContextMenu, {}, e);
|
1809
|
+
}
|
1810
|
+
|
1811
|
+
function handleDblClick(e) {
|
1812
|
+
var cell = getCellFromEvent(e);
|
1813
|
+
if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
|
1814
|
+
return;
|
1815
|
+
}
|
1816
|
+
|
1817
|
+
trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e);
|
1818
|
+
if (e.isImmediatePropagationStopped()) {
|
1819
|
+
return;
|
1820
|
+
}
|
1821
|
+
|
1822
|
+
if (options.editable) {
|
1823
|
+
gotoCell(cell.row, cell.cell, true);
|
1824
|
+
}
|
1825
|
+
}
|
1826
|
+
|
1827
|
+
function handleHeaderContextMenu(e) {
|
1828
|
+
var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
|
1829
|
+
var column = $header && columns[self.getColumnIndex($header.data("fieldId"))];
|
1830
|
+
trigger(self.onHeaderContextMenu, {column: column}, e);
|
1831
|
+
}
|
1832
|
+
|
1833
|
+
function handleHeaderClick(e) {
|
1834
|
+
var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");
|
1835
|
+
var column = $header && columns[self.getColumnIndex($header.data("fieldId"))];
|
1836
|
+
trigger(self.onHeaderClick, {column: column}, e);
|
1837
|
+
}
|
1838
|
+
|
1839
|
+
function handleMouseEnter(e) {
|
1840
|
+
trigger(self.onMouseEnter, {}, e);
|
1841
|
+
}
|
1842
|
+
|
1843
|
+
function handleMouseLeave(e) {
|
1844
|
+
trigger(self.onMouseLeave, {}, e);
|
1845
|
+
}
|
1846
|
+
|
1847
|
+
function cellExists(row, cell) {
|
1848
|
+
return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length);
|
1849
|
+
}
|
1850
|
+
|
1851
|
+
function getCellFromPoint(x, y) {
|
1852
|
+
var row = Math.floor((y + offset) / options.rowHeight);
|
1853
|
+
var cell = 0;
|
1854
|
+
|
1855
|
+
var w = 0;
|
1856
|
+
for (var i = 0; i < columns.length && w < x; i++) {
|
1857
|
+
w += columns[i].width;
|
1858
|
+
cell++;
|
1859
|
+
}
|
1860
|
+
|
1861
|
+
if (cell < 0) {
|
1862
|
+
cell = 0;
|
1863
|
+
}
|
1864
|
+
|
1865
|
+
return {row: row, cell: cell - 1};
|
1866
|
+
}
|
1867
|
+
|
1868
|
+
function getCellFromNode(node) {
|
1869
|
+
// read column number from .l1 or .c1 CSS classes
|
1870
|
+
var cls = /l\d+/.exec(node.className) || /c\d+/.exec(node.className);
|
1871
|
+
if (!cls) {
|
1872
|
+
throw "getCellFromNode: cannot get cell - " + node.className;
|
1873
|
+
}
|
1874
|
+
return parseInt(cls[0].substr(1, cls[0].length - 1), 10);
|
1875
|
+
}
|
1876
|
+
|
1877
|
+
function getCellFromEvent(e) {
|
1878
|
+
var $cell = $(e.target).closest(".slick-cell", $canvas);
|
1879
|
+
if (!$cell.length) {
|
1880
|
+
return null;
|
1881
|
+
}
|
1882
|
+
|
1883
|
+
return {
|
1884
|
+
row: $cell.parent().attr("row") | 0,
|
1885
|
+
cell: getCellFromNode($cell[0])
|
1886
|
+
};
|
1887
|
+
}
|
1888
|
+
|
1889
|
+
function getCellNodeBox(row, cell) {
|
1890
|
+
if (!cellExists(row, cell)) {
|
1891
|
+
return null;
|
1892
|
+
}
|
1893
|
+
|
1894
|
+
var y1 = row * options.rowHeight - offset;
|
1895
|
+
var y2 = y1 + options.rowHeight - 1;
|
1896
|
+
var x1 = 0;
|
1897
|
+
for (var i = 0; i < cell; i++) {
|
1898
|
+
x1 += columns[i].width;
|
1899
|
+
}
|
1900
|
+
var x2 = x1 + columns[cell].width;
|
1901
|
+
|
1902
|
+
return {
|
1903
|
+
top: y1,
|
1904
|
+
left: x1,
|
1905
|
+
bottom: y2,
|
1906
|
+
right: x2
|
1907
|
+
};
|
1908
|
+
}
|
1909
|
+
|
1910
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
1911
|
+
// Cell switching
|
1912
|
+
|
1913
|
+
function resetActiveCell() {
|
1914
|
+
setActiveCellInternal(null, false);
|
1915
|
+
}
|
1916
|
+
|
1917
|
+
function setFocus() {
|
1918
|
+
// IE tries to scroll the viewport so that the item being focused is aligned to the left border
|
1919
|
+
// IE-specific .setActive() sets the focus, but doesn't scroll
|
1920
|
+
if ($.browser.msie) {
|
1921
|
+
$canvas[0].setActive();
|
1922
|
+
} else {
|
1923
|
+
$canvas[0].focus();
|
1924
|
+
}
|
1925
|
+
}
|
1926
|
+
|
1927
|
+
function scrollActiveCellIntoView() {
|
1928
|
+
if (activeCellNode) {
|
1929
|
+
var left = $(activeCellNode).position().left,
|
1930
|
+
right = left + $(activeCellNode).outerWidth(),
|
1931
|
+
scrollLeft = $viewport.scrollLeft(),
|
1932
|
+
scrollRight = scrollLeft + $viewport.width();
|
1933
|
+
|
1934
|
+
if (left < scrollLeft) {
|
1935
|
+
$viewport.scrollLeft(left);
|
1936
|
+
} else if (right > scrollRight) {
|
1937
|
+
$viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));
|
1938
|
+
}
|
1939
|
+
}
|
1940
|
+
}
|
1941
|
+
|
1942
|
+
function setActiveCellInternal(newCell, editMode) {
|
1943
|
+
if (activeCellNode !== null) {
|
1944
|
+
makeActiveCellNormal();
|
1945
|
+
$(activeCellNode).removeClass("active");
|
1946
|
+
}
|
1947
|
+
|
1948
|
+
var activeCellChanged = (activeCellNode !== newCell);
|
1949
|
+
activeCellNode = newCell;
|
1950
|
+
|
1951
|
+
if (activeCellNode != null) {
|
1952
|
+
activeRow = parseInt($(activeCellNode).parent().attr("row"));
|
1953
|
+
activeCell = activePosX = getCellFromNode(activeCellNode);
|
1954
|
+
|
1955
|
+
$(activeCellNode).addClass("active");
|
1956
|
+
|
1957
|
+
if (options.editable && editMode && isCellPotentiallyEditable(activeRow, activeCell)) {
|
1958
|
+
clearTimeout(h_editorLoader);
|
1959
|
+
|
1960
|
+
if (options.asyncEditorLoading) {
|
1961
|
+
h_editorLoader = setTimeout(function () {
|
1962
|
+
makeActiveCellEditable();
|
1963
|
+
}, options.asyncEditorLoadDelay);
|
1964
|
+
} else {
|
1965
|
+
makeActiveCellEditable();
|
1966
|
+
}
|
1967
|
+
} else {
|
1968
|
+
setFocus();
|
1969
|
+
}
|
1970
|
+
} else {
|
1971
|
+
activeRow = activeCell = null;
|
1972
|
+
}
|
1973
|
+
|
1974
|
+
if (activeCellChanged) {
|
1975
|
+
scrollActiveCellIntoView();
|
1976
|
+
trigger(self.onActiveCellChanged, getActiveCell());
|
1977
|
+
}
|
1978
|
+
}
|
1979
|
+
|
1980
|
+
function clearTextSelection() {
|
1981
|
+
if (document.selection && document.selection.empty) {
|
1982
|
+
document.selection.empty();
|
1983
|
+
} else if (window.getSelection) {
|
1984
|
+
var sel = window.getSelection();
|
1985
|
+
if (sel && sel.removeAllRanges) {
|
1986
|
+
sel.removeAllRanges();
|
1987
|
+
}
|
1988
|
+
}
|
1989
|
+
}
|
1990
|
+
|
1991
|
+
function isCellPotentiallyEditable(row, cell) {
|
1992
|
+
// is the data for this row loaded?
|
1993
|
+
if (row < getDataLength() && !getDataItem(row)) {
|
1994
|
+
return false;
|
1995
|
+
}
|
1996
|
+
|
1997
|
+
// are we in the Add New row? can we create new from this cell?
|
1998
|
+
if (columns[cell].cannotTriggerInsert && row >= getDataLength()) {
|
1999
|
+
return false;
|
2000
|
+
}
|
2001
|
+
|
2002
|
+
// does this cell have an editor?
|
2003
|
+
if (!getEditor(row, cell)) {
|
2004
|
+
return false;
|
2005
|
+
}
|
2006
|
+
|
2007
|
+
return true;
|
2008
|
+
}
|
2009
|
+
|
2010
|
+
function makeActiveCellNormal() {
|
2011
|
+
if (!currentEditor) {
|
2012
|
+
return;
|
2013
|
+
}
|
2014
|
+
trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor});
|
2015
|
+
currentEditor.destroy();
|
2016
|
+
currentEditor = null;
|
2017
|
+
|
2018
|
+
if (activeCellNode) {
|
2019
|
+
var d = getDataItem(activeRow);
|
2020
|
+
$(activeCellNode).removeClass("editable invalid");
|
2021
|
+
if (d) {
|
2022
|
+
var column = columns[activeCell];
|
2023
|
+
var formatter = getFormatter(activeRow, column);
|
2024
|
+
activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, getDataItem(activeRow));
|
2025
|
+
invalidatePostProcessingResults(activeRow);
|
2026
|
+
}
|
2027
|
+
}
|
2028
|
+
|
2029
|
+
// if there previously was text selected on a page (such as selected text in the edit cell just removed),
|
2030
|
+
// IE can't set focus to anything else correctly
|
2031
|
+
if ($.browser.msie) {
|
2032
|
+
clearTextSelection();
|
2033
|
+
}
|
2034
|
+
|
2035
|
+
getEditorLock().deactivate(editController);
|
2036
|
+
}
|
2037
|
+
|
2038
|
+
function makeActiveCellEditable(editor) {
|
2039
|
+
if (!activeCellNode) {
|
2040
|
+
return;
|
2041
|
+
}
|
2042
|
+
if (!options.editable) {
|
2043
|
+
throw "Grid : makeActiveCellEditable : should never get called when options.editable is false";
|
2044
|
+
}
|
2045
|
+
|
2046
|
+
// cancel pending async call if there is one
|
2047
|
+
clearTimeout(h_editorLoader);
|
2048
|
+
|
2049
|
+
if (!isCellPotentiallyEditable(activeRow, activeCell)) {
|
2050
|
+
return;
|
2051
|
+
}
|
2052
|
+
|
2053
|
+
var columnDef = columns[activeCell];
|
2054
|
+
var item = getDataItem(activeRow);
|
2055
|
+
|
2056
|
+
if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) {
|
2057
|
+
setFocus();
|
2058
|
+
return;
|
2059
|
+
}
|
2060
|
+
|
2061
|
+
getEditorLock().activate(editController);
|
2062
|
+
$(activeCellNode).addClass("editable");
|
2063
|
+
|
2064
|
+
// don't clear the cell if a custom editor is passed through
|
2065
|
+
if (!editor) {
|
2066
|
+
activeCellNode.innerHTML = "";
|
2067
|
+
}
|
2068
|
+
|
2069
|
+
currentEditor = new (editor || getEditor(activeRow, activeCell))({
|
2070
|
+
grid: self,
|
2071
|
+
gridPosition: absBox($container[0]),
|
2072
|
+
position: absBox(activeCellNode),
|
2073
|
+
container: activeCellNode,
|
2074
|
+
column: columnDef,
|
2075
|
+
item: item || {},
|
2076
|
+
commitChanges: commitEditAndSetFocus,
|
2077
|
+
cancelChanges: cancelEditAndSetFocus
|
2078
|
+
});
|
2079
|
+
|
2080
|
+
if (item) {
|
2081
|
+
currentEditor.loadValue(item);
|
2082
|
+
}
|
2083
|
+
|
2084
|
+
serializedEditorValue = currentEditor.serializeValue();
|
2085
|
+
|
2086
|
+
if (currentEditor.position) {
|
2087
|
+
handleActiveCellPositionChange();
|
2088
|
+
}
|
2089
|
+
}
|
2090
|
+
|
2091
|
+
function commitEditAndSetFocus() {
|
2092
|
+
// if the commit fails, it would do so due to a validation error
|
2093
|
+
// if so, do not steal the focus from the editor
|
2094
|
+
if (getEditorLock().commitCurrentEdit()) {
|
2095
|
+
setFocus();
|
2096
|
+
if (options.autoEdit) {
|
2097
|
+
navigateDown();
|
2098
|
+
}
|
2099
|
+
}
|
2100
|
+
}
|
2101
|
+
|
2102
|
+
function cancelEditAndSetFocus() {
|
2103
|
+
if (getEditorLock().cancelCurrentEdit()) {
|
2104
|
+
setFocus();
|
2105
|
+
}
|
2106
|
+
}
|
2107
|
+
|
2108
|
+
function absBox(elem) {
|
2109
|
+
var box = {
|
2110
|
+
top: elem.offsetTop,
|
2111
|
+
left: elem.offsetLeft,
|
2112
|
+
bottom: 0,
|
2113
|
+
right: 0,
|
2114
|
+
width: $(elem).outerWidth(),
|
2115
|
+
height: $(elem).outerHeight(),
|
2116
|
+
visible: true};
|
2117
|
+
box.bottom = box.top + box.height;
|
2118
|
+
box.right = box.left + box.width;
|
2119
|
+
|
2120
|
+
// walk up the tree
|
2121
|
+
var offsetParent = elem.offsetParent;
|
2122
|
+
while ((elem = elem.parentNode) != document.body) {
|
2123
|
+
if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") {
|
2124
|
+
box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight;
|
2125
|
+
}
|
2126
|
+
|
2127
|
+
if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") {
|
2128
|
+
box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth;
|
2129
|
+
}
|
2130
|
+
|
2131
|
+
box.left -= elem.scrollLeft;
|
2132
|
+
box.top -= elem.scrollTop;
|
2133
|
+
|
2134
|
+
if (elem === offsetParent) {
|
2135
|
+
box.left += elem.offsetLeft;
|
2136
|
+
box.top += elem.offsetTop;
|
2137
|
+
offsetParent = elem.offsetParent;
|
2138
|
+
}
|
2139
|
+
|
2140
|
+
box.bottom = box.top + box.height;
|
2141
|
+
box.right = box.left + box.width;
|
2142
|
+
}
|
2143
|
+
|
2144
|
+
return box;
|
2145
|
+
}
|
2146
|
+
|
2147
|
+
function getActiveCellPosition() {
|
2148
|
+
return absBox(activeCellNode);
|
2149
|
+
}
|
2150
|
+
|
2151
|
+
function getGridPosition() {
|
2152
|
+
return absBox($container[0])
|
2153
|
+
}
|
2154
|
+
|
2155
|
+
function handleActiveCellPositionChange() {
|
2156
|
+
if (!activeCellNode) {
|
2157
|
+
return;
|
2158
|
+
}
|
2159
|
+
|
2160
|
+
trigger(self.onActiveCellPositionChanged, {});
|
2161
|
+
|
2162
|
+
if (currentEditor) {
|
2163
|
+
var cellBox = getActiveCellPosition();
|
2164
|
+
if (currentEditor.show && currentEditor.hide) {
|
2165
|
+
if (!cellBox.visible) {
|
2166
|
+
currentEditor.hide();
|
2167
|
+
} else {
|
2168
|
+
currentEditor.show();
|
2169
|
+
}
|
2170
|
+
}
|
2171
|
+
|
2172
|
+
if (currentEditor.position) {
|
2173
|
+
currentEditor.position(cellBox);
|
2174
|
+
}
|
2175
|
+
}
|
2176
|
+
}
|
2177
|
+
|
2178
|
+
function getCellEditor() {
|
2179
|
+
return currentEditor;
|
2180
|
+
}
|
2181
|
+
|
2182
|
+
function getActiveCell() {
|
2183
|
+
if (!activeCellNode) {
|
2184
|
+
return null;
|
2185
|
+
} else {
|
2186
|
+
return {row: activeRow, cell: activeCell};
|
2187
|
+
}
|
2188
|
+
}
|
2189
|
+
|
2190
|
+
function getActiveCellNode() {
|
2191
|
+
return activeCellNode;
|
2192
|
+
}
|
2193
|
+
|
2194
|
+
function scrollRowIntoView(row, doPaging) {
|
2195
|
+
var rowAtTop = row * options.rowHeight;
|
2196
|
+
var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0);
|
2197
|
+
|
2198
|
+
// need to page down?
|
2199
|
+
if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) {
|
2200
|
+
scrollTo(doPaging ? rowAtTop : rowAtBottom);
|
2201
|
+
render();
|
2202
|
+
}
|
2203
|
+
// or page up?
|
2204
|
+
else if (row * options.rowHeight < scrollTop + offset) {
|
2205
|
+
scrollTo(doPaging ? rowAtBottom : rowAtTop);
|
2206
|
+
render();
|
2207
|
+
}
|
2208
|
+
}
|
2209
|
+
|
2210
|
+
function getColspan(row, cell) {
|
2211
|
+
var metadata = data.getItemMetadata && data.getItemMetadata(row);
|
2212
|
+
if (!metadata || !metadata.columns) {
|
2213
|
+
return 1;
|
2214
|
+
}
|
2215
|
+
|
2216
|
+
var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell];
|
2217
|
+
var colspan = (columnData && columnData.colspan);
|
2218
|
+
if (colspan === "*") {
|
2219
|
+
colspan = columns.length - cell;
|
2220
|
+
}
|
2221
|
+
return (colspan || 1);
|
2222
|
+
}
|
2223
|
+
|
2224
|
+
function findFirstFocusableCell(row) {
|
2225
|
+
var cell = 0;
|
2226
|
+
while (cell < columns.length) {
|
2227
|
+
if (canCellBeActive(row, cell)) {
|
2228
|
+
return cell;
|
2229
|
+
}
|
2230
|
+
cell += getColspan(row, cell);
|
2231
|
+
}
|
2232
|
+
return null;
|
2233
|
+
}
|
2234
|
+
|
2235
|
+
function findLastFocusableCell(row) {
|
2236
|
+
var cell = 0;
|
2237
|
+
var lastFocusableCell = null;
|
2238
|
+
while (cell < columns.length) {
|
2239
|
+
if (canCellBeActive(row, cell)) {
|
2240
|
+
lastFocusableCell = cell;
|
2241
|
+
}
|
2242
|
+
cell += getColspan(row, cell);
|
2243
|
+
}
|
2244
|
+
return lastFocusableCell;
|
2245
|
+
}
|
2246
|
+
|
2247
|
+
function gotoRight(row, cell, posX) {
|
2248
|
+
if (cell >= columns.length) {
|
2249
|
+
return null;
|
2250
|
+
}
|
2251
|
+
|
2252
|
+
do {
|
2253
|
+
cell += getColspan(row, cell);
|
2254
|
+
}
|
2255
|
+
while (cell < columns.length && !canCellBeActive(row, cell));
|
2256
|
+
|
2257
|
+
if (cell < columns.length) {
|
2258
|
+
return {
|
2259
|
+
"row": row,
|
2260
|
+
"cell": cell,
|
2261
|
+
"posX": cell
|
2262
|
+
};
|
2263
|
+
}
|
2264
|
+
return null;
|
2265
|
+
}
|
2266
|
+
|
2267
|
+
function gotoLeft(row, cell, posX) {
|
2268
|
+
if (cell <= 0) {
|
2269
|
+
return null;
|
2270
|
+
}
|
2271
|
+
|
2272
|
+
var firstFocusableCell = findFirstFocusableCell(row);
|
2273
|
+
if (firstFocusableCell === null || firstFocusableCell >= cell) {
|
2274
|
+
return null;
|
2275
|
+
}
|
2276
|
+
|
2277
|
+
var prev = {
|
2278
|
+
"row": row,
|
2279
|
+
"cell": firstFocusableCell,
|
2280
|
+
"posX": firstFocusableCell
|
2281
|
+
};
|
2282
|
+
var pos;
|
2283
|
+
while (true) {
|
2284
|
+
pos = gotoRight(prev.row, prev.cell, prev.posX);
|
2285
|
+
if (!pos) {
|
2286
|
+
return null;
|
2287
|
+
}
|
2288
|
+
if (pos.cell >= cell) {
|
2289
|
+
return prev;
|
2290
|
+
}
|
2291
|
+
prev = pos;
|
2292
|
+
}
|
2293
|
+
}
|
2294
|
+
|
2295
|
+
function gotoDown(row, cell, posX) {
|
2296
|
+
var prevCell;
|
2297
|
+
while (true) {
|
2298
|
+
if (++row >= getDataLength() + (options.enableAddRow ? 1 : 0)) {
|
2299
|
+
return null;
|
2300
|
+
}
|
2301
|
+
|
2302
|
+
prevCell = cell = 0;
|
2303
|
+
while (cell <= posX) {
|
2304
|
+
prevCell = cell;
|
2305
|
+
cell += getColspan(row, cell);
|
2306
|
+
}
|
2307
|
+
|
2308
|
+
if (canCellBeActive(row, prevCell)) {
|
2309
|
+
return {
|
2310
|
+
"row": row,
|
2311
|
+
"cell": prevCell,
|
2312
|
+
"posX": posX
|
2313
|
+
};
|
2314
|
+
}
|
2315
|
+
}
|
2316
|
+
}
|
2317
|
+
|
2318
|
+
function gotoUp(row, cell, posX) {
|
2319
|
+
var prevCell;
|
2320
|
+
while (true) {
|
2321
|
+
if (--row < 0) {
|
2322
|
+
return null;
|
2323
|
+
}
|
2324
|
+
|
2325
|
+
prevCell = cell = 0;
|
2326
|
+
while (cell <= posX) {
|
2327
|
+
prevCell = cell;
|
2328
|
+
cell += getColspan(row, cell);
|
2329
|
+
}
|
2330
|
+
|
2331
|
+
if (canCellBeActive(row, prevCell)) {
|
2332
|
+
return {
|
2333
|
+
"row": row,
|
2334
|
+
"cell": prevCell,
|
2335
|
+
"posX": posX
|
2336
|
+
};
|
2337
|
+
}
|
2338
|
+
}
|
2339
|
+
}
|
2340
|
+
|
2341
|
+
function gotoNext(row, cell, posX) {
|
2342
|
+
var pos = gotoRight(row, cell, posX);
|
2343
|
+
if (pos) {
|
2344
|
+
return pos;
|
2345
|
+
}
|
2346
|
+
|
2347
|
+
var firstFocusableCell = null;
|
2348
|
+
while (++row < getDataLength() + (options.enableAddRow ? 1 : 0)) {
|
2349
|
+
firstFocusableCell = findFirstFocusableCell(row);
|
2350
|
+
if (firstFocusableCell !== null) {
|
2351
|
+
return {
|
2352
|
+
"row": row,
|
2353
|
+
"cell": firstFocusableCell,
|
2354
|
+
"posX": firstFocusableCell
|
2355
|
+
};
|
2356
|
+
}
|
2357
|
+
}
|
2358
|
+
return null;
|
2359
|
+
}
|
2360
|
+
|
2361
|
+
function gotoPrev(row, cell, posX) {
|
2362
|
+
var pos;
|
2363
|
+
var lastSelectableCell;
|
2364
|
+
while (!pos) {
|
2365
|
+
pos = gotoLeft(row, cell, posX);
|
2366
|
+
if (pos) {
|
2367
|
+
break;
|
2368
|
+
}
|
2369
|
+
if (--row < 0) {
|
2370
|
+
return null;
|
2371
|
+
}
|
2372
|
+
|
2373
|
+
cell = 0;
|
2374
|
+
lastSelectableCell = findLastFocusableCell(row);
|
2375
|
+
if (lastSelectableCell !== null) {
|
2376
|
+
pos = {
|
2377
|
+
"row": row,
|
2378
|
+
"cell": lastSelectableCell,
|
2379
|
+
"posX": lastSelectableCell
|
2380
|
+
};
|
2381
|
+
}
|
2382
|
+
}
|
2383
|
+
return pos;
|
2384
|
+
}
|
2385
|
+
|
2386
|
+
function navigateRight() {
|
2387
|
+
navigate("right");
|
2388
|
+
}
|
2389
|
+
|
2390
|
+
function navigateLeft() {
|
2391
|
+
navigate("left");
|
2392
|
+
}
|
2393
|
+
|
2394
|
+
function navigateDown() {
|
2395
|
+
navigate("down");
|
2396
|
+
}
|
2397
|
+
|
2398
|
+
function navigateUp() {
|
2399
|
+
navigate("up");
|
2400
|
+
}
|
2401
|
+
|
2402
|
+
function navigateNext() {
|
2403
|
+
navigate("next");
|
2404
|
+
}
|
2405
|
+
|
2406
|
+
function navigatePrev() {
|
2407
|
+
navigate("prev");
|
2408
|
+
}
|
2409
|
+
|
2410
|
+
function navigate(dir) {
|
2411
|
+
if (!activeCellNode || !options.enableCellNavigation) {
|
2412
|
+
return;
|
2413
|
+
}
|
2414
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
2415
|
+
return;
|
2416
|
+
}
|
2417
|
+
|
2418
|
+
var stepFunctions = {
|
2419
|
+
"up": gotoUp,
|
2420
|
+
"down": gotoDown,
|
2421
|
+
"left": gotoLeft,
|
2422
|
+
"right": gotoRight,
|
2423
|
+
"prev": gotoPrev,
|
2424
|
+
"next": gotoNext
|
2425
|
+
};
|
2426
|
+
var stepFn = stepFunctions[dir];
|
2427
|
+
var pos = stepFn(activeRow, activeCell, activePosX);
|
2428
|
+
if (pos) {
|
2429
|
+
var isAddNewRow = (pos.row == getDataLength());
|
2430
|
+
scrollRowIntoView(pos.row, !isAddNewRow);
|
2431
|
+
setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit);
|
2432
|
+
activePosX = pos.posX;
|
2433
|
+
} else {
|
2434
|
+
setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit);
|
2435
|
+
}
|
2436
|
+
}
|
2437
|
+
|
2438
|
+
function getCellNode(row, cell) {
|
2439
|
+
if (rowsCache[row]) {
|
2440
|
+
var cells = $(rowsCache[row]).children();
|
2441
|
+
var nodeCell;
|
2442
|
+
for (var i = 0; i < cells.length; i++) {
|
2443
|
+
nodeCell = getCellFromNode(cells[i]);
|
2444
|
+
if (nodeCell === cell) {
|
2445
|
+
return cells[i];
|
2446
|
+
} else if (nodeCell > cell) {
|
2447
|
+
return null;
|
2448
|
+
}
|
2449
|
+
|
2450
|
+
}
|
2451
|
+
}
|
2452
|
+
return null;
|
2453
|
+
}
|
2454
|
+
|
2455
|
+
function setActiveCell(row, cell) {
|
2456
|
+
if (!initialized) { return; }
|
2457
|
+
if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
|
2458
|
+
return;
|
2459
|
+
}
|
2460
|
+
|
2461
|
+
if (!options.enableCellNavigation) {
|
2462
|
+
return;
|
2463
|
+
}
|
2464
|
+
|
2465
|
+
scrollRowIntoView(row, false);
|
2466
|
+
setActiveCellInternal(getCellNode(row, cell), false);
|
2467
|
+
}
|
2468
|
+
|
2469
|
+
function canCellBeActive(row, cell) {
|
2470
|
+
if (!options.enableCellNavigation || row >= getDataLength() + (options.enableAddRow ? 1 : 0) ||
|
2471
|
+
row < 0 || cell >= columns.length || cell < 0) {
|
2472
|
+
return false;
|
2473
|
+
}
|
2474
|
+
|
2475
|
+
var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
|
2476
|
+
if (rowMetadata && typeof rowMetadata.focusable === "boolean") {
|
2477
|
+
return rowMetadata.focusable;
|
2478
|
+
}
|
2479
|
+
|
2480
|
+
var columnMetadata = rowMetadata && rowMetadata.columns;
|
2481
|
+
if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") {
|
2482
|
+
return columnMetadata[columns[cell].id].focusable;
|
2483
|
+
}
|
2484
|
+
if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") {
|
2485
|
+
return columnMetadata[cell].focusable;
|
2486
|
+
}
|
2487
|
+
|
2488
|
+
if (typeof columns[cell].focusable === "boolean") {
|
2489
|
+
return columns[cell].focusable;
|
2490
|
+
}
|
2491
|
+
|
2492
|
+
return true;
|
2493
|
+
}
|
2494
|
+
|
2495
|
+
function canCellBeSelected(row, cell) {
|
2496
|
+
if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) {
|
2497
|
+
return false;
|
2498
|
+
}
|
2499
|
+
|
2500
|
+
var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);
|
2501
|
+
if (rowMetadata && typeof rowMetadata.selectable === "boolean") {
|
2502
|
+
return rowMetadata.selectable;
|
2503
|
+
}
|
2504
|
+
|
2505
|
+
var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]);
|
2506
|
+
if (columnMetadata && typeof columnMetadata.selectable === "boolean") {
|
2507
|
+
return columnMetadata.selectable;
|
2508
|
+
}
|
2509
|
+
|
2510
|
+
if (typeof columns[cell].selectable === "boolean") {
|
2511
|
+
return columns[cell].selectable;
|
2512
|
+
}
|
2513
|
+
|
2514
|
+
return true;
|
2515
|
+
}
|
2516
|
+
|
2517
|
+
function gotoCell(row, cell, forceEdit) {
|
2518
|
+
if (!initialized) { return; }
|
2519
|
+
if (!canCellBeActive(row, cell)) {
|
2520
|
+
return;
|
2521
|
+
}
|
2522
|
+
|
2523
|
+
if (!getEditorLock().commitCurrentEdit()) {
|
2524
|
+
return;
|
2525
|
+
}
|
2526
|
+
|
2527
|
+
scrollRowIntoView(row, false);
|
2528
|
+
|
2529
|
+
var newCell = getCellNode(row, cell);
|
2530
|
+
|
2531
|
+
// if selecting the 'add new' row, start editing right away
|
2532
|
+
setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit);
|
2533
|
+
|
2534
|
+
// if no editor was created, set the focus back on the grid
|
2535
|
+
if (!currentEditor) {
|
2536
|
+
setFocus();
|
2537
|
+
}
|
2538
|
+
}
|
2539
|
+
|
2540
|
+
|
2541
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
2542
|
+
// IEditor implementation for the editor lock
|
2543
|
+
|
2544
|
+
function commitCurrentEdit() {
|
2545
|
+
var item = getDataItem(activeRow);
|
2546
|
+
var column = columns[activeCell];
|
2547
|
+
|
2548
|
+
if (currentEditor) {
|
2549
|
+
if (currentEditor.isValueChanged()) {
|
2550
|
+
var validationResults = currentEditor.validate();
|
2551
|
+
|
2552
|
+
if (validationResults.valid) {
|
2553
|
+
if (activeRow < getDataLength()) {
|
2554
|
+
var editCommand = {
|
2555
|
+
row: activeRow,
|
2556
|
+
cell: activeCell,
|
2557
|
+
editor: currentEditor,
|
2558
|
+
serializedValue: currentEditor.serializeValue(),
|
2559
|
+
prevSerializedValue: serializedEditorValue,
|
2560
|
+
execute: function () {
|
2561
|
+
this.editor.applyValue(item, this.serializedValue);
|
2562
|
+
updateRow(this.row);
|
2563
|
+
},
|
2564
|
+
undo: function () {
|
2565
|
+
this.editor.applyValue(item, this.prevSerializedValue);
|
2566
|
+
updateRow(this.row);
|
2567
|
+
}
|
2568
|
+
};
|
2569
|
+
|
2570
|
+
if (options.editCommandHandler) {
|
2571
|
+
makeActiveCellNormal();
|
2572
|
+
options.editCommandHandler(item, column, editCommand);
|
2573
|
+
} else {
|
2574
|
+
editCommand.execute();
|
2575
|
+
makeActiveCellNormal();
|
2576
|
+
}
|
2577
|
+
|
2578
|
+
trigger(self.onCellChange, {
|
2579
|
+
row: activeRow,
|
2580
|
+
cell: activeCell,
|
2581
|
+
item: item
|
2582
|
+
});
|
2583
|
+
} else {
|
2584
|
+
var newItem = {};
|
2585
|
+
currentEditor.applyValue(newItem, currentEditor.serializeValue());
|
2586
|
+
makeActiveCellNormal();
|
2587
|
+
trigger(self.onAddNewRow, {item: newItem, column: column});
|
2588
|
+
}
|
2589
|
+
|
2590
|
+
// check whether the lock has been re-acquired by event handlers
|
2591
|
+
return !getEditorLock().isActive();
|
2592
|
+
} else {
|
2593
|
+
// TODO: remove and put in onValidationError handlers in examples
|
2594
|
+
$(activeCellNode).addClass("invalid");
|
2595
|
+
$(activeCellNode).stop(true, true).effect("highlight", {color: "red"}, 300);
|
2596
|
+
|
2597
|
+
trigger(self.onValidationError, {
|
2598
|
+
editor: currentEditor,
|
2599
|
+
cellNode: activeCellNode,
|
2600
|
+
validationResults: validationResults,
|
2601
|
+
row: activeRow,
|
2602
|
+
cell: activeCell,
|
2603
|
+
column: column
|
2604
|
+
});
|
2605
|
+
|
2606
|
+
currentEditor.focus();
|
2607
|
+
return false;
|
2608
|
+
}
|
2609
|
+
}
|
2610
|
+
|
2611
|
+
makeActiveCellNormal();
|
2612
|
+
}
|
2613
|
+
return true;
|
2614
|
+
}
|
2615
|
+
|
2616
|
+
function cancelCurrentEdit() {
|
2617
|
+
makeActiveCellNormal();
|
2618
|
+
return true;
|
2619
|
+
}
|
2620
|
+
|
2621
|
+
function rowsToRanges(rows) {
|
2622
|
+
var ranges = [];
|
2623
|
+
var lastCell = columns.length - 1;
|
2624
|
+
for (var i = 0; i < rows.length; i++) {
|
2625
|
+
ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
|
2626
|
+
}
|
2627
|
+
return ranges;
|
2628
|
+
}
|
2629
|
+
|
2630
|
+
function getSelectedRows() {
|
2631
|
+
if (!selectionModel) {
|
2632
|
+
throw "Selection model is not set";
|
2633
|
+
}
|
2634
|
+
return selectedRows;
|
2635
|
+
}
|
2636
|
+
|
2637
|
+
function setSelectedRows(rows) {
|
2638
|
+
if (!selectionModel) {
|
2639
|
+
throw "Selection model is not set";
|
2640
|
+
}
|
2641
|
+
selectionModel.setSelectedRanges(rowsToRanges(rows));
|
2642
|
+
}
|
2643
|
+
|
2644
|
+
|
2645
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
2646
|
+
// Debug
|
2647
|
+
|
2648
|
+
this.debug = function () {
|
2649
|
+
var s = "";
|
2650
|
+
|
2651
|
+
s += ("\n" + "counter_rows_rendered: " + counter_rows_rendered);
|
2652
|
+
s += ("\n" + "counter_rows_removed: " + counter_rows_removed);
|
2653
|
+
s += ("\n" + "renderedRows: " + renderedRows);
|
2654
|
+
s += ("\n" + "numVisibleRows: " + numVisibleRows);
|
2655
|
+
s += ("\n" + "maxSupportedCssHeight: " + maxSupportedCssHeight);
|
2656
|
+
s += ("\n" + "n(umber of pages): " + n);
|
2657
|
+
s += ("\n" + "(current) page: " + page);
|
2658
|
+
s += ("\n" + "page height (ph): " + ph);
|
2659
|
+
s += ("\n" + "scrollDir: " + scrollDir);
|
2660
|
+
|
2661
|
+
alert(s);
|
2662
|
+
};
|
2663
|
+
|
2664
|
+
// a debug helper to be able to access private members
|
2665
|
+
this.eval = function (expr) {
|
2666
|
+
return eval(expr);
|
2667
|
+
};
|
2668
|
+
|
2669
|
+
//////////////////////////////////////////////////////////////////////////////////////////////
|
2670
|
+
// Public API
|
2671
|
+
|
2672
|
+
$.extend(this, {
|
2673
|
+
"slickGridVersion": "2.0",
|
2674
|
+
|
2675
|
+
// Events
|
2676
|
+
"onScroll": new Slick.Event(),
|
2677
|
+
"onSort": new Slick.Event(),
|
2678
|
+
"onHeaderContextMenu": new Slick.Event(),
|
2679
|
+
"onHeaderClick": new Slick.Event(),
|
2680
|
+
"onMouseEnter": new Slick.Event(),
|
2681
|
+
"onMouseLeave": new Slick.Event(),
|
2682
|
+
"onClick": new Slick.Event(),
|
2683
|
+
"onDblClick": new Slick.Event(),
|
2684
|
+
"onContextMenu": new Slick.Event(),
|
2685
|
+
"onKeyDown": new Slick.Event(),
|
2686
|
+
"onAddNewRow": new Slick.Event(),
|
2687
|
+
"onValidationError": new Slick.Event(),
|
2688
|
+
"onViewportChanged": new Slick.Event(),
|
2689
|
+
"onColumnsReordered": new Slick.Event(),
|
2690
|
+
"onColumnsResized": new Slick.Event(),
|
2691
|
+
"onCellChange": new Slick.Event(),
|
2692
|
+
"onBeforeEditCell": new Slick.Event(),
|
2693
|
+
"onBeforeCellEditorDestroy": new Slick.Event(),
|
2694
|
+
"onBeforeDestroy": new Slick.Event(),
|
2695
|
+
"onActiveCellChanged": new Slick.Event(),
|
2696
|
+
"onActiveCellPositionChanged": new Slick.Event(),
|
2697
|
+
"onDragInit": new Slick.Event(),
|
2698
|
+
"onDragStart": new Slick.Event(),
|
2699
|
+
"onDrag": new Slick.Event(),
|
2700
|
+
"onDragEnd": new Slick.Event(),
|
2701
|
+
"onSelectedRowsChanged": new Slick.Event(),
|
2702
|
+
"onCellCssStylesChanged": new Slick.Event(),
|
2703
|
+
|
2704
|
+
// Methods
|
2705
|
+
"registerPlugin": registerPlugin,
|
2706
|
+
"unregisterPlugin": unregisterPlugin,
|
2707
|
+
"getColumns": getColumns,
|
2708
|
+
"setColumns": setColumns,
|
2709
|
+
"getColumnIndex": getColumnIndex,
|
2710
|
+
"updateColumnHeader": updateColumnHeader,
|
2711
|
+
"setSortColumn": setSortColumn,
|
2712
|
+
"setSortColumns": setSortColumns,
|
2713
|
+
"autosizeColumns": autosizeColumns,
|
2714
|
+
"getOptions": getOptions,
|
2715
|
+
"setOptions": setOptions,
|
2716
|
+
"getData": getData,
|
2717
|
+
"getDataLength": getDataLength,
|
2718
|
+
"getDataItem": getDataItem,
|
2719
|
+
"setData": setData,
|
2720
|
+
"getSelectionModel": getSelectionModel,
|
2721
|
+
"setSelectionModel": setSelectionModel,
|
2722
|
+
"getSelectedRows": getSelectedRows,
|
2723
|
+
"setSelectedRows": setSelectedRows,
|
2724
|
+
|
2725
|
+
"render": render,
|
2726
|
+
"invalidate": invalidate,
|
2727
|
+
"invalidateRow": invalidateRow,
|
2728
|
+
"invalidateRows": invalidateRows,
|
2729
|
+
"invalidateAllRows": invalidateAllRows,
|
2730
|
+
"updateCell": updateCell,
|
2731
|
+
"updateRow": updateRow,
|
2732
|
+
"getViewport": getVisibleRange,
|
2733
|
+
"getRenderedRange": getRenderedRange,
|
2734
|
+
"resizeCanvas": resizeCanvas,
|
2735
|
+
"updateRowCount": updateRowCount,
|
2736
|
+
"scrollRowIntoView": scrollRowIntoView,
|
2737
|
+
"getCanvasNode": getCanvasNode,
|
2738
|
+
|
2739
|
+
"getCellFromPoint": getCellFromPoint,
|
2740
|
+
"getCellFromEvent": getCellFromEvent,
|
2741
|
+
"getActiveCell": getActiveCell,
|
2742
|
+
"setActiveCell": setActiveCell,
|
2743
|
+
"getActiveCellNode": getActiveCellNode,
|
2744
|
+
"getActiveCellPosition": getActiveCellPosition,
|
2745
|
+
"resetActiveCell": resetActiveCell,
|
2746
|
+
"editActiveCell": makeActiveCellEditable,
|
2747
|
+
"getCellEditor": getCellEditor,
|
2748
|
+
"getCellNode": getCellNode,
|
2749
|
+
"getCellNodeBox": getCellNodeBox,
|
2750
|
+
"canCellBeSelected": canCellBeSelected,
|
2751
|
+
"canCellBeActive": canCellBeActive,
|
2752
|
+
"navigatePrev": navigatePrev,
|
2753
|
+
"navigateNext": navigateNext,
|
2754
|
+
"navigateUp": navigateUp,
|
2755
|
+
"navigateDown": navigateDown,
|
2756
|
+
"navigateLeft": navigateLeft,
|
2757
|
+
"navigateRight": navigateRight,
|
2758
|
+
"gotoCell": gotoCell,
|
2759
|
+
"getTopPanel": getTopPanel,
|
2760
|
+
"showTopPanel": showTopPanel,
|
2761
|
+
"hideTopPanel": hideTopPanel,
|
2762
|
+
"showHeaderRowColumns": showHeaderRowColumns,
|
2763
|
+
"hideHeaderRowColumns": hideHeaderRowColumns,
|
2764
|
+
"getHeaderRow": getHeaderRow,
|
2765
|
+
"getHeaderRowColumn": getHeaderRowColumn,
|
2766
|
+
"getGridPosition": getGridPosition,
|
2767
|
+
"flashCell": flashCell,
|
2768
|
+
"addCellCssStyles": addCellCssStyles,
|
2769
|
+
"setCellCssStyles": setCellCssStyles,
|
2770
|
+
"removeCellCssStyles": removeCellCssStyles,
|
2771
|
+
"getCellCssStyles": getCellCssStyles,
|
2772
|
+
|
2773
|
+
"init": finishInitialization,
|
2774
|
+
"destroy": destroy,
|
2775
|
+
|
2776
|
+
// IEditor implementation
|
2777
|
+
"getEditorLock": getEditorLock,
|
2778
|
+
"getEditController": getEditController
|
2779
|
+
});
|
2780
|
+
|
2781
|
+
init();
|
2782
|
+
}
|
2783
|
+
}(jQuery));
|