--- /dev/null
+/**\r
+ * @license\r
+ * (c) 2009-2012 Michael Leibman\r
+ * michael{dot}leibman{at}gmail{dot}com\r
+ * http://github.com/mleibman/slickgrid\r
+ *\r
+ * Distributed under MIT license.\r
+ * All rights reserved.\r
+ *\r
+ * SlickGrid v2.1\r
+ *\r
+ * NOTES:\r
+ * Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.\r
+ * This increases the speed dramatically, but can only be done safely because there are no event handlers\r
+ * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy()\r
+ * and do proper cleanup.\r
+ */\r
+\r
+// make sure required JavaScript modules are loaded\r
+if (typeof jQuery === "undefined") {\r
+ throw "SlickGrid requires jquery module to be loaded";\r
+}\r
+if (!jQuery.fn.drag) {\r
+ throw "SlickGrid requires jquery.event.drag module to be loaded";\r
+}\r
+if (typeof Slick === "undefined") {\r
+ throw "slick.core.js not loaded";\r
+}\r
+\r
+\r
+(function ($) {\r
+ // Slick.Grid\r
+ $.extend(true, window, {\r
+ Slick: {\r
+ Grid: SlickGrid\r
+ }\r
+ });\r
+\r
+ // shared across all grids on the page\r
+ var scrollbarDimensions;\r
+ var maxSupportedCssHeight; // browser's breaking point\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // SlickGrid class implementation (available as Slick.Grid)\r
+\r
+ /**\r
+ * Creates a new instance of the grid.\r
+ * @class SlickGrid\r
+ * @constructor\r
+ * @param {Node} container Container node to create the grid in.\r
+ * @param {Array,Object} data An array of objects for databinding.\r
+ * @param {Array} columns An array of column definitions.\r
+ * @param {Object} options Grid options.\r
+ **/\r
+ function SlickGrid(container, data, columns, options) {\r
+ // settings\r
+ var defaults = {\r
+ explicitInitialization: false,\r
+ rowHeight: 25,\r
+ defaultColumnWidth: 80,\r
+ enableAddRow: false,\r
+ leaveSpaceForNewRows: false,\r
+ editable: false,\r
+ autoEdit: true,\r
+ enableCellNavigation: true,\r
+ enableColumnReorder: true,\r
+ asyncEditorLoading: false,\r
+ asyncEditorLoadDelay: 100,\r
+ forceFitColumns: false,\r
+ enableAsyncPostRender: false,\r
+ asyncPostRenderDelay: 50,\r
+ autoHeight: false,\r
+ editorLock: Slick.GlobalEditorLock,\r
+ showHeaderRow: false,\r
+ headerRowHeight: 25,\r
+ showTopPanel: false,\r
+ topPanelHeight: 25,\r
+ formatterFactory: null,\r
+ editorFactory: null,\r
+ cellFlashingCssClass: "flashing",\r
+ selectedCellCssClass: "selected",\r
+ multiSelect: true,\r
+ enableTextSelectionOnCells: false,\r
+ dataItemColumnValueExtractor: null,\r
+ fullWidthRows: false,\r
+ multiColumnSort: false,\r
+ defaultFormatter: defaultFormatter,\r
+ forceSyncScrolling: false\r
+ };\r
+\r
+ var columnDefaults = {\r
+ name: "",\r
+ resizable: true,\r
+ sortable: false,\r
+ minWidth: 30,\r
+ rerenderOnResize: false,\r
+ headerCssClass: null,\r
+ defaultSortAsc: true,\r
+ focusable: true,\r
+ selectable: true\r
+ };\r
+\r
+ // scroller\r
+ var th; // virtual height\r
+ var h; // real scrollable height\r
+ var ph; // page height\r
+ var n; // number of pages\r
+ var cj; // "jumpiness" coefficient\r
+\r
+ var page = 0; // current page\r
+ var offset = 0; // current page offset\r
+ var vScrollDir = 1;\r
+\r
+ // private\r
+ var initialized = false;\r
+ var $container;\r
+ var uid = "slickgrid_" + Math.round(1000000 * Math.random());\r
+ var self = this;\r
+ var $focusSink, $focusSink2;\r
+ var $headerScroller;\r
+ var $headers;\r
+ var $headerRow, $headerRowScroller, $headerRowSpacer;\r
+ var $topPanelScroller;\r
+ var $topPanel;\r
+ var $viewport;\r
+ var $canvas;\r
+ var $style;\r
+ var $boundAncestors;\r
+ var stylesheet, columnCssRulesL, columnCssRulesR;\r
+ var viewportH, viewportW;\r
+ var canvasWidth;\r
+ var viewportHasHScroll, viewportHasVScroll;\r
+ var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding\r
+ cellWidthDiff = 0, cellHeightDiff = 0;\r
+ var absoluteColumnMinWidth;\r
+ var numberOfRows = 0;\r
+\r
+ var tabbingDirection = 1;\r
+ var activePosX;\r
+ var activeRow, activeCell;\r
+ var activeCellNode = null;\r
+ var currentEditor = null;\r
+ var serializedEditorValue;\r
+ var editController;\r
+\r
+ var rowsCache = {};\r
+ var renderedRows = 0;\r
+ var numVisibleRows;\r
+ var prevScrollTop = 0;\r
+ var scrollTop = 0;\r
+ var lastRenderedScrollTop = 0;\r
+ var lastRenderedScrollLeft = 0;\r
+ var prevScrollLeft = 0;\r
+ var scrollLeft = 0;\r
+\r
+ var selectionModel;\r
+ var selectedRows = [];\r
+\r
+ var plugins = [];\r
+ var cellCssClasses = {};\r
+\r
+ var columnsById = {};\r
+ var sortColumns = [];\r
+ var columnPosLeft = [];\r
+ var columnPosRight = [];\r
+\r
+\r
+ // async call handles\r
+ var h_editorLoader = null;\r
+ var h_render = null;\r
+ var h_postrender = null;\r
+ var postProcessedRows = {};\r
+ var postProcessToRow = null;\r
+ var postProcessFromRow = null;\r
+\r
+ // perf counters\r
+ var counter_rows_rendered = 0;\r
+ var counter_rows_removed = 0;\r
+\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Initialization\r
+\r
+ function init() {\r
+ $container = $(container);\r
+ if ($container.length < 1) {\r
+ throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM.");\r
+ }\r
+\r
+ // calculate these only once and share between grid instances\r
+ maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight();\r
+ scrollbarDimensions = scrollbarDimensions || measureScrollbar();\r
+\r
+ options = $.extend({}, defaults, options);\r
+ validateAndEnforceOptions();\r
+ columnDefaults.width = options.defaultColumnWidth;\r
+\r
+ columnsById = {};\r
+ for (var i = 0; i < columns.length; i++) {\r
+ var m = columns[i] = $.extend({}, columnDefaults, columns[i]);\r
+ columnsById[m.id] = i;\r
+ if (m.minWidth && m.width < m.minWidth) {\r
+ m.width = m.minWidth;\r
+ }\r
+ if (m.maxWidth && m.width > m.maxWidth) {\r
+ m.width = m.maxWidth;\r
+ }\r
+ }\r
+\r
+ // validate loaded JavaScript modules against requested options\r
+ if (options.enableColumnReorder && !$.fn.sortable) {\r
+ throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded");\r
+ }\r
+\r
+ editController = {\r
+ "commitCurrentEdit": commitCurrentEdit,\r
+ "cancelCurrentEdit": cancelCurrentEdit\r
+ };\r
+\r
+ $container\r
+ .empty()\r
+ .css("overflow", "hidden")\r
+ .css("outline", 0)\r
+ .addClass(uid)\r
+ .addClass("ui-widget");\r
+\r
+ // set up a positioning container if needed\r
+ if (!/relative|absolute|fixed/.test($container.css("position"))) {\r
+ $container.css("position", "relative");\r
+ }\r
+\r
+ $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);\r
+\r
+ $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);\r
+ $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);\r
+ $headers.width(getHeadersWidth());\r
+\r
+ $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);\r
+ $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);\r
+ $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")\r
+ .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")\r
+ .appendTo($headerRowScroller);\r
+\r
+ $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);\r
+ $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);\r
+\r
+ if (!options.showTopPanel) {\r
+ $topPanelScroller.hide();\r
+ }\r
+\r
+ if (!options.showHeaderRow) {\r
+ $headerRowScroller.hide();\r
+ }\r
+\r
+ $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);\r
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");\r
+\r
+ $canvas = $("<div class='grid-canvas' />").appendTo($viewport);\r
+\r
+ $focusSink2 = $focusSink.clone().appendTo($container);\r
+\r
+ if (!options.explicitInitialization) {\r
+ finishInitialization();\r
+ }\r
+ }\r
+\r
+ function finishInitialization() {\r
+ if (!initialized) {\r
+ initialized = true;\r
+\r
+ viewportW = parseFloat($.css($container[0], "width", true));\r
+\r
+ // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?)\r
+ // calculate the diff so we can set consistent sizes\r
+ measureCellPaddingAndBorder();\r
+\r
+ // for usability reasons, all text selection in SlickGrid is disabled\r
+ // with the exception of input and textarea elements (selection must\r
+ // be enabled there so that editors work as expected); note that\r
+ // selection in grid cells (grid body) is already unavailable in\r
+ // all browsers except IE\r
+ disableSelection($headers); // disable all text selection in header (including input and textarea)\r
+\r
+ if (!options.enableTextSelectionOnCells) {\r
+ // disable text selection in grid cells except in input and textarea elements\r
+ // (this is IE-specific, because selectstart event will only fire in IE)\r
+ $viewport.bind("selectstart.ui", function (event) {\r
+ return $(event.target).is("input,textarea");\r
+ });\r
+ }\r
+\r
+ updateColumnCaches();\r
+ createColumnHeaders();\r
+ setupColumnSort();\r
+ createCssRules();\r
+ resizeCanvas();\r
+ bindAncestorScrollEvents();\r
+\r
+ $container\r
+ .bind("resize.slickgrid", resizeCanvas);\r
+ $viewport\r
+ .bind("scroll", handleScroll);\r
+ $headerScroller\r
+ .bind("contextmenu", handleHeaderContextMenu)\r
+ .bind("click", handleHeaderClick)\r
+ .delegate(".slick-header-column", "mouseenter", handleHeaderMouseEnter)\r
+ .delegate(".slick-header-column", "mouseleave", handleHeaderMouseLeave);\r
+ $headerRowScroller\r
+ .bind("scroll", handleHeaderRowScroll);\r
+ $focusSink.add($focusSink2)\r
+ .bind("keydown", handleKeyDown);\r
+ $canvas\r
+ .bind("keydown", handleKeyDown)\r
+ .bind("click", handleClick)\r
+ .bind("dblclick", handleDblClick)\r
+ .bind("contextmenu", handleContextMenu)\r
+ .bind("draginit", handleDragInit)\r
+ .bind("dragstart", {distance: 3}, handleDragStart)\r
+ .bind("drag", handleDrag)\r
+ .bind("dragend", handleDragEnd)\r
+ .delegate(".slick-cell", "mouseenter", handleMouseEnter)\r
+ .delegate(".slick-cell", "mouseleave", handleMouseLeave);\r
+ }\r
+ }\r
+\r
+ function registerPlugin(plugin) {\r
+ plugins.unshift(plugin);\r
+ plugin.init(self);\r
+ }\r
+\r
+ function unregisterPlugin(plugin) {\r
+ for (var i = plugins.length; i >= 0; i--) {\r
+ if (plugins[i] === plugin) {\r
+ if (plugins[i].destroy) {\r
+ plugins[i].destroy();\r
+ }\r
+ plugins.splice(i, 1);\r
+ break;\r
+ }\r
+ }\r
+ }\r
+\r
+ function setSelectionModel(model) {\r
+ if (selectionModel) {\r
+ selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged);\r
+ if (selectionModel.destroy) {\r
+ selectionModel.destroy();\r
+ }\r
+ }\r
+\r
+ selectionModel = model;\r
+ if (selectionModel) {\r
+ selectionModel.init(self);\r
+ selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged);\r
+ }\r
+ }\r
+\r
+ function getSelectionModel() {\r
+ return selectionModel;\r
+ }\r
+\r
+ function getCanvasNode() {\r
+ return $canvas[0];\r
+ }\r
+\r
+ function measureScrollbar() {\r
+ var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");\r
+ var dim = {\r
+ width: $c.width() - $c[0].clientWidth,\r
+ height: $c.height() - $c[0].clientHeight\r
+ };\r
+ $c.remove();\r
+ return dim;\r
+ }\r
+\r
+ function getHeadersWidth() {\r
+ var headersWidth = 0;\r
+ for (var i = 0, ii = columns.length; i < ii; i++) {\r
+ var width = columns[i].width;\r
+ headersWidth += width;\r
+ }\r
+ headersWidth += scrollbarDimensions.width;\r
+ return Math.max(headersWidth, viewportW) + 1000;\r
+ }\r
+\r
+ function getCanvasWidth() {\r
+ var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;\r
+ var rowWidth = 0;\r
+ var i = columns.length;\r
+ while (i--) {\r
+ rowWidth += columns[i].width;\r
+ }\r
+ return options.fullWidthRows ? Math.max(rowWidth, availableWidth) : rowWidth;\r
+ }\r
+\r
+ function updateCanvasWidth(forceColumnWidthsUpdate) {\r
+ var oldCanvasWidth = canvasWidth;\r
+ canvasWidth = getCanvasWidth();\r
+\r
+ if (canvasWidth != oldCanvasWidth) {\r
+ $canvas.width(canvasWidth);\r
+ $headerRow.width(canvasWidth);\r
+ $headers.width(getHeadersWidth());\r
+ viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width);\r
+ }\r
+\r
+ $headerRowSpacer.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0));\r
+\r
+ if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {\r
+ applyColumnWidths();\r
+ }\r
+ }\r
+\r
+ function disableSelection($target) {\r
+ if ($target && $target.jquery) {\r
+ $target\r
+ .attr("unselectable", "on")\r
+ .css("MozUserSelect", "none")\r
+ .bind("selectstart.ui", function () {\r
+ return false;\r
+ }); // from jquery:ui.core.js 1.7.2\r
+ }\r
+ }\r
+\r
+ function getMaxSupportedCssHeight() {\r
+ var supportedHeight = 1000000;\r
+ // FF reports the height back but still renders blank after ~6M px\r
+ var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000;\r
+ var div = $("<div style='display:none' />").appendTo(document.body);\r
+\r
+ while (true) {\r
+ var test = supportedHeight * 2;\r
+ div.css("height", test);\r
+ if (test > testUpTo || div.height() !== test) {\r
+ break;\r
+ } else {\r
+ supportedHeight = test;\r
+ }\r
+ }\r
+\r
+ div.remove();\r
+ return supportedHeight;\r
+ }\r
+\r
+ // TODO: this is static. need to handle page mutation.\r
+ function bindAncestorScrollEvents() {\r
+ var elem = $canvas[0];\r
+ while ((elem = elem.parentNode) != document.body && elem != null) {\r
+ // bind to scroll containers only\r
+ if (elem == $viewport[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) {\r
+ var $elem = $(elem);\r
+ if (!$boundAncestors) {\r
+ $boundAncestors = $elem;\r
+ } else {\r
+ $boundAncestors = $boundAncestors.add($elem);\r
+ }\r
+ $elem.bind("scroll." + uid, handleActiveCellPositionChange);\r
+ }\r
+ }\r
+ }\r
+\r
+ function unbindAncestorScrollEvents() {\r
+ if (!$boundAncestors) {\r
+ return;\r
+ }\r
+ $boundAncestors.unbind("scroll." + uid);\r
+ $boundAncestors = null;\r
+ }\r
+\r
+ function updateColumnHeader(columnId, title, toolTip) {\r
+ if (!initialized) { return; }\r
+ var idx = getColumnIndex(columnId);\r
+ if (idx == null) {\r
+ return;\r
+ }\r
+\r
+ var columnDef = columns[idx];\r
+ var $header = $headers.children().eq(idx);\r
+ if ($header) {\r
+ if (title !== undefined) {\r
+ columns[idx].name = title;\r
+ }\r
+ if (toolTip !== undefined) {\r
+ columns[idx].toolTip = toolTip;\r
+ }\r
+\r
+ trigger(self.onBeforeHeaderCellDestroy, {\r
+ "node": $header[0],\r
+ "column": columnDef\r
+ });\r
+\r
+ $header\r
+ .attr("title", toolTip || "")\r
+ .children().eq(0).html(title);\r
+\r
+ trigger(self.onHeaderCellRendered, {\r
+ "node": $header[0],\r
+ "column": columnDef\r
+ });\r
+ }\r
+ }\r
+\r
+ function getHeaderRow() {\r
+ return $headerRow[0];\r
+ }\r
+\r
+ function getHeaderRowColumn(columnId) {\r
+ var idx = getColumnIndex(columnId);\r
+ var $header = $headerRow.children().eq(idx);\r
+ return $header && $header[0];\r
+ }\r
+\r
+ function createColumnHeaders() {\r
+ function onMouseEnter() {\r
+ $(this).addClass("ui-state-hover");\r
+ }\r
+\r
+ function onMouseLeave() {\r
+ $(this).removeClass("ui-state-hover");\r
+ }\r
+\r
+ $headers.find(".slick-header-column")\r
+ .each(function() {\r
+ var columnDef = $(this).data("column");\r
+ if (columnDef) {\r
+ trigger(self.onBeforeHeaderCellDestroy, {\r
+ "node": this,\r
+ "column": columnDef\r
+ });\r
+ }\r
+ });\r
+ $headers.empty();\r
+ $headers.width(getHeadersWidth());\r
+\r
+ $headerRow.find(".slick-headerrow-column")\r
+ .each(function() {\r
+ var columnDef = $(this).data("column");\r
+ if (columnDef) {\r
+ trigger(self.onBeforeHeaderRowCellDestroy, {\r
+ "node": this,\r
+ "column": columnDef\r
+ });\r
+ }\r
+ });\r
+ $headerRow.empty();\r
+\r
+ for (var i = 0; i < columns.length; i++) {\r
+ var m = columns[i];\r
+\r
+ var header = $("<div class='ui-state-default slick-header-column' />")\r
+ .html("<span class='slick-column-name'>" + m.name + "</span>")\r
+ .width(m.width - headerColumnWidthDiff)\r
+ .attr("id", "" + uid + m.id)\r
+ .attr("title", m.toolTip || "")\r
+ .data("column", m)\r
+ .addClass(m.headerCssClass || "")\r
+ .appendTo($headers);\r
+\r
+ if (options.enableColumnReorder || m.sortable) {\r
+ header\r
+ .on('mouseenter', onMouseEnter)\r
+ .on('mouseleave', onMouseLeave);\r
+ }\r
+\r
+ if (m.sortable) {\r
+ header.addClass("slick-header-sortable");\r
+ header.append("<span class='slick-sort-indicator' />");\r
+ }\r
+\r
+ trigger(self.onHeaderCellRendered, {\r
+ "node": header[0],\r
+ "column": m\r
+ });\r
+\r
+ if (options.showHeaderRow) {\r
+ var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")\r
+ .data("column", m)\r
+ .appendTo($headerRow);\r
+\r
+ trigger(self.onHeaderRowCellRendered, {\r
+ "node": headerRowCell[0],\r
+ "column": m\r
+ });\r
+ }\r
+ }\r
+\r
+ setSortColumns(sortColumns);\r
+ setupColumnResize();\r
+ if (options.enableColumnReorder) {\r
+ setupColumnReorder();\r
+ }\r
+ }\r
+\r
+ function setupColumnSort() {\r
+ $headers.click(function (e) {\r
+ // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)\r
+ e.metaKey = e.metaKey || e.ctrlKey;\r
+\r
+ if ($(e.target).hasClass("slick-resizable-handle")) {\r
+ return;\r
+ }\r
+\r
+ var $col = $(e.target).closest(".slick-header-column");\r
+ if (!$col.length) {\r
+ return;\r
+ }\r
+\r
+ var column = $col.data("column");\r
+ if (column.sortable) {\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ return;\r
+ }\r
+\r
+ var sortOpts = null;\r
+ var i = 0;\r
+ for (; i < sortColumns.length; i++) {\r
+ if (sortColumns[i].columnId == column.id) {\r
+ sortOpts = sortColumns[i];\r
+ sortOpts.sortAsc = !sortOpts.sortAsc;\r
+ break;\r
+ }\r
+ }\r
+\r
+ if (e.metaKey && options.multiColumnSort) {\r
+ if (sortOpts) {\r
+ sortColumns.splice(i, 1);\r
+ }\r
+ }\r
+ else {\r
+ if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {\r
+ sortColumns = [];\r
+ }\r
+\r
+ if (!sortOpts) {\r
+ sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };\r
+ sortColumns.push(sortOpts);\r
+ } else if (sortColumns.length == 0) {\r
+ sortColumns.push(sortOpts);\r
+ }\r
+ }\r
+\r
+ setSortColumns(sortColumns);\r
+\r
+ if (!options.multiColumnSort) {\r
+ trigger(self.onSort, {\r
+ multiColumnSort: false,\r
+ sortCol: column,\r
+ sortAsc: sortOpts.sortAsc}, e);\r
+ } else {\r
+ trigger(self.onSort, {\r
+ multiColumnSort: true,\r
+ sortCols: $.map(sortColumns, function(col) {\r
+ return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };\r
+ })}, e);\r
+ }\r
+ }\r
+ });\r
+ }\r
+\r
+ function setupColumnReorder() {\r
+ $headers.filter(":ui-sortable").sortable("destroy");\r
+ $headers.sortable({\r
+ containment: "parent",\r
+ distance: 3,\r
+ axis: "x",\r
+ cursor: "default",\r
+ tolerance: "intersection",\r
+ helper: "clone",\r
+ placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",\r
+ forcePlaceholderSize: true,\r
+ start: function (e, ui) {\r
+ $(ui.helper).addClass("slick-header-column-active");\r
+ },\r
+ beforeStop: function (e, ui) {\r
+ $(ui.helper).removeClass("slick-header-column-active");\r
+ },\r
+ stop: function (e) {\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ $(this).sortable("cancel");\r
+ return;\r
+ }\r
+\r
+ var reorderedIds = $headers.sortable("toArray");\r
+ var reorderedColumns = [];\r
+ for (var i = 0; i < reorderedIds.length; i++) {\r
+ reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);\r
+ }\r
+ setColumns(reorderedColumns);\r
+\r
+ trigger(self.onColumnsReordered, {});\r
+ e.stopPropagation();\r
+ setupColumnResize();\r
+ }\r
+ });\r
+ }\r
+\r
+ function setupColumnResize() {\r
+ var $col, j, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable;\r
+ columnElements = $headers.children();\r
+ columnElements.find(".slick-resizable-handle").remove();\r
+ columnElements.each(function (i, e) {\r
+ if (columns[i].resizable) {\r
+ if (firstResizable === undefined) {\r
+ firstResizable = i;\r
+ }\r
+ lastResizable = i;\r
+ }\r
+ });\r
+ if (firstResizable === undefined) {\r
+ return;\r
+ }\r
+ columnElements.each(function (i, e) {\r
+ if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) {\r
+ return;\r
+ }\r
+ $col = $(e);\r
+ $("<div class='slick-resizable-handle' />")\r
+ .appendTo(e)\r
+ .bind("dragstart", function (e, dd) {\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ return false;\r
+ }\r
+ pageX = e.pageX;\r
+ $(this).parent().addClass("slick-header-column-active");\r
+ var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;\r
+ // lock each column's width option to current width\r
+ columnElements.each(function (i, e) {\r
+ columns[i].previousWidth = $(e).outerWidth();\r
+ });\r
+ if (options.forceFitColumns) {\r
+ shrinkLeewayOnRight = 0;\r
+ stretchLeewayOnRight = 0;\r
+ // colums on right affect maxPageX/minPageX\r
+ for (j = i + 1; j < columnElements.length; j++) {\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ if (stretchLeewayOnRight !== null) {\r
+ if (c.maxWidth) {\r
+ stretchLeewayOnRight += c.maxWidth - c.previousWidth;\r
+ } else {\r
+ stretchLeewayOnRight = null;\r
+ }\r
+ }\r
+ shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);\r
+ }\r
+ }\r
+ }\r
+ var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;\r
+ for (j = 0; j <= i; j++) {\r
+ // columns on left only affect minPageX\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ if (stretchLeewayOnLeft !== null) {\r
+ if (c.maxWidth) {\r
+ stretchLeewayOnLeft += c.maxWidth - c.previousWidth;\r
+ } else {\r
+ stretchLeewayOnLeft = null;\r
+ }\r
+ }\r
+ shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth);\r
+ }\r
+ }\r
+ if (shrinkLeewayOnRight === null) {\r
+ shrinkLeewayOnRight = 100000;\r
+ }\r
+ if (shrinkLeewayOnLeft === null) {\r
+ shrinkLeewayOnLeft = 100000;\r
+ }\r
+ if (stretchLeewayOnRight === null) {\r
+ stretchLeewayOnRight = 100000;\r
+ }\r
+ if (stretchLeewayOnLeft === null) {\r
+ stretchLeewayOnLeft = 100000;\r
+ }\r
+ maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft);\r
+ minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight);\r
+ })\r
+ .bind("drag", function (e, dd) {\r
+ var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x;\r
+ if (d < 0) { // shrink column\r
+ x = d;\r
+ for (j = i; j >= 0; j--) {\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);\r
+ if (x && c.previousWidth + x < actualMinWidth) {\r
+ x += c.previousWidth - actualMinWidth;\r
+ c.width = actualMinWidth;\r
+ } else {\r
+ c.width = c.previousWidth + x;\r
+ x = 0;\r
+ }\r
+ }\r
+ }\r
+\r
+ if (options.forceFitColumns) {\r
+ x = -d;\r
+ for (j = i + 1; j < columnElements.length; j++) {\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {\r
+ x -= c.maxWidth - c.previousWidth;\r
+ c.width = c.maxWidth;\r
+ } else {\r
+ c.width = c.previousWidth + x;\r
+ x = 0;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ } else { // stretch column\r
+ x = d;\r
+ for (j = i; j >= 0; j--) {\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {\r
+ x -= c.maxWidth - c.previousWidth;\r
+ c.width = c.maxWidth;\r
+ } else {\r
+ c.width = c.previousWidth + x;\r
+ x = 0;\r
+ }\r
+ }\r
+ }\r
+\r
+ if (options.forceFitColumns) {\r
+ x = -d;\r
+ for (j = i + 1; j < columnElements.length; j++) {\r
+ c = columns[j];\r
+ if (c.resizable) {\r
+ actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);\r
+ if (x && c.previousWidth + x < actualMinWidth) {\r
+ x += c.previousWidth - actualMinWidth;\r
+ c.width = actualMinWidth;\r
+ } else {\r
+ c.width = c.previousWidth + x;\r
+ x = 0;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ }\r
+ applyColumnHeaderWidths();\r
+ if (options.syncColumnCellResize) {\r
+ applyColumnWidths();\r
+ }\r
+ })\r
+ .bind("dragend", function (e, dd) {\r
+ var newWidth;\r
+ $(this).parent().removeClass("slick-header-column-active");\r
+ for (j = 0; j < columnElements.length; j++) {\r
+ c = columns[j];\r
+ newWidth = $(columnElements[j]).outerWidth();\r
+\r
+ if (c.previousWidth !== newWidth && c.rerenderOnResize) {\r
+ invalidateAllRows();\r
+ }\r
+ }\r
+ updateCanvasWidth(true);\r
+ render();\r
+ trigger(self.onColumnsResized, {});\r
+ });\r
+ });\r
+ }\r
+\r
+ function getVBoxDelta($el) {\r
+ var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];\r
+ var delta = 0;\r
+ $.each(p, function (n, val) {\r
+ delta += parseFloat($el.css(val)) || 0;\r
+ });\r
+ return delta;\r
+ }\r
+\r
+ function measureCellPaddingAndBorder() {\r
+ var el;\r
+ var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];\r
+ var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];\r
+\r
+ el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);\r
+ headerColumnWidthDiff = headerColumnHeightDiff = 0;\r
+ $.each(h, function (n, val) {\r
+ headerColumnWidthDiff += parseFloat(el.css(val)) || 0;\r
+ });\r
+ $.each(v, function (n, val) {\r
+ headerColumnHeightDiff += parseFloat(el.css(val)) || 0;\r
+ });\r
+ el.remove();\r
+\r
+ var r = $("<div class='slick-row' />").appendTo($canvas);\r
+ el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);\r
+ cellWidthDiff = cellHeightDiff = 0;\r
+ $.each(h, function (n, val) {\r
+ cellWidthDiff += parseFloat(el.css(val)) || 0;\r
+ });\r
+ $.each(v, function (n, val) {\r
+ cellHeightDiff += parseFloat(el.css(val)) || 0;\r
+ });\r
+ r.remove();\r
+\r
+ absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);\r
+ }\r
+\r
+ function createCssRules() {\r
+ $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));\r
+ var rowHeight = (options.rowHeight - cellHeightDiff);\r
+ var rules = [\r
+ "." + uid + " .slick-header-column { left: 1000px; }",\r
+ "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",\r
+ "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",\r
+ "." + uid + " .slick-cell { height:" + rowHeight + "px; }",\r
+ "." + uid + " .slick-row { height:" + options.rowHeight + "px; }"\r
+ ];\r
+\r
+ for (var i = 0; i < columns.length; i++) {\r
+ rules.push("." + uid + " .l" + i + " { }");\r
+ rules.push("." + uid + " .r" + i + " { }");\r
+ }\r
+\r
+ if ($style[0].styleSheet) { // IE\r
+ $style[0].styleSheet.cssText = rules.join(" ");\r
+ } else {\r
+ $style[0].appendChild(document.createTextNode(rules.join(" ")));\r
+ }\r
+ }\r
+\r
+ function getColumnCssRules(idx) {\r
+ if (!stylesheet) {\r
+ var sheets = document.styleSheets;\r
+ for (var i = 0; i < sheets.length; i++) {\r
+ if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {\r
+ stylesheet = sheets[i];\r
+ break;\r
+ }\r
+ }\r
+\r
+ if (!stylesheet) {\r
+ throw new Error("Cannot find stylesheet.");\r
+ }\r
+\r
+ // find and cache column CSS rules\r
+ columnCssRulesL = [];\r
+ columnCssRulesR = [];\r
+ var cssRules = (stylesheet.cssRules || stylesheet.rules);\r
+ var matches, columnIdx;\r
+ for (var i = 0; i < cssRules.length; i++) {\r
+ var selector = cssRules[i].selectorText;\r
+ if (matches = /\.l\d+/.exec(selector)) {\r
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);\r
+ columnCssRulesL[columnIdx] = cssRules[i];\r
+ } else if (matches = /\.r\d+/.exec(selector)) {\r
+ columnIdx = parseInt(matches[0].substr(2, matches[0].length - 2), 10);\r
+ columnCssRulesR[columnIdx] = cssRules[i];\r
+ }\r
+ }\r
+ }\r
+\r
+ return {\r
+ "left": columnCssRulesL[idx],\r
+ "right": columnCssRulesR[idx]\r
+ };\r
+ }\r
+\r
+ function removeCssRules() {\r
+ $style.remove();\r
+ stylesheet = null;\r
+ }\r
+\r
+ function destroy() {\r
+ getEditorLock().cancelCurrentEdit();\r
+\r
+ trigger(self.onBeforeDestroy, {});\r
+\r
+ var i = plugins.length;\r
+ while(i--) {\r
+ unregisterPlugin(plugins[i]);\r
+ }\r
+\r
+ if (options.enableColumnReorder) {\r
+ $headers.filter(":ui-sortable").sortable("destroy");\r
+ }\r
+\r
+ unbindAncestorScrollEvents();\r
+ $container.unbind(".slickgrid");\r
+ removeCssRules();\r
+\r
+ $canvas.unbind("draginit dragstart dragend drag");\r
+ $container.empty().removeClass(uid);\r
+ }\r
+\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // General\r
+\r
+ function trigger(evt, args, e) {\r
+ e = e || new Slick.EventData();\r
+ args = args || {};\r
+ args.grid = self;\r
+ return evt.notify(args, e, self);\r
+ }\r
+\r
+ function getEditorLock() {\r
+ return options.editorLock;\r
+ }\r
+\r
+ function getEditController() {\r
+ return editController;\r
+ }\r
+\r
+ function getColumnIndex(id) {\r
+ return columnsById[id];\r
+ }\r
+\r
+ function autosizeColumns() {\r
+ var i, c,\r
+ widths = [],\r
+ shrinkLeeway = 0,\r
+ total = 0,\r
+ prevTotal,\r
+ availWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW;\r
+\r
+ for (i = 0; i < columns.length; i++) {\r
+ c = columns[i];\r
+ widths.push(c.width);\r
+ total += c.width;\r
+ if (c.resizable) {\r
+ shrinkLeeway += c.width - Math.max(c.minWidth, absoluteColumnMinWidth);\r
+ }\r
+ }\r
+\r
+ // shrink\r
+ prevTotal = total;\r
+ while (total > availWidth && shrinkLeeway) {\r
+ var shrinkProportion = (total - availWidth) / shrinkLeeway;\r
+ for (i = 0; i < columns.length && total > availWidth; i++) {\r
+ c = columns[i];\r
+ var width = widths[i];\r
+ if (!c.resizable || width <= c.minWidth || width <= absoluteColumnMinWidth) {\r
+ continue;\r
+ }\r
+ var absMinWidth = Math.max(c.minWidth, absoluteColumnMinWidth);\r
+ var shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;\r
+ shrinkSize = Math.min(shrinkSize, width - absMinWidth);\r
+ total -= shrinkSize;\r
+ shrinkLeeway -= shrinkSize;\r
+ widths[i] -= shrinkSize;\r
+ }\r
+ if (prevTotal == total) { // avoid infinite loop\r
+ break;\r
+ }\r
+ prevTotal = total;\r
+ }\r
+\r
+ // grow\r
+ prevTotal = total;\r
+ while (total < availWidth) {\r
+ var growProportion = availWidth / total;\r
+ for (i = 0; i < columns.length && total < availWidth; i++) {\r
+ c = columns[i];\r
+ if (!c.resizable || c.maxWidth <= c.width) {\r
+ continue;\r
+ }\r
+ var growSize = Math.min(Math.floor(growProportion * c.width) - c.width, (c.maxWidth - c.width) || 1000000) || 1;\r
+ total += growSize;\r
+ widths[i] += growSize;\r
+ }\r
+ if (prevTotal == total) { // avoid infinite loop\r
+ break;\r
+ }\r
+ prevTotal = total;\r
+ }\r
+\r
+ var reRender = false;\r
+ for (i = 0; i < columns.length; i++) {\r
+ if (columns[i].rerenderOnResize && columns[i].width != widths[i]) {\r
+ reRender = true;\r
+ }\r
+ columns[i].width = widths[i];\r
+ }\r
+\r
+ applyColumnHeaderWidths();\r
+ updateCanvasWidth(true);\r
+ if (reRender) {\r
+ invalidateAllRows();\r
+ render();\r
+ }\r
+ }\r
+\r
+ function applyColumnHeaderWidths() {\r
+ if (!initialized) { return; }\r
+ var h;\r
+ for (var i = 0, headers = $headers.children(), ii = headers.length; i < ii; i++) {\r
+ h = $(headers[i]);\r
+ if (h.width() !== columns[i].width - headerColumnWidthDiff) {\r
+ h.width(columns[i].width - headerColumnWidthDiff);\r
+ }\r
+ }\r
+\r
+ updateColumnCaches();\r
+ }\r
+\r
+ function applyColumnWidths() {\r
+ var x = 0, w, rule;\r
+ for (var i = 0; i < columns.length; i++) {\r
+ w = columns[i].width;\r
+\r
+ rule = getColumnCssRules(i);\r
+ rule.left.style.left = x + "px";\r
+ rule.right.style.right = (canvasWidth - x - w) + "px";\r
+\r
+ x += columns[i].width;\r
+ }\r
+ }\r
+\r
+ function setSortColumn(columnId, ascending) {\r
+ setSortColumns([{ columnId: columnId, sortAsc: ascending}]);\r
+ }\r
+\r
+ function setSortColumns(cols) {\r
+ sortColumns = cols;\r
+\r
+ var headerColumnEls = $headers.children();\r
+ headerColumnEls\r
+ .removeClass("slick-header-column-sorted")\r
+ .find(".slick-sort-indicator")\r
+ .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");\r
+\r
+ $.each(sortColumns, function(i, col) {\r
+ if (col.sortAsc == null) {\r
+ col.sortAsc = true;\r
+ }\r
+ var columnIndex = getColumnIndex(col.columnId);\r
+ if (columnIndex != null) {\r
+ headerColumnEls.eq(columnIndex)\r
+ .addClass("slick-header-column-sorted")\r
+ .find(".slick-sort-indicator")\r
+ .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");\r
+ }\r
+ });\r
+ }\r
+\r
+ function getSortColumns() {\r
+ return sortColumns;\r
+ }\r
+\r
+ function handleSelectedRangesChanged(e, ranges) {\r
+ selectedRows = [];\r
+ var hash = {};\r
+ for (var i = 0; i < ranges.length; i++) {\r
+ for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {\r
+ if (!hash[j]) { // prevent duplicates\r
+ selectedRows.push(j);\r
+ hash[j] = {};\r
+ }\r
+ for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {\r
+ if (canCellBeSelected(j, k)) {\r
+ hash[j][columns[k].id] = options.selectedCellCssClass;\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ setCellCssStyles(options.selectedCellCssClass, hash);\r
+\r
+ trigger(self.onSelectedRowsChanged, {rows: getSelectedRows()}, e);\r
+ }\r
+\r
+ function getColumns() {\r
+ return columns;\r
+ }\r
+\r
+ function updateColumnCaches() {\r
+ // Pre-calculate cell boundaries.\r
+ columnPosLeft = [];\r
+ columnPosRight = [];\r
+ var x = 0;\r
+ for (var i = 0, ii = columns.length; i < ii; i++) {\r
+ columnPosLeft[i] = x;\r
+ columnPosRight[i] = x + columns[i].width;\r
+ x += columns[i].width;\r
+ }\r
+ }\r
+\r
+ function setColumns(columnDefinitions) {\r
+ columns = columnDefinitions;\r
+\r
+ columnsById = {};\r
+ for (var i = 0; i < columns.length; i++) {\r
+ var m = columns[i] = $.extend({}, columnDefaults, columns[i]);\r
+ columnsById[m.id] = i;\r
+ if (m.minWidth && m.width < m.minWidth) {\r
+ m.width = m.minWidth;\r
+ }\r
+ if (m.maxWidth && m.width > m.maxWidth) {\r
+ m.width = m.maxWidth;\r
+ }\r
+ }\r
+\r
+ updateColumnCaches();\r
+\r
+ if (initialized) {\r
+ invalidateAllRows();\r
+ createColumnHeaders();\r
+ removeCssRules();\r
+ createCssRules();\r
+ resizeCanvas();\r
+ applyColumnWidths();\r
+ handleScroll();\r
+ }\r
+ }\r
+\r
+ function getOptions() {\r
+ return options;\r
+ }\r
+\r
+ function setOptions(args) {\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ return;\r
+ }\r
+\r
+ makeActiveCellNormal();\r
+\r
+ if (options.enableAddRow !== args.enableAddRow) {\r
+ invalidateRow(getDataLength());\r
+ }\r
+\r
+ options = $.extend(options, args);\r
+ validateAndEnforceOptions();\r
+\r
+ $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");\r
+ render();\r
+ }\r
+\r
+ function validateAndEnforceOptions() {\r
+ if (options.autoHeight) {\r
+ options.leaveSpaceForNewRows = false;\r
+ }\r
+ }\r
+\r
+ function setData(newData, scrollToTop) {\r
+ data = newData;\r
+ invalidateAllRows();\r
+ updateRowCount();\r
+ if (scrollToTop) {\r
+ scrollTo(0);\r
+ }\r
+ }\r
+\r
+ function getData() {\r
+ return data;\r
+ }\r
+\r
+ function getDataLength() {\r
+ if (data.getLength) {\r
+ return data.getLength();\r
+ } else {\r
+ return data.length;\r
+ }\r
+ }\r
+\r
+ function getDataItem(i) {\r
+ if (data.getItem) {\r
+ return data.getItem(i);\r
+ } else {\r
+ return data[i];\r
+ }\r
+ }\r
+\r
+ function getTopPanel() {\r
+ return $topPanel[0];\r
+ }\r
+\r
+ function setTopPanelVisibility(visible) {\r
+ if (options.showTopPanel != visible) {\r
+ options.showTopPanel = visible;\r
+ if (visible) {\r
+ $topPanelScroller.slideDown("fast", resizeCanvas);\r
+ } else {\r
+ $topPanelScroller.slideUp("fast", resizeCanvas);\r
+ }\r
+ }\r
+ }\r
+\r
+ function setHeaderRowVisibility(visible) {\r
+ if (options.showHeaderRow != visible) {\r
+ options.showHeaderRow = visible;\r
+ if (visible) {\r
+ $headerRowScroller.slideDown("fast", resizeCanvas);\r
+ } else {\r
+ $headerRowScroller.slideUp("fast", resizeCanvas);\r
+ }\r
+ }\r
+ }\r
+\r
+ function getContainerNode() {\r
+ return $container.get(0);\r
+ }\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Rendering / Scrolling\r
+\r
+ function getRowTop(row) {\r
+ return options.rowHeight * row - offset;\r
+ }\r
+\r
+ function getRowFromPosition(y) {\r
+ return Math.floor((y + offset) / options.rowHeight);\r
+ }\r
+\r
+ function scrollTo(y) {\r
+ y = Math.max(y, 0);\r
+ y = Math.min(y, th - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0));\r
+\r
+ var oldOffset = offset;\r
+\r
+ page = Math.min(n - 1, Math.floor(y / ph));\r
+ offset = Math.round(page * cj);\r
+ var newScrollTop = y - offset;\r
+\r
+ if (offset != oldOffset) {\r
+ var range = getVisibleRange(newScrollTop);\r
+ cleanupRows(range);\r
+ updateRowPositions();\r
+ }\r
+\r
+ if (prevScrollTop != newScrollTop) {\r
+ vScrollDir = (prevScrollTop + oldOffset < newScrollTop + offset) ? 1 : -1;\r
+ $viewport[0].scrollTop = (lastRenderedScrollTop = scrollTop = prevScrollTop = newScrollTop);\r
+\r
+ trigger(self.onViewportChanged, {});\r
+ }\r
+ }\r
+\r
+ function defaultFormatter(row, cell, value, columnDef, dataContext) {\r
+ if (value == null) {\r
+ return "";\r
+ } else {\r
+ return (value + "").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");\r
+ }\r
+ }\r
+\r
+ function getFormatter(row, column) {\r
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);\r
+\r
+ // look up by id, then index\r
+ var columnOverrides = rowMetadata &&\r
+ rowMetadata.columns &&\r
+ (rowMetadata.columns[column.id] || rowMetadata.columns[getColumnIndex(column.id)]);\r
+\r
+ return (columnOverrides && columnOverrides.formatter) ||\r
+ (rowMetadata && rowMetadata.formatter) ||\r
+ column.formatter ||\r
+ (options.formatterFactory && options.formatterFactory.getFormatter(column)) ||\r
+ options.defaultFormatter;\r
+ }\r
+\r
+ function getEditor(row, cell) {\r
+ var column = columns[cell];\r
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);\r
+ var columnMetadata = rowMetadata && rowMetadata.columns;\r
+\r
+ if (columnMetadata && columnMetadata[column.id] && columnMetadata[column.id].editor !== undefined) {\r
+ return columnMetadata[column.id].editor;\r
+ }\r
+ if (columnMetadata && columnMetadata[cell] && columnMetadata[cell].editor !== undefined) {\r
+ return columnMetadata[cell].editor;\r
+ }\r
+\r
+ return column.editor || (options.editorFactory && options.editorFactory.getEditor(column));\r
+ }\r
+\r
+ function getDataItemValueForColumn(item, columnDef) {\r
+ if (options.dataItemColumnValueExtractor) {\r
+ return options.dataItemColumnValueExtractor(item, columnDef);\r
+ }\r
+ return item[columnDef.field];\r
+ }\r
+\r
+ function appendRowHtml(stringArray, row, range, dataLength) {\r
+ var d = getDataItem(row);\r
+ var dataLoading = row < dataLength && !d;\r
+ var rowCss = "slick-row" +\r
+ (dataLoading ? " loading" : "") +\r
+ (row === activeRow ? " active" : "") +\r
+ (row % 2 == 1 ? " odd" : " even");\r
+\r
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);\r
+\r
+ if (metadata && metadata.cssClasses) {\r
+ rowCss += " " + metadata.cssClasses;\r
+ }\r
+\r
+ stringArray.push("<div class='ui-widget-content " + rowCss + "' style='top:" + getRowTop(row) + "px'>");\r
+\r
+ var colspan, m;\r
+ for (var i = 0, ii = columns.length; i < ii; i++) {\r
+ m = columns[i];\r
+ colspan = 1;\r
+ if (metadata && metadata.columns) {\r
+ var columnData = metadata.columns[m.id] || metadata.columns[i];\r
+ colspan = (columnData && columnData.colspan) || 1;\r
+ if (colspan === "*") {\r
+ colspan = ii - i;\r
+ }\r
+ }\r
+\r
+ // Do not render cells outside of the viewport.\r
+ if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {\r
+ if (columnPosLeft[i] > range.rightPx) {\r
+ // All columns to the right are outside the range.\r
+ break;\r
+ }\r
+\r
+ appendCellHtml(stringArray, row, i, colspan, d);\r
+ }\r
+\r
+ if (colspan > 1) {\r
+ i += (colspan - 1);\r
+ }\r
+ }\r
+\r
+ stringArray.push("</div>");\r
+ }\r
+\r
+ function appendCellHtml(stringArray, row, cell, colspan, item) {\r
+ var m = columns[cell];\r
+ var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +\r
+ (m.cssClass ? " " + m.cssClass : "");\r
+ if (row === activeRow && cell === activeCell) {\r
+ cellCss += (" active");\r
+ }\r
+\r
+ // TODO: merge them together in the setter\r
+ for (var key in cellCssClasses) {\r
+ if (cellCssClasses[key][row] && cellCssClasses[key][row][m.id]) {\r
+ cellCss += (" " + cellCssClasses[key][row][m.id]);\r
+ }\r
+ }\r
+\r
+ stringArray.push("<div class='" + cellCss + "'>");\r
+\r
+ // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)\r
+ if (item) {\r
+ var value = getDataItemValueForColumn(item, m);\r
+ stringArray.push(getFormatter(row, m)(row, cell, value, m, item));\r
+ }\r
+\r
+ stringArray.push("</div>");\r
+\r
+ rowsCache[row].cellRenderQueue.push(cell);\r
+ rowsCache[row].cellColSpans[cell] = colspan;\r
+ }\r
+\r
+\r
+ function cleanupRows(rangeToKeep) {\r
+ for (var i in rowsCache) {\r
+ if (((i = parseInt(i, 10)) !== activeRow) && (i < rangeToKeep.top || i > rangeToKeep.bottom)) {\r
+ removeRowFromCache(i);\r
+ }\r
+ }\r
+ }\r
+\r
+ function invalidate() {\r
+ updateRowCount();\r
+ invalidateAllRows();\r
+ render();\r
+ }\r
+\r
+ function invalidateAllRows() {\r
+ if (currentEditor) {\r
+ makeActiveCellNormal();\r
+ }\r
+ for (var row in rowsCache) {\r
+ removeRowFromCache(row);\r
+ }\r
+ }\r
+\r
+ function removeRowFromCache(row) {\r
+ var cacheEntry = rowsCache[row];\r
+ if (!cacheEntry) {\r
+ return;\r
+ }\r
+ $canvas[0].removeChild(cacheEntry.rowNode);\r
+ delete rowsCache[row];\r
+ delete postProcessedRows[row];\r
+ renderedRows--;\r
+ counter_rows_removed++;\r
+ }\r
+\r
+ function invalidateRows(rows) {\r
+ var i, rl;\r
+ if (!rows || !rows.length) {\r
+ return;\r
+ }\r
+ vScrollDir = 0;\r
+ for (i = 0, rl = rows.length; i < rl; i++) {\r
+ if (currentEditor && activeRow === rows[i]) {\r
+ makeActiveCellNormal();\r
+ }\r
+ if (rowsCache[rows[i]]) {\r
+ removeRowFromCache(rows[i]);\r
+ }\r
+ }\r
+ }\r
+\r
+ function invalidateRow(row) {\r
+ invalidateRows([row]);\r
+ }\r
+\r
+ function updateCell(row, cell) {\r
+ var cellNode = getCellNode(row, cell);\r
+ if (!cellNode) {\r
+ return;\r
+ }\r
+\r
+ var m = columns[cell], d = getDataItem(row);\r
+ if (currentEditor && activeRow === row && activeCell === cell) {\r
+ currentEditor.loadValue(d);\r
+ } else {\r
+ cellNode.innerHTML = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d) : "";\r
+ invalidatePostProcessingResults(row);\r
+ }\r
+ }\r
+\r
+ function updateRow(row) {\r
+ var cacheEntry = rowsCache[row];\r
+ if (!cacheEntry) {\r
+ return;\r
+ }\r
+\r
+ ensureCellNodesInRowsCache(row);\r
+\r
+ var d = getDataItem(row);\r
+\r
+ for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {\r
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {\r
+ continue;\r
+ }\r
+\r
+ columnIdx = columnIdx | 0;\r
+ var m = columns[columnIdx],\r
+ node = cacheEntry.cellNodesByColumnIdx[columnIdx];\r
+\r
+ if (row === activeRow && columnIdx === activeCell && currentEditor) {\r
+ currentEditor.loadValue(d);\r
+ } else if (d) {\r
+ node.innerHTML = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d);\r
+ } else {\r
+ node.innerHTML = "";\r
+ }\r
+ }\r
+\r
+ invalidatePostProcessingResults(row);\r
+ }\r
+\r
+ function getViewportHeight() {\r
+ return parseFloat($.css($container[0], "height", true)) -\r
+ parseFloat($.css($container[0], "paddingTop", true)) -\r
+ parseFloat($.css($container[0], "paddingBottom", true)) -\r
+ parseFloat($.css($headerScroller[0], "height")) - getVBoxDelta($headerScroller) -\r
+ (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -\r
+ (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0);\r
+ }\r
+\r
+ function resizeCanvas() {\r
+ if (!initialized) { return; }\r
+ if (options.autoHeight) {\r
+ viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0));\r
+ } else {\r
+ viewportH = getViewportHeight();\r
+ }\r
+\r
+ numVisibleRows = Math.ceil(viewportH / options.rowHeight);\r
+ viewportW = parseFloat($.css($container[0], "width", true));\r
+ if (!options.autoHeight) {\r
+ $viewport.height(viewportH);\r
+ }\r
+\r
+ if (options.forceFitColumns) {\r
+ autosizeColumns();\r
+ }\r
+\r
+ updateRowCount();\r
+ handleScroll();\r
+ render();\r
+ }\r
+\r
+ function updateRowCount() {\r
+ var dataLength = getDataLength();\r
+ if (!initialized) { return; }\r
+ numberOfRows = dataLength +\r
+ (options.enableAddRow ? 1 : 0) +\r
+ (options.leaveSpaceForNewRows ? numVisibleRows - 1 : 0);\r
+\r
+ var oldViewportHasVScroll = viewportHasVScroll;\r
+ // with autoHeight, we do not need to accommodate the vertical scroll bar\r
+ viewportHasVScroll = !options.autoHeight && (numberOfRows * options.rowHeight > viewportH);\r
+\r
+ // remove the rows that are now outside of the data range\r
+ // this helps avoid redundant calls to .removeRow() when the size of the data decreased by thousands of rows\r
+ var l = options.enableAddRow ? dataLength : dataLength - 1;\r
+ for (var i in rowsCache) {\r
+ if (i >= l) {\r
+ removeRowFromCache(i);\r
+ }\r
+ }\r
+\r
+ if (activeCellNode && activeRow > l) {\r
+ resetActiveCell();\r
+ }\r
+\r
+ var oldH = h;\r
+ th = Math.max(options.rowHeight * numberOfRows, viewportH - scrollbarDimensions.height);\r
+ if (th < maxSupportedCssHeight) {\r
+ // just one page\r
+ h = ph = th;\r
+ n = 1;\r
+ cj = 0;\r
+ } else {\r
+ // break into pages\r
+ h = maxSupportedCssHeight;\r
+ ph = h / 100;\r
+ n = Math.floor(th / ph);\r
+ cj = (th - h) / (n - 1);\r
+ }\r
+\r
+ if (h !== oldH) {\r
+ $canvas.css("height", h);\r
+ scrollTop = $viewport[0].scrollTop;\r
+ }\r
+\r
+ var oldScrollTopInRange = (scrollTop + offset <= th - viewportH);\r
+\r
+ if (th == 0 || scrollTop == 0) {\r
+ page = offset = 0;\r
+ } else if (oldScrollTopInRange) {\r
+ // maintain virtual position\r
+ scrollTo(scrollTop + offset);\r
+ } else {\r
+ // scroll to bottom\r
+ scrollTo(th - viewportH);\r
+ }\r
+\r
+ if (h != oldH && options.autoHeight) {\r
+ resizeCanvas();\r
+ }\r
+\r
+ if (options.forceFitColumns && oldViewportHasVScroll != viewportHasVScroll) {\r
+ autosizeColumns();\r
+ }\r
+ updateCanvasWidth(false);\r
+ }\r
+\r
+ function getVisibleRange(viewportTop, viewportLeft) {\r
+ if (viewportTop == null) {\r
+ viewportTop = scrollTop;\r
+ }\r
+ if (viewportLeft == null) {\r
+ viewportLeft = scrollLeft;\r
+ }\r
+\r
+ return {\r
+ top: getRowFromPosition(viewportTop),\r
+ bottom: getRowFromPosition(viewportTop + viewportH) + 1,\r
+ leftPx: viewportLeft,\r
+ rightPx: viewportLeft + viewportW\r
+ };\r
+ }\r
+\r
+ function getRenderedRange(viewportTop, viewportLeft) {\r
+ var range = getVisibleRange(viewportTop, viewportLeft);\r
+ var buffer = Math.round(viewportH / options.rowHeight);\r
+ var minBuffer = 3;\r
+\r
+ if (vScrollDir == -1) {\r
+ range.top -= buffer;\r
+ range.bottom += minBuffer;\r
+ } else if (vScrollDir == 1) {\r
+ range.top -= minBuffer;\r
+ range.bottom += buffer;\r
+ } else {\r
+ range.top -= minBuffer;\r
+ range.bottom += minBuffer;\r
+ }\r
+\r
+ range.top = Math.max(0, range.top);\r
+ range.bottom = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, range.bottom);\r
+\r
+ range.leftPx -= viewportW;\r
+ range.rightPx += viewportW;\r
+\r
+ range.leftPx = Math.max(0, range.leftPx);\r
+ range.rightPx = Math.min(canvasWidth, range.rightPx);\r
+\r
+ return range;\r
+ }\r
+\r
+ function ensureCellNodesInRowsCache(row) {\r
+ var cacheEntry = rowsCache[row];\r
+ if (cacheEntry) {\r
+ if (cacheEntry.cellRenderQueue.length) {\r
+ var lastChild = cacheEntry.rowNode.lastChild;\r
+ while (cacheEntry.cellRenderQueue.length) {\r
+ var columnIdx = cacheEntry.cellRenderQueue.pop();\r
+ cacheEntry.cellNodesByColumnIdx[columnIdx] = lastChild;\r
+ lastChild = lastChild.previousSibling;\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ function cleanUpCells(range, row) {\r
+ var totalCellsRemoved = 0;\r
+ var cacheEntry = rowsCache[row];\r
+\r
+ // Remove cells outside the range.\r
+ var cellsToRemove = [];\r
+ for (var i in cacheEntry.cellNodesByColumnIdx) {\r
+ // I really hate it when people mess with Array.prototype.\r
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(i)) {\r
+ continue;\r
+ }\r
+\r
+ // This is a string, so it needs to be cast back to a number.\r
+ i = i | 0;\r
+\r
+ var colspan = cacheEntry.cellColSpans[i];\r
+ if (columnPosLeft[i] > range.rightPx ||\r
+ columnPosRight[Math.min(columns.length - 1, i + colspan - 1)] < range.leftPx) {\r
+ if (!(row == activeRow && i == activeCell)) {\r
+ cellsToRemove.push(i);\r
+ }\r
+ }\r
+ }\r
+\r
+ var cellToRemove;\r
+ while ((cellToRemove = cellsToRemove.pop()) != null) {\r
+ cacheEntry.rowNode.removeChild(cacheEntry.cellNodesByColumnIdx[cellToRemove]);\r
+ delete cacheEntry.cellColSpans[cellToRemove];\r
+ delete cacheEntry.cellNodesByColumnIdx[cellToRemove];\r
+ if (postProcessedRows[row]) {\r
+ delete postProcessedRows[row][cellToRemove];\r
+ }\r
+ totalCellsRemoved++;\r
+ }\r
+ }\r
+\r
+ function cleanUpAndRenderCells(range) {\r
+ var cacheEntry;\r
+ var stringArray = [];\r
+ var processedRows = [];\r
+ var cellsAdded;\r
+ var totalCellsAdded = 0;\r
+ var colspan;\r
+\r
+ for (var row = range.top, btm = range.bottom; row <= btm; row++) {\r
+ cacheEntry = rowsCache[row];\r
+ if (!cacheEntry) {\r
+ continue;\r
+ }\r
+\r
+ // cellRenderQueue populated in renderRows() needs to be cleared first\r
+ ensureCellNodesInRowsCache(row);\r
+\r
+ cleanUpCells(range, row);\r
+\r
+ // Render missing cells.\r
+ cellsAdded = 0;\r
+\r
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);\r
+ metadata = metadata && metadata.columns;\r
+\r
+ var d = getDataItem(row);\r
+\r
+ // TODO: shorten this loop (index? heuristics? binary search?)\r
+ for (var i = 0, ii = columns.length; i < ii; i++) {\r
+ // Cells to the right are outside the range.\r
+ if (columnPosLeft[i] > range.rightPx) {\r
+ break;\r
+ }\r
+\r
+ // Already rendered.\r
+ if ((colspan = cacheEntry.cellColSpans[i]) != null) {\r
+ i += (colspan > 1 ? colspan - 1 : 0);\r
+ continue;\r
+ }\r
+\r
+ colspan = 1;\r
+ if (metadata) {\r
+ var columnData = metadata[columns[i].id] || metadata[i];\r
+ colspan = (columnData && columnData.colspan) || 1;\r
+ if (colspan === "*") {\r
+ colspan = ii - i;\r
+ }\r
+ }\r
+\r
+ if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {\r
+ appendCellHtml(stringArray, row, i, colspan, d);\r
+ cellsAdded++;\r
+ }\r
+\r
+ i += (colspan > 1 ? colspan - 1 : 0);\r
+ }\r
+\r
+ if (cellsAdded) {\r
+ totalCellsAdded += cellsAdded;\r
+ processedRows.push(row);\r
+ }\r
+ }\r
+\r
+ if (!stringArray.length) {\r
+ return;\r
+ }\r
+\r
+ var x = document.createElement("div");\r
+ x.innerHTML = stringArray.join("");\r
+\r
+ var processedRow;\r
+ var node;\r
+ while ((processedRow = processedRows.pop()) != null) {\r
+ cacheEntry = rowsCache[processedRow];\r
+ var columnIdx;\r
+ while ((columnIdx = cacheEntry.cellRenderQueue.pop()) != null) {\r
+ node = x.lastChild;\r
+ cacheEntry.rowNode.appendChild(node);\r
+ cacheEntry.cellNodesByColumnIdx[columnIdx] = node;\r
+ }\r
+ }\r
+ }\r
+\r
+ function renderRows(range) {\r
+ var parentNode = $canvas[0],\r
+ stringArray = [],\r
+ rows = [],\r
+ needToReselectCell = false,\r
+ dataLength = getDataLength();\r
+\r
+ for (var i = range.top, ii = range.bottom; i <= ii; i++) {\r
+ if (rowsCache[i]) {\r
+ continue;\r
+ }\r
+ renderedRows++;\r
+ rows.push(i);\r
+\r
+ // Create an entry right away so that appendRowHtml() can\r
+ // start populatating it.\r
+ rowsCache[i] = {\r
+ "rowNode": null,\r
+\r
+ // ColSpans of rendered cells (by column idx).\r
+ // Can also be used for checking whether a cell has been rendered.\r
+ "cellColSpans": [],\r
+\r
+ // Cell nodes (by column idx). Lazy-populated by ensureCellNodesInRowsCache().\r
+ "cellNodesByColumnIdx": [],\r
+\r
+ // Column indices of cell nodes that have been rendered, but not yet indexed in\r
+ // cellNodesByColumnIdx. These are in the same order as cell nodes added at the\r
+ // end of the row.\r
+ "cellRenderQueue": []\r
+ };\r
+\r
+ appendRowHtml(stringArray, i, range, dataLength);\r
+ if (activeCellNode && activeRow === i) {\r
+ needToReselectCell = true;\r
+ }\r
+ counter_rows_rendered++;\r
+ }\r
+\r
+ if (!rows.length) { return; }\r
+\r
+ var x = document.createElement("div");\r
+ x.innerHTML = stringArray.join("");\r
+\r
+ for (var i = 0, ii = rows.length; i < ii; i++) {\r
+ rowsCache[rows[i]].rowNode = parentNode.appendChild(x.firstChild);\r
+ }\r
+\r
+ if (needToReselectCell) {\r
+ activeCellNode = getCellNode(activeRow, activeCell);\r
+ }\r
+ }\r
+\r
+ function startPostProcessing() {\r
+ if (!options.enableAsyncPostRender) {\r
+ return;\r
+ }\r
+ clearTimeout(h_postrender);\r
+ h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);\r
+ }\r
+\r
+ function invalidatePostProcessingResults(row) {\r
+ delete postProcessedRows[row];\r
+ postProcessFromRow = Math.min(postProcessFromRow, row);\r
+ postProcessToRow = Math.max(postProcessToRow, row);\r
+ startPostProcessing();\r
+ }\r
+\r
+ function updateRowPositions() {\r
+ for (var row in rowsCache) {\r
+ rowsCache[row].rowNode.style.top = getRowTop(row) + "px";\r
+ }\r
+ }\r
+\r
+ function render() {\r
+ if (!initialized) { return; }\r
+ var visible = getVisibleRange();\r
+ var rendered = getRenderedRange();\r
+\r
+ // remove rows no longer in the viewport\r
+ cleanupRows(rendered);\r
+\r
+ // add new rows & missing cells in existing rows\r
+ if (lastRenderedScrollLeft != scrollLeft) {\r
+ cleanUpAndRenderCells(rendered);\r
+ }\r
+\r
+ // render missing rows\r
+ renderRows(rendered);\r
+\r
+ postProcessFromRow = visible.top;\r
+ postProcessToRow = Math.min(options.enableAddRow ? getDataLength() : getDataLength() - 1, visible.bottom);\r
+ startPostProcessing();\r
+\r
+ lastRenderedScrollTop = scrollTop;\r
+ lastRenderedScrollLeft = scrollLeft;\r
+ h_render = null;\r
+ }\r
+\r
+ function handleHeaderRowScroll() {\r
+ var scrollLeft = $headerRowScroller[0].scrollLeft;\r
+ if (scrollLeft != $viewport[0].scrollLeft) {\r
+ $viewport[0].scrollLeft = scrollLeft;\r
+ }\r
+ }\r
+\r
+ function handleScroll() {\r
+ scrollTop = $viewport[0].scrollTop;\r
+ scrollLeft = $viewport[0].scrollLeft;\r
+ var vScrollDist = Math.abs(scrollTop - prevScrollTop);\r
+ var hScrollDist = Math.abs(scrollLeft - prevScrollLeft);\r
+\r
+ if (hScrollDist) {\r
+ prevScrollLeft = scrollLeft;\r
+ $headerScroller[0].scrollLeft = scrollLeft;\r
+ $topPanelScroller[0].scrollLeft = scrollLeft;\r
+ $headerRowScroller[0].scrollLeft = scrollLeft;\r
+ }\r
+\r
+ if (vScrollDist) {\r
+ vScrollDir = prevScrollTop < scrollTop ? 1 : -1;\r
+ prevScrollTop = scrollTop;\r
+\r
+ // switch virtual pages if needed\r
+ if (vScrollDist < viewportH) {\r
+ scrollTo(scrollTop + offset);\r
+ } else {\r
+ var oldOffset = offset;\r
+ if (h == viewportH) {\r
+ page = 0;\r
+ } else {\r
+ page = Math.min(n - 1, Math.floor(scrollTop * ((th - viewportH) / (h - viewportH)) * (1 / ph)));\r
+ }\r
+ offset = Math.round(page * cj);\r
+ if (oldOffset != offset) {\r
+ invalidateAllRows();\r
+ }\r
+ }\r
+ }\r
+\r
+ if (hScrollDist || vScrollDist) {\r
+ if (h_render) {\r
+ clearTimeout(h_render);\r
+ }\r
+\r
+ if (Math.abs(lastRenderedScrollTop - scrollTop) > 20 ||\r
+ Math.abs(lastRenderedScrollLeft - scrollLeft) > 20) {\r
+ if (options.forceSyncScrolling || (\r
+ Math.abs(lastRenderedScrollTop - scrollTop) < viewportH &&\r
+ Math.abs(lastRenderedScrollLeft - scrollLeft) < viewportW)) {\r
+ render();\r
+ } else {\r
+ h_render = setTimeout(render, 50);\r
+ }\r
+\r
+ trigger(self.onViewportChanged, {});\r
+ }\r
+ }\r
+\r
+ trigger(self.onScroll, {scrollLeft: scrollLeft, scrollTop: scrollTop});\r
+ }\r
+\r
+ function asyncPostProcessRows() {\r
+ while (postProcessFromRow <= postProcessToRow) {\r
+ var row = (vScrollDir >= 0) ? postProcessFromRow++ : postProcessToRow--;\r
+ var cacheEntry = rowsCache[row];\r
+ if (!cacheEntry || row >= getDataLength()) {\r
+ continue;\r
+ }\r
+\r
+ if (!postProcessedRows[row]) {\r
+ postProcessedRows[row] = {};\r
+ }\r
+\r
+ ensureCellNodesInRowsCache(row);\r
+ for (var columnIdx in cacheEntry.cellNodesByColumnIdx) {\r
+ if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(columnIdx)) {\r
+ continue;\r
+ }\r
+\r
+ columnIdx = columnIdx | 0;\r
+\r
+ var m = columns[columnIdx];\r
+ if (m.asyncPostRender && !postProcessedRows[row][columnIdx]) {\r
+ var node = cacheEntry.cellNodesByColumnIdx[columnIdx];\r
+ if (node) {\r
+ m.asyncPostRender(node, row, getDataItem(row), m);\r
+ }\r
+ postProcessedRows[row][columnIdx] = true;\r
+ }\r
+ }\r
+\r
+ h_postrender = setTimeout(asyncPostProcessRows, options.asyncPostRenderDelay);\r
+ return;\r
+ }\r
+ }\r
+\r
+ function updateCellCssStylesOnRenderedRows(addedHash, removedHash) {\r
+ var node, columnId, addedRowHash, removedRowHash;\r
+ for (var row in rowsCache) {\r
+ removedRowHash = removedHash && removedHash[row];\r
+ addedRowHash = addedHash && addedHash[row];\r
+\r
+ if (removedRowHash) {\r
+ for (columnId in removedRowHash) {\r
+ if (!addedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {\r
+ node = getCellNode(row, getColumnIndex(columnId));\r
+ if (node) {\r
+ $(node).removeClass(removedRowHash[columnId]);\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ if (addedRowHash) {\r
+ for (columnId in addedRowHash) {\r
+ if (!removedRowHash || removedRowHash[columnId] != addedRowHash[columnId]) {\r
+ node = getCellNode(row, getColumnIndex(columnId));\r
+ if (node) {\r
+ $(node).addClass(addedRowHash[columnId]);\r
+ }\r
+ }\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ function addCellCssStyles(key, hash) {\r
+ if (cellCssClasses[key]) {\r
+ throw "addCellCssStyles: cell CSS hash with key '" + key + "' already exists.";\r
+ }\r
+\r
+ cellCssClasses[key] = hash;\r
+ updateCellCssStylesOnRenderedRows(hash, null);\r
+\r
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });\r
+ }\r
+\r
+ function removeCellCssStyles(key) {\r
+ if (!cellCssClasses[key]) {\r
+ return;\r
+ }\r
+\r
+ updateCellCssStylesOnRenderedRows(null, cellCssClasses[key]);\r
+ delete cellCssClasses[key];\r
+\r
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": null });\r
+ }\r
+\r
+ function setCellCssStyles(key, hash) {\r
+ var prevHash = cellCssClasses[key];\r
+\r
+ cellCssClasses[key] = hash;\r
+ updateCellCssStylesOnRenderedRows(hash, prevHash);\r
+\r
+ trigger(self.onCellCssStylesChanged, { "key": key, "hash": hash });\r
+ }\r
+\r
+ function getCellCssStyles(key) {\r
+ return cellCssClasses[key];\r
+ }\r
+\r
+ function flashCell(row, cell, speed) {\r
+ speed = speed || 100;\r
+ if (rowsCache[row]) {\r
+ var $cell = $(getCellNode(row, cell));\r
+\r
+ function toggleCellClass(times) {\r
+ if (!times) {\r
+ return;\r
+ }\r
+ setTimeout(function () {\r
+ $cell.queue(function () {\r
+ $cell.toggleClass(options.cellFlashingCssClass).dequeue();\r
+ toggleCellClass(times - 1);\r
+ });\r
+ },\r
+ speed);\r
+ }\r
+\r
+ toggleCellClass(4);\r
+ }\r
+ }\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Interactivity\r
+\r
+ function handleDragInit(e, dd) {\r
+ var cell = getCellFromEvent(e);\r
+ if (!cell || !cellExists(cell.row, cell.cell)) {\r
+ return false;\r
+ }\r
+\r
+ var retval = trigger(self.onDragInit, dd, e);\r
+ if (e.isImmediatePropagationStopped()) {\r
+ return retval;\r
+ }\r
+\r
+ // if nobody claims to be handling drag'n'drop by stopping immediate propagation,\r
+ // cancel out of it\r
+ return false;\r
+ }\r
+\r
+ function handleDragStart(e, dd) {\r
+ var cell = getCellFromEvent(e);\r
+ if (!cell || !cellExists(cell.row, cell.cell)) {\r
+ return false;\r
+ }\r
+\r
+ var retval = trigger(self.onDragStart, dd, e);\r
+ if (e.isImmediatePropagationStopped()) {\r
+ return retval;\r
+ }\r
+\r
+ return false;\r
+ }\r
+\r
+ function handleDrag(e, dd) {\r
+ return trigger(self.onDrag, dd, e);\r
+ }\r
+\r
+ function handleDragEnd(e, dd) {\r
+ trigger(self.onDragEnd, dd, e);\r
+ }\r
+\r
+ function handleKeyDown(e) {\r
+ trigger(self.onKeyDown, {row: activeRow, cell: activeCell}, e);\r
+ var handled = e.isImmediatePropagationStopped();\r
+\r
+ if (!handled) {\r
+ if (!e.shiftKey && !e.altKey && !e.ctrlKey) {\r
+ if (e.which == 27) {\r
+ if (!getEditorLock().isActive()) {\r
+ return; // no editing mode to cancel, allow bubbling and default processing (exit without cancelling the event)\r
+ }\r
+ cancelEditAndSetFocus();\r
+ } else if (e.which == 37) {\r
+ handled = navigateLeft();\r
+ } else if (e.which == 39) {\r
+ handled = navigateRight();\r
+ } else if (e.which == 38) {\r
+ handled = navigateUp();\r
+ } else if (e.which == 40) {\r
+ handled = navigateDown();\r
+ } else if (e.which == 9) {\r
+ handled = navigateNext();\r
+ } else if (e.which == 13) {\r
+ if (options.editable) {\r
+ if (currentEditor) {\r
+ // adding new row\r
+ if (activeRow === getDataLength()) {\r
+ navigateDown();\r
+ } else {\r
+ commitEditAndSetFocus();\r
+ }\r
+ } else {\r
+ if (getEditorLock().commitCurrentEdit()) {\r
+ makeActiveCellEditable();\r
+ }\r
+ }\r
+ }\r
+ handled = true;\r
+ }\r
+ } else if (e.which == 9 && e.shiftKey && !e.ctrlKey && !e.altKey) {\r
+ handled = navigatePrev();\r
+ }\r
+ }\r
+\r
+ if (handled) {\r
+ // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it\r
+ e.stopPropagation();\r
+ e.preventDefault();\r
+ try {\r
+ e.originalEvent.keyCode = 0; // prevent default behaviour for special keys in IE browsers (F3, F5, etc.)\r
+ }\r
+ // ignore exceptions - setting the original event's keycode throws access denied exception for "Ctrl"\r
+ // (hitting control key only, nothing else), "Shift" (maybe others)\r
+ catch (error) {\r
+ }\r
+ }\r
+ }\r
+\r
+ function handleClick(e) {\r
+ if (!currentEditor) {\r
+ // if this click resulted in some cell child node getting focus,\r
+ // don't steal it back - keyboard events will still bubble up\r
+ if (e.target != document.activeElement) {\r
+ setFocus();\r
+ }\r
+ }\r
+\r
+ var cell = getCellFromEvent(e);\r
+ if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {\r
+ return;\r
+ }\r
+\r
+ trigger(self.onClick, {row: cell.row, cell: cell.cell}, e);\r
+ if (e.isImmediatePropagationStopped()) {\r
+ return;\r
+ }\r
+\r
+ if ((activeCell != cell.cell || activeRow != cell.row) && canCellBeActive(cell.row, cell.cell)) {\r
+ if (!getEditorLock().isActive() || getEditorLock().commitCurrentEdit()) {\r
+ scrollRowIntoView(cell.row, false);\r
+ setActiveCellInternal(getCellNode(cell.row, cell.cell), (cell.row === getDataLength()) || options.autoEdit);\r
+ }\r
+ }\r
+ }\r
+\r
+ function handleContextMenu(e) {\r
+ var $cell = $(e.target).closest(".slick-cell", $canvas);\r
+ if ($cell.length === 0) {\r
+ return;\r
+ }\r
+\r
+ // are we editing this cell?\r
+ if (activeCellNode === $cell[0] && currentEditor !== null) {\r
+ return;\r
+ }\r
+\r
+ trigger(self.onContextMenu, {}, e);\r
+ }\r
+\r
+ function handleDblClick(e) {\r
+ var cell = getCellFromEvent(e);\r
+ if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {\r
+ return;\r
+ }\r
+\r
+ trigger(self.onDblClick, {row: cell.row, cell: cell.cell}, e);\r
+ if (e.isImmediatePropagationStopped()) {\r
+ return;\r
+ }\r
+\r
+ if (options.editable) {\r
+ gotoCell(cell.row, cell.cell, true);\r
+ }\r
+ }\r
+\r
+ function handleHeaderMouseEnter(e) {\r
+ trigger(self.onHeaderMouseEnter, {\r
+ "column": $(this).data("column")\r
+ }, e);\r
+ }\r
+\r
+ function handleHeaderMouseLeave(e) {\r
+ trigger(self.onHeaderMouseLeave, {\r
+ "column": $(this).data("column")\r
+ }, e);\r
+ }\r
+\r
+ function handleHeaderContextMenu(e) {\r
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");\r
+ var column = $header && $header.data("column");\r
+ trigger(self.onHeaderContextMenu, {column: column}, e);\r
+ }\r
+\r
+ function handleHeaderClick(e) {\r
+ var $header = $(e.target).closest(".slick-header-column", ".slick-header-columns");\r
+ var column = $header && $header.data("column");\r
+ if (column) {\r
+ trigger(self.onHeaderClick, {column: column}, e);\r
+ }\r
+ }\r
+\r
+ function handleMouseEnter(e) {\r
+ trigger(self.onMouseEnter, {}, e);\r
+ }\r
+\r
+ function handleMouseLeave(e) {\r
+ trigger(self.onMouseLeave, {}, e);\r
+ }\r
+\r
+ function cellExists(row, cell) {\r
+ return !(row < 0 || row >= getDataLength() || cell < 0 || cell >= columns.length);\r
+ }\r
+\r
+ function getCellFromPoint(x, y) {\r
+ var row = getRowFromPosition(y);\r
+ var cell = 0;\r
+\r
+ var w = 0;\r
+ for (var i = 0; i < columns.length && w < x; i++) {\r
+ w += columns[i].width;\r
+ cell++;\r
+ }\r
+\r
+ if (cell < 0) {\r
+ cell = 0;\r
+ }\r
+\r
+ return {row: row, cell: cell - 1};\r
+ }\r
+\r
+ function getCellFromNode(cellNode) {\r
+ // read column number from .l<columnNumber> CSS class\r
+ var cls = /l\d+/.exec(cellNode.className);\r
+ if (!cls) {\r
+ throw "getCellFromNode: cannot get cell - " + cellNode.className;\r
+ }\r
+ return parseInt(cls[0].substr(1, cls[0].length - 1), 10);\r
+ }\r
+\r
+ function getRowFromNode(rowNode) {\r
+ for (var row in rowsCache) {\r
+ if (rowsCache[row].rowNode === rowNode) {\r
+ return row | 0;\r
+ }\r
+ }\r
+\r
+ return null;\r
+ }\r
+\r
+ function getCellFromEvent(e) {\r
+ var $cell = $(e.target).closest(".slick-cell", $canvas);\r
+ if (!$cell.length) {\r
+ return null;\r
+ }\r
+\r
+ var row = getRowFromNode($cell[0].parentNode);\r
+ var cell = getCellFromNode($cell[0]);\r
+\r
+ if (row == null || cell == null) {\r
+ return null;\r
+ } else {\r
+ return {\r
+ "row": row,\r
+ "cell": cell\r
+ };\r
+ }\r
+ }\r
+\r
+ function getCellNodeBox(row, cell) {\r
+ if (!cellExists(row, cell)) {\r
+ return null;\r
+ }\r
+\r
+ var y1 = getRowTop(row);\r
+ var y2 = y1 + options.rowHeight - 1;\r
+ var x1 = 0;\r
+ for (var i = 0; i < cell; i++) {\r
+ x1 += columns[i].width;\r
+ }\r
+ var x2 = x1 + columns[cell].width;\r
+\r
+ return {\r
+ top: y1,\r
+ left: x1,\r
+ bottom: y2,\r
+ right: x2\r
+ };\r
+ }\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Cell switching\r
+\r
+ function resetActiveCell() {\r
+ setActiveCellInternal(null, false);\r
+ }\r
+\r
+ function setFocus() {\r
+ if (tabbingDirection == -1) {\r
+ $focusSink[0].focus();\r
+ } else {\r
+ $focusSink2[0].focus();\r
+ }\r
+ }\r
+\r
+ function scrollCellIntoView(row, cell, doPaging) {\r
+ scrollRowIntoView(row, doPaging);\r
+\r
+ var colspan = getColspan(row, cell);\r
+ var left = columnPosLeft[cell],\r
+ right = columnPosRight[cell + (colspan > 1 ? colspan - 1 : 0)],\r
+ scrollRight = scrollLeft + viewportW;\r
+\r
+ if (left < scrollLeft) {\r
+ $viewport.scrollLeft(left);\r
+ handleScroll();\r
+ render();\r
+ } else if (right > scrollRight) {\r
+ $viewport.scrollLeft(Math.min(left, right - $viewport[0].clientWidth));\r
+ handleScroll();\r
+ render();\r
+ }\r
+ }\r
+\r
+ function setActiveCellInternal(newCell, editMode) {\r
+ if (activeCellNode !== null) {\r
+ makeActiveCellNormal();\r
+ $(activeCellNode).removeClass("active");\r
+ if (rowsCache[activeRow]) {\r
+ $(rowsCache[activeRow].rowNode).removeClass("active");\r
+ }\r
+ }\r
+\r
+ var activeCellChanged = (activeCellNode !== newCell);\r
+ activeCellNode = newCell;\r
+\r
+ if (activeCellNode != null) {\r
+ activeRow = getRowFromNode(activeCellNode.parentNode);\r
+ activeCell = activePosX = getCellFromNode(activeCellNode);\r
+\r
+ $(activeCellNode).addClass("active");\r
+ $(rowsCache[activeRow].rowNode).addClass("active");\r
+\r
+ if (options.editable && editMode && isCellPotentiallyEditable(activeRow, activeCell)) {\r
+ clearTimeout(h_editorLoader);\r
+\r
+ if (options.asyncEditorLoading) {\r
+ h_editorLoader = setTimeout(function () {\r
+ makeActiveCellEditable();\r
+ }, options.asyncEditorLoadDelay);\r
+ } else {\r
+ makeActiveCellEditable();\r
+ }\r
+ }\r
+ } else {\r
+ activeRow = activeCell = null;\r
+ }\r
+\r
+ if (activeCellChanged) {\r
+ trigger(self.onActiveCellChanged, getActiveCell());\r
+ }\r
+ }\r
+\r
+ function clearTextSelection() {\r
+ if (document.selection && document.selection.empty) {\r
+ try {\r
+ //IE fails here if selected element is not in dom\r
+ document.selection.empty();\r
+ } catch (e) { }\r
+ } else if (window.getSelection) {\r
+ var sel = window.getSelection();\r
+ if (sel && sel.removeAllRanges) {\r
+ sel.removeAllRanges();\r
+ }\r
+ }\r
+ }\r
+\r
+ function isCellPotentiallyEditable(row, cell) {\r
+ // is the data for this row loaded?\r
+ if (row < getDataLength() && !getDataItem(row)) {\r
+ return false;\r
+ }\r
+\r
+ // are we in the Add New row? can we create new from this cell?\r
+ if (columns[cell].cannotTriggerInsert && row >= getDataLength()) {\r
+ return false;\r
+ }\r
+\r
+ // does this cell have an editor?\r
+ if (!getEditor(row, cell)) {\r
+ return false;\r
+ }\r
+\r
+ return true;\r
+ }\r
+\r
+ function makeActiveCellNormal() {\r
+ if (!currentEditor) {\r
+ return;\r
+ }\r
+ trigger(self.onBeforeCellEditorDestroy, {editor: currentEditor});\r
+ currentEditor.destroy();\r
+ currentEditor = null;\r
+\r
+ if (activeCellNode) {\r
+ var d = getDataItem(activeRow);\r
+ $(activeCellNode).removeClass("editable invalid");\r
+ if (d) {\r
+ var column = columns[activeCell];\r
+ var formatter = getFormatter(activeRow, column);\r
+ activeCellNode.innerHTML = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d);\r
+ invalidatePostProcessingResults(activeRow);\r
+ }\r
+ }\r
+\r
+ // if there previously was text selected on a page (such as selected text in the edit cell just removed),\r
+ // IE can't set focus to anything else correctly\r
+ if (navigator.userAgent.toLowerCase().match(/msie/)) {\r
+ clearTextSelection();\r
+ }\r
+\r
+ getEditorLock().deactivate(editController);\r
+ }\r
+\r
+ function makeActiveCellEditable(editor) {\r
+ if (!activeCellNode) {\r
+ return;\r
+ }\r
+ if (!options.editable) {\r
+ throw "Grid : makeActiveCellEditable : should never get called when options.editable is false";\r
+ }\r
+\r
+ // cancel pending async call if there is one\r
+ clearTimeout(h_editorLoader);\r
+\r
+ if (!isCellPotentiallyEditable(activeRow, activeCell)) {\r
+ return;\r
+ }\r
+\r
+ var columnDef = columns[activeCell];\r
+ var item = getDataItem(activeRow);\r
+\r
+ if (trigger(self.onBeforeEditCell, {row: activeRow, cell: activeCell, item: item, column: columnDef}) === false) {\r
+ setFocus();\r
+ return;\r
+ }\r
+\r
+ getEditorLock().activate(editController);\r
+ $(activeCellNode).addClass("editable");\r
+\r
+ // don't clear the cell if a custom editor is passed through\r
+ if (!editor) {\r
+ activeCellNode.innerHTML = "";\r
+ }\r
+\r
+ currentEditor = new (editor || getEditor(activeRow, activeCell))({\r
+ grid: self,\r
+ gridPosition: absBox($container[0]),\r
+ position: absBox(activeCellNode),\r
+ container: activeCellNode,\r
+ column: columnDef,\r
+ item: item || {},\r
+ commitChanges: commitEditAndSetFocus,\r
+ cancelChanges: cancelEditAndSetFocus\r
+ });\r
+\r
+ if (item) {\r
+ currentEditor.loadValue(item);\r
+ }\r
+\r
+ serializedEditorValue = currentEditor.serializeValue();\r
+\r
+ if (currentEditor.position) {\r
+ handleActiveCellPositionChange();\r
+ }\r
+ }\r
+\r
+ function commitEditAndSetFocus() {\r
+ // if the commit fails, it would do so due to a validation error\r
+ // if so, do not steal the focus from the editor\r
+ if (getEditorLock().commitCurrentEdit()) {\r
+ setFocus();\r
+ if (options.autoEdit) {\r
+ navigateDown();\r
+ }\r
+ }\r
+ }\r
+\r
+ function cancelEditAndSetFocus() {\r
+ if (getEditorLock().cancelCurrentEdit()) {\r
+ setFocus();\r
+ }\r
+ }\r
+\r
+ function absBox(elem) {\r
+ var box = {\r
+ top: elem.offsetTop,\r
+ left: elem.offsetLeft,\r
+ bottom: 0,\r
+ right: 0,\r
+ width: $(elem).outerWidth(),\r
+ height: $(elem).outerHeight(),\r
+ visible: true};\r
+ box.bottom = box.top + box.height;\r
+ box.right = box.left + box.width;\r
+\r
+ // walk up the tree\r
+ var offsetParent = elem.offsetParent;\r
+ while ((elem = elem.parentNode) != document.body) {\r
+ if (box.visible && elem.scrollHeight != elem.offsetHeight && $(elem).css("overflowY") != "visible") {\r
+ box.visible = box.bottom > elem.scrollTop && box.top < elem.scrollTop + elem.clientHeight;\r
+ }\r
+\r
+ if (box.visible && elem.scrollWidth != elem.offsetWidth && $(elem).css("overflowX") != "visible") {\r
+ box.visible = box.right > elem.scrollLeft && box.left < elem.scrollLeft + elem.clientWidth;\r
+ }\r
+\r
+ box.left -= elem.scrollLeft;\r
+ box.top -= elem.scrollTop;\r
+\r
+ if (elem === offsetParent) {\r
+ box.left += elem.offsetLeft;\r
+ box.top += elem.offsetTop;\r
+ offsetParent = elem.offsetParent;\r
+ }\r
+\r
+ box.bottom = box.top + box.height;\r
+ box.right = box.left + box.width;\r
+ }\r
+\r
+ return box;\r
+ }\r
+\r
+ function getActiveCellPosition() {\r
+ return absBox(activeCellNode);\r
+ }\r
+\r
+ function getGridPosition() {\r
+ return absBox($container[0])\r
+ }\r
+\r
+ function handleActiveCellPositionChange() {\r
+ if (!activeCellNode) {\r
+ return;\r
+ }\r
+\r
+ trigger(self.onActiveCellPositionChanged, {});\r
+\r
+ if (currentEditor) {\r
+ var cellBox = getActiveCellPosition();\r
+ if (currentEditor.show && currentEditor.hide) {\r
+ if (!cellBox.visible) {\r
+ currentEditor.hide();\r
+ } else {\r
+ currentEditor.show();\r
+ }\r
+ }\r
+\r
+ if (currentEditor.position) {\r
+ currentEditor.position(cellBox);\r
+ }\r
+ }\r
+ }\r
+\r
+ function getCellEditor() {\r
+ return currentEditor;\r
+ }\r
+\r
+ function getActiveCell() {\r
+ if (!activeCellNode) {\r
+ return null;\r
+ } else {\r
+ return {row: activeRow, cell: activeCell};\r
+ }\r
+ }\r
+\r
+ function getActiveCellNode() {\r
+ return activeCellNode;\r
+ }\r
+\r
+ function scrollRowIntoView(row, doPaging) {\r
+ var rowAtTop = row * options.rowHeight;\r
+ var rowAtBottom = (row + 1) * options.rowHeight - viewportH + (viewportHasHScroll ? scrollbarDimensions.height : 0);\r
+\r
+ // need to page down?\r
+ if ((row + 1) * options.rowHeight > scrollTop + viewportH + offset) {\r
+ scrollTo(doPaging ? rowAtTop : rowAtBottom);\r
+ render();\r
+ }\r
+ // or page up?\r
+ else if (row * options.rowHeight < scrollTop + offset) {\r
+ scrollTo(doPaging ? rowAtBottom : rowAtTop);\r
+ render();\r
+ }\r
+ }\r
+\r
+ function scrollRowToTop(row) {\r
+ scrollTo(row * options.rowHeight);\r
+ render();\r
+ }\r
+\r
+ function getColspan(row, cell) {\r
+ var metadata = data.getItemMetadata && data.getItemMetadata(row);\r
+ if (!metadata || !metadata.columns) {\r
+ return 1;\r
+ }\r
+\r
+ var columnData = metadata.columns[columns[cell].id] || metadata.columns[cell];\r
+ var colspan = (columnData && columnData.colspan);\r
+ if (colspan === "*") {\r
+ colspan = columns.length - cell;\r
+ } else {\r
+ colspan = colspan || 1;\r
+ }\r
+\r
+ return colspan;\r
+ }\r
+\r
+ function findFirstFocusableCell(row) {\r
+ var cell = 0;\r
+ while (cell < columns.length) {\r
+ if (canCellBeActive(row, cell)) {\r
+ return cell;\r
+ }\r
+ cell += getColspan(row, cell);\r
+ }\r
+ return null;\r
+ }\r
+\r
+ function findLastFocusableCell(row) {\r
+ var cell = 0;\r
+ var lastFocusableCell = null;\r
+ while (cell < columns.length) {\r
+ if (canCellBeActive(row, cell)) {\r
+ lastFocusableCell = cell;\r
+ }\r
+ cell += getColspan(row, cell);\r
+ }\r
+ return lastFocusableCell;\r
+ }\r
+\r
+ function gotoRight(row, cell, posX) {\r
+ if (cell >= columns.length) {\r
+ return null;\r
+ }\r
+\r
+ do {\r
+ cell += getColspan(row, cell);\r
+ }\r
+ while (cell < columns.length && !canCellBeActive(row, cell));\r
+\r
+ if (cell < columns.length) {\r
+ return {\r
+ "row": row,\r
+ "cell": cell,\r
+ "posX": cell\r
+ };\r
+ }\r
+ return null;\r
+ }\r
+\r
+ function gotoLeft(row, cell, posX) {\r
+ if (cell <= 0) {\r
+ return null;\r
+ }\r
+\r
+ var firstFocusableCell = findFirstFocusableCell(row);\r
+ if (firstFocusableCell === null || firstFocusableCell >= cell) {\r
+ return null;\r
+ }\r
+\r
+ var prev = {\r
+ "row": row,\r
+ "cell": firstFocusableCell,\r
+ "posX": firstFocusableCell\r
+ };\r
+ var pos;\r
+ while (true) {\r
+ pos = gotoRight(prev.row, prev.cell, prev.posX);\r
+ if (!pos) {\r
+ return null;\r
+ }\r
+ if (pos.cell >= cell) {\r
+ return prev;\r
+ }\r
+ prev = pos;\r
+ }\r
+ }\r
+\r
+ function gotoDown(row, cell, posX) {\r
+ var prevCell;\r
+ while (true) {\r
+ if (++row >= getDataLength() + (options.enableAddRow ? 1 : 0)) {\r
+ return null;\r
+ }\r
+\r
+ prevCell = cell = 0;\r
+ while (cell <= posX) {\r
+ prevCell = cell;\r
+ cell += getColspan(row, cell);\r
+ }\r
+\r
+ if (canCellBeActive(row, prevCell)) {\r
+ return {\r
+ "row": row,\r
+ "cell": prevCell,\r
+ "posX": posX\r
+ };\r
+ }\r
+ }\r
+ }\r
+\r
+ function gotoUp(row, cell, posX) {\r
+ var prevCell;\r
+ while (true) {\r
+ if (--row < 0) {\r
+ return null;\r
+ }\r
+\r
+ prevCell = cell = 0;\r
+ while (cell <= posX) {\r
+ prevCell = cell;\r
+ cell += getColspan(row, cell);\r
+ }\r
+\r
+ if (canCellBeActive(row, prevCell)) {\r
+ return {\r
+ "row": row,\r
+ "cell": prevCell,\r
+ "posX": posX\r
+ };\r
+ }\r
+ }\r
+ }\r
+\r
+ function gotoNext(row, cell, posX) {\r
+ if (row == null && cell == null) {\r
+ row = cell = posX = 0;\r
+ if (canCellBeActive(row, cell)) {\r
+ return {\r
+ "row": row,\r
+ "cell": cell,\r
+ "posX": cell\r
+ };\r
+ }\r
+ }\r
+\r
+ var pos = gotoRight(row, cell, posX);\r
+ if (pos) {\r
+ return pos;\r
+ }\r
+\r
+ var firstFocusableCell = null;\r
+ while (++row < getDataLength() + (options.enableAddRow ? 1 : 0)) {\r
+ firstFocusableCell = findFirstFocusableCell(row);\r
+ if (firstFocusableCell !== null) {\r
+ return {\r
+ "row": row,\r
+ "cell": firstFocusableCell,\r
+ "posX": firstFocusableCell\r
+ };\r
+ }\r
+ }\r
+ return null;\r
+ }\r
+\r
+ function gotoPrev(row, cell, posX) {\r
+ if (row == null && cell == null) {\r
+ row = getDataLength() + (options.enableAddRow ? 1 : 0) - 1;\r
+ cell = posX = columns.length - 1;\r
+ if (canCellBeActive(row, cell)) {\r
+ return {\r
+ "row": row,\r
+ "cell": cell,\r
+ "posX": cell\r
+ };\r
+ }\r
+ }\r
+\r
+ var pos;\r
+ var lastSelectableCell;\r
+ while (!pos) {\r
+ pos = gotoLeft(row, cell, posX);\r
+ if (pos) {\r
+ break;\r
+ }\r
+ if (--row < 0) {\r
+ return null;\r
+ }\r
+\r
+ cell = 0;\r
+ lastSelectableCell = findLastFocusableCell(row);\r
+ if (lastSelectableCell !== null) {\r
+ pos = {\r
+ "row": row,\r
+ "cell": lastSelectableCell,\r
+ "posX": lastSelectableCell\r
+ };\r
+ }\r
+ }\r
+ return pos;\r
+ }\r
+\r
+ function navigateRight() {\r
+ return navigate("right");\r
+ }\r
+\r
+ function navigateLeft() {\r
+ return navigate("left");\r
+ }\r
+\r
+ function navigateDown() {\r
+ return navigate("down");\r
+ }\r
+\r
+ function navigateUp() {\r
+ return navigate("up");\r
+ }\r
+\r
+ function navigateNext() {\r
+ return navigate("next");\r
+ }\r
+\r
+ function navigatePrev() {\r
+ return navigate("prev");\r
+ }\r
+\r
+ /**\r
+ * @param {string} dir Navigation direction.\r
+ * @return {boolean} Whether navigation resulted in a change of active cell.\r
+ */\r
+ function navigate(dir) {\r
+ if (!options.enableCellNavigation) {\r
+ return false;\r
+ }\r
+\r
+ if (!activeCellNode && dir != "prev" && dir != "next") {\r
+ return false;\r
+ }\r
+\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ return true;\r
+ }\r
+ setFocus();\r
+\r
+ var tabbingDirections = {\r
+ "up": -1,\r
+ "down": 1,\r
+ "left": -1,\r
+ "right": 1,\r
+ "prev": -1,\r
+ "next": 1\r
+ };\r
+ tabbingDirection = tabbingDirections[dir];\r
+\r
+ var stepFunctions = {\r
+ "up": gotoUp,\r
+ "down": gotoDown,\r
+ "left": gotoLeft,\r
+ "right": gotoRight,\r
+ "prev": gotoPrev,\r
+ "next": gotoNext\r
+ };\r
+ var stepFn = stepFunctions[dir];\r
+ var pos = stepFn(activeRow, activeCell, activePosX);\r
+ if (pos) {\r
+ var isAddNewRow = (pos.row == getDataLength());\r
+ scrollCellIntoView(pos.row, pos.cell, !isAddNewRow);\r
+ setActiveCellInternal(getCellNode(pos.row, pos.cell), isAddNewRow || options.autoEdit);\r
+ activePosX = pos.posX;\r
+ return true;\r
+ } else {\r
+ setActiveCellInternal(getCellNode(activeRow, activeCell), (activeRow == getDataLength()) || options.autoEdit);\r
+ return false;\r
+ }\r
+ }\r
+\r
+ function getCellNode(row, cell) {\r
+ if (rowsCache[row]) {\r
+ ensureCellNodesInRowsCache(row);\r
+ return rowsCache[row].cellNodesByColumnIdx[cell];\r
+ }\r
+ return null;\r
+ }\r
+\r
+ function setActiveCell(row, cell) {\r
+ if (!initialized) { return; }\r
+ if (row > getDataLength() || row < 0 || cell >= columns.length || cell < 0) {\r
+ return;\r
+ }\r
+\r
+ if (!options.enableCellNavigation) {\r
+ return;\r
+ }\r
+\r
+ scrollCellIntoView(row, cell, false);\r
+ setActiveCellInternal(getCellNode(row, cell), false);\r
+ }\r
+\r
+ function canCellBeActive(row, cell) {\r
+ if (!options.enableCellNavigation || row >= getDataLength() + (options.enableAddRow ? 1 : 0) ||\r
+ row < 0 || cell >= columns.length || cell < 0) {\r
+ return false;\r
+ }\r
+\r
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);\r
+ if (rowMetadata && typeof rowMetadata.focusable === "boolean") {\r
+ return rowMetadata.focusable;\r
+ }\r
+\r
+ var columnMetadata = rowMetadata && rowMetadata.columns;\r
+ if (columnMetadata && columnMetadata[columns[cell].id] && typeof columnMetadata[columns[cell].id].focusable === "boolean") {\r
+ return columnMetadata[columns[cell].id].focusable;\r
+ }\r
+ if (columnMetadata && columnMetadata[cell] && typeof columnMetadata[cell].focusable === "boolean") {\r
+ return columnMetadata[cell].focusable;\r
+ }\r
+\r
+ return columns[cell].focusable;\r
+ }\r
+\r
+ function canCellBeSelected(row, cell) {\r
+ if (row >= getDataLength() || row < 0 || cell >= columns.length || cell < 0) {\r
+ return false;\r
+ }\r
+\r
+ var rowMetadata = data.getItemMetadata && data.getItemMetadata(row);\r
+ if (rowMetadata && typeof rowMetadata.selectable === "boolean") {\r
+ return rowMetadata.selectable;\r
+ }\r
+\r
+ var columnMetadata = rowMetadata && rowMetadata.columns && (rowMetadata.columns[columns[cell].id] || rowMetadata.columns[cell]);\r
+ if (columnMetadata && typeof columnMetadata.selectable === "boolean") {\r
+ return columnMetadata.selectable;\r
+ }\r
+\r
+ return columns[cell].selectable;\r
+ }\r
+\r
+ function gotoCell(row, cell, forceEdit) {\r
+ if (!initialized) { return; }\r
+ if (!canCellBeActive(row, cell)) {\r
+ return;\r
+ }\r
+\r
+ if (!getEditorLock().commitCurrentEdit()) {\r
+ return;\r
+ }\r
+\r
+ scrollCellIntoView(row, cell, false);\r
+\r
+ var newCell = getCellNode(row, cell);\r
+\r
+ // if selecting the 'add new' row, start editing right away\r
+ setActiveCellInternal(newCell, forceEdit || (row === getDataLength()) || options.autoEdit);\r
+\r
+ // if no editor was created, set the focus back on the grid\r
+ if (!currentEditor) {\r
+ setFocus();\r
+ }\r
+ }\r
+\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // IEditor implementation for the editor lock\r
+\r
+ function commitCurrentEdit() {\r
+ var item = getDataItem(activeRow);\r
+ var column = columns[activeCell];\r
+\r
+ if (currentEditor) {\r
+ if (currentEditor.isValueChanged()) {\r
+ var validationResults = currentEditor.validate();\r
+\r
+ if (validationResults.valid) {\r
+ if (activeRow < getDataLength()) {\r
+ var editCommand = {\r
+ row: activeRow,\r
+ cell: activeCell,\r
+ editor: currentEditor,\r
+ serializedValue: currentEditor.serializeValue(),\r
+ prevSerializedValue: serializedEditorValue,\r
+ execute: function () {\r
+ this.editor.applyValue(item, this.serializedValue);\r
+ updateRow(this.row);\r
+ },\r
+ undo: function () {\r
+ this.editor.applyValue(item, this.prevSerializedValue);\r
+ updateRow(this.row);\r
+ }\r
+ };\r
+\r
+ if (options.editCommandHandler) {\r
+ makeActiveCellNormal();\r
+ options.editCommandHandler(item, column, editCommand);\r
+ } else {\r
+ editCommand.execute();\r
+ makeActiveCellNormal();\r
+ }\r
+\r
+ trigger(self.onCellChange, {\r
+ row: activeRow,\r
+ cell: activeCell,\r
+ item: item\r
+ });\r
+ } else {\r
+ var newItem = {};\r
+ currentEditor.applyValue(newItem, currentEditor.serializeValue());\r
+ makeActiveCellNormal();\r
+ trigger(self.onAddNewRow, {item: newItem, column: column});\r
+ }\r
+\r
+ // check whether the lock has been re-acquired by event handlers\r
+ return !getEditorLock().isActive();\r
+ } else {\r
+ // Re-add the CSS class to trigger transitions, if any.\r
+ $(activeCellNode).removeClass("invalid");\r
+ $(activeCellNode).width(); // force layout\r
+ $(activeCellNode).addClass("invalid");\r
+\r
+ trigger(self.onValidationError, {\r
+ editor: currentEditor,\r
+ cellNode: activeCellNode,\r
+ validationResults: validationResults,\r
+ row: activeRow,\r
+ cell: activeCell,\r
+ column: column\r
+ });\r
+\r
+ currentEditor.focus();\r
+ return false;\r
+ }\r
+ }\r
+\r
+ makeActiveCellNormal();\r
+ }\r
+ return true;\r
+ }\r
+\r
+ function cancelCurrentEdit() {\r
+ makeActiveCellNormal();\r
+ return true;\r
+ }\r
+\r
+ function rowsToRanges(rows) {\r
+ var ranges = [];\r
+ var lastCell = columns.length - 1;\r
+ for (var i = 0; i < rows.length; i++) {\r
+ ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));\r
+ }\r
+ return ranges;\r
+ }\r
+\r
+ function getSelectedRows() {\r
+ if (!selectionModel) {\r
+ throw "Selection model is not set";\r
+ }\r
+ return selectedRows;\r
+ }\r
+\r
+ function setSelectedRows(rows) {\r
+ if (!selectionModel) {\r
+ throw "Selection model is not set";\r
+ }\r
+ selectionModel.setSelectedRanges(rowsToRanges(rows));\r
+ }\r
+\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Debug\r
+\r
+ this.debug = function () {\r
+ var s = "";\r
+\r
+ s += ("\n" + "counter_rows_rendered: " + counter_rows_rendered);\r
+ s += ("\n" + "counter_rows_removed: " + counter_rows_removed);\r
+ s += ("\n" + "renderedRows: " + renderedRows);\r
+ s += ("\n" + "numVisibleRows: " + numVisibleRows);\r
+ s += ("\n" + "maxSupportedCssHeight: " + maxSupportedCssHeight);\r
+ s += ("\n" + "n(umber of pages): " + n);\r
+ s += ("\n" + "(current) page: " + page);\r
+ s += ("\n" + "page height (ph): " + ph);\r
+ s += ("\n" + "vScrollDir: " + vScrollDir);\r
+\r
+ alert(s);\r
+ };\r
+\r
+ // a debug helper to be able to access private members\r
+ this.eval = function (expr) {\r
+ return eval(expr);\r
+ };\r
+\r
+ //////////////////////////////////////////////////////////////////////////////////////////////\r
+ // Public API\r
+\r
+ $.extend(this, {\r
+ "slickGridVersion": "2.1",\r
+\r
+ // Events\r
+ "onScroll": new Slick.Event(),\r
+ "onSort": new Slick.Event(),\r
+ "onHeaderMouseEnter": new Slick.Event(),\r
+ "onHeaderMouseLeave": new Slick.Event(),\r
+ "onHeaderContextMenu": new Slick.Event(),\r
+ "onHeaderClick": new Slick.Event(),\r
+ "onHeaderCellRendered": new Slick.Event(),\r
+ "onBeforeHeaderCellDestroy": new Slick.Event(),\r
+ "onHeaderRowCellRendered": new Slick.Event(),\r
+ "onBeforeHeaderRowCellDestroy": new Slick.Event(),\r
+ "onMouseEnter": new Slick.Event(),\r
+ "onMouseLeave": new Slick.Event(),\r
+ "onClick": new Slick.Event(),\r
+ "onDblClick": new Slick.Event(),\r
+ "onContextMenu": new Slick.Event(),\r
+ "onKeyDown": new Slick.Event(),\r
+ "onAddNewRow": new Slick.Event(),\r
+ "onValidationError": new Slick.Event(),\r
+ "onViewportChanged": new Slick.Event(),\r
+ "onColumnsReordered": new Slick.Event(),\r
+ "onColumnsResized": new Slick.Event(),\r
+ "onCellChange": new Slick.Event(),\r
+ "onBeforeEditCell": new Slick.Event(),\r
+ "onBeforeCellEditorDestroy": new Slick.Event(),\r
+ "onBeforeDestroy": new Slick.Event(),\r
+ "onActiveCellChanged": new Slick.Event(),\r
+ "onActiveCellPositionChanged": new Slick.Event(),\r
+ "onDragInit": new Slick.Event(),\r
+ "onDragStart": new Slick.Event(),\r
+ "onDrag": new Slick.Event(),\r
+ "onDragEnd": new Slick.Event(),\r
+ "onSelectedRowsChanged": new Slick.Event(),\r
+ "onCellCssStylesChanged": new Slick.Event(),\r
+\r
+ // Methods\r
+ "registerPlugin": registerPlugin,\r
+ "unregisterPlugin": unregisterPlugin,\r
+ "getColumns": getColumns,\r
+ "setColumns": setColumns,\r
+ "getColumnIndex": getColumnIndex,\r
+ "updateColumnHeader": updateColumnHeader,\r
+ "setSortColumn": setSortColumn,\r
+ "setSortColumns": setSortColumns,\r
+ "getSortColumns": getSortColumns,\r
+ "autosizeColumns": autosizeColumns,\r
+ "getOptions": getOptions,\r
+ "setOptions": setOptions,\r
+ "getData": getData,\r
+ "getDataLength": getDataLength,\r
+ "getDataItem": getDataItem,\r
+ "setData": setData,\r
+ "getSelectionModel": getSelectionModel,\r
+ "setSelectionModel": setSelectionModel,\r
+ "getSelectedRows": getSelectedRows,\r
+ "setSelectedRows": setSelectedRows,\r
+ "getContainerNode": getContainerNode,\r
+\r
+ "render": render,\r
+ "invalidate": invalidate,\r
+ "invalidateRow": invalidateRow,\r
+ "invalidateRows": invalidateRows,\r
+ "invalidateAllRows": invalidateAllRows,\r
+ "updateCell": updateCell,\r
+ "updateRow": updateRow,\r
+ "getViewport": getVisibleRange,\r
+ "getRenderedRange": getRenderedRange,\r
+ "resizeCanvas": resizeCanvas,\r
+ "updateRowCount": updateRowCount,\r
+ "scrollRowIntoView": scrollRowIntoView,\r
+ "scrollRowToTop": scrollRowToTop,\r
+ "scrollCellIntoView": scrollCellIntoView,\r
+ "getCanvasNode": getCanvasNode,\r
+ "focus": setFocus,\r
+\r
+ "getCellFromPoint": getCellFromPoint,\r
+ "getCellFromEvent": getCellFromEvent,\r
+ "getActiveCell": getActiveCell,\r
+ "setActiveCell": setActiveCell,\r
+ "getActiveCellNode": getActiveCellNode,\r
+ "getActiveCellPosition": getActiveCellPosition,\r
+ "resetActiveCell": resetActiveCell,\r
+ "editActiveCell": makeActiveCellEditable,\r
+ "getCellEditor": getCellEditor,\r
+ "getCellNode": getCellNode,\r
+ "getCellNodeBox": getCellNodeBox,\r
+ "canCellBeSelected": canCellBeSelected,\r
+ "canCellBeActive": canCellBeActive,\r
+ "navigatePrev": navigatePrev,\r
+ "navigateNext": navigateNext,\r
+ "navigateUp": navigateUp,\r
+ "navigateDown": navigateDown,\r
+ "navigateLeft": navigateLeft,\r
+ "navigateRight": navigateRight,\r
+ "gotoCell": gotoCell,\r
+ "getTopPanel": getTopPanel,\r
+ "setTopPanelVisibility": setTopPanelVisibility,\r
+ "setHeaderRowVisibility": setHeaderRowVisibility,\r
+ "getHeaderRow": getHeaderRow,\r
+ "getHeaderRowColumn": getHeaderRowColumn,\r
+ "getGridPosition": getGridPosition,\r
+ "flashCell": flashCell,\r
+ "addCellCssStyles": addCellCssStyles,\r
+ "setCellCssStyles": setCellCssStyles,\r
+ "removeCellCssStyles": removeCellCssStyles,\r
+ "getCellCssStyles": getCellCssStyles,\r
+\r
+ "init": finishInitialization,\r
+ "destroy": destroy,\r
+\r
+ // IEditor implementation\r
+ "getEditorLock": getEditorLock,\r
+ "getEditController": getEditController\r
+ });\r
+\r
+ init();\r
+ }\r
+}(jQuery));\r
git://git.onelab.eu / unfold.git / blobdiff