/** * @license * (c) 2009-2016 Michael Leibman * michael{dot}leibman{at}gmail{dot}com * http://github.com/mleibman/slickgrid * * Distributed under MIT license. * All rights reserved. * * SlickGrid v2.4 * * NOTES: * Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods. * This increases the speed dramatically, but can only be done safely because there are no event handlers * or data associated with any cell/row DOM nodes. Cell editors must make sure they implement .destroy() * and do proper cleanup. */ // make sure required JavaScript modules are loaded if (typeof jQuery === "undefined") { throw new Error("SlickGrid requires jquery module to be loaded"); } if (!jQuery.fn.drag) { throw new Error("SlickGrid requires jquery.event.drag module to be loaded"); } if (typeof Slick === "undefined") { throw new Error("slick.core.js not loaded"); } (function ($) { // Slick.Grid $.extend(true, window, { Slick: { Grid: SlickGrid } }); // shared across all grids on the page var scrollbarDimensions; var maxSupportedCssHeight; // browser's breaking point ////////////////////////////////////////////////////////////////////////////////////////////// // SlickGrid class implementation (available as Slick.Grid) /** * Creates a new instance of the grid. * @class SlickGrid * @constructor * @param {Node} container Container node to create the grid in. * @param {Array,Object} data An array of objects for databinding. * @param {Array} columns An array of column definitions. * @param {Object} options Grid options. **/ function SlickGrid(container, data, columns, options) { // settings var defaults = { alwaysShowVerticalScroll: false, alwaysAllowHorizontalScroll: false, explicitInitialization: false, rowHeight: 25, defaultColumnWidth: 80, enableAddRow: false, leaveSpaceForNewRows: false, editable: false, autoEdit: true, suppressActiveCellChangeOnEdit: false, enableCellNavigation: true, enableColumnReorder: true, asyncEditorLoading: false, asyncEditorLoadDelay: 100, forceFitColumns: false, enableAsyncPostRender: false, asyncPostRenderDelay: 50, enableAsyncPostRenderCleanup: false, asyncPostRenderCleanupDelay: 40, autoHeight: false, editorLock: new Slick.GlobalEditorLock(), showHeaderRow: false, headerRowHeight: 25, createFooterRow: false, showFooterRow: false, footerRowHeight: 25, createPreHeaderPanel: false, showPreHeaderPanel: false, preHeaderPanelHeight: 25, showTopPanel: false, topPanelHeight: 25, formatterFactory: null, editorFactory: null, cellFlashingCssClass: "flashing", selectedCellCssClass: "selected", multiSelect: true, enableTextSelectionOnCells: false, dataItemColumnValueExtractor: null, frozenBottom: false, frozenColumn: -1, frozenRow: -1, fullWidthRows: false, multiColumnSort: false, numberedMultiColumnSort: false, tristateMultiColumnSort: false, sortColNumberInSeparateSpan: false, defaultFormatter: defaultFormatter, forceSyncScrolling: false, addNewRowCssClass: "new-row", preserveCopiedSelectionOnPaste: false, showCellSelection: true, viewportClass: null, minRowBuffer: 3, emulatePagingWhenScrolling: true, // when scrolling off bottom of viewport, place new row at top of viewport editorCellNavOnLRKeys: false, doPaging: true }; var columnDefaults = { name: "", resizable: true, sortable: false, minWidth: 30, rerenderOnResize: false, headerCssClass: null, defaultSortAsc: true, focusable: true, selectable: true }; // scroller var th; // virtual height var h; // real scrollable height var ph; // page height var n; // number of pages var cj; // "jumpiness" coefficient var page = 0; // current page var offset = 0; // current page offset var vScrollDir = 1; // private var initialized = false; var $container; var uid = "slickgrid_" + Math.round(1000000 * Math.random()); var self = this; var $focusSink, $focusSink2; var $groupHeaders = $(); var $headerScroller; var $headers; var $headerRow, $headerRowScroller, $headerRowSpacerL, $headerRowSpacerR; var $footerRow, $footerRowScroller, $footerRowSpacerL, $footerRowSpacerR; var $preHeaderPanel, $preHeaderPanelScroller, $preHeaderPanelSpacer; var $topPanelScroller; var $topPanel; var $viewport; var $canvas; var $style; var $boundAncestors; var treeColumns; var stylesheet, columnCssRulesL, columnCssRulesR; var viewportH, viewportW; var canvasWidth, canvasWidthL, canvasWidthR; var headersWidth, headersWidthL, headersWidthR; var viewportHasHScroll, viewportHasVScroll; var headerColumnWidthDiff = 0, headerColumnHeightDiff = 0, // border+padding cellWidthDiff = 0, cellHeightDiff = 0, jQueryNewWidthBehaviour = false; var absoluteColumnMinWidth; var hasFrozenRows = false; var frozenRowsHeight = 0; var actualFrozenRow = -1; var paneTopH = 0; var paneBottomH = 0; var viewportTopH = 0; var viewportBottomH = 0; var topPanelH = 0; var headerRowH = 0; var footerRowH = 0; var tabbingDirection = 1; var $activeCanvasNode; var $activeViewportNode; var activePosX; var activeRow, activeCell; var activeCellNode = null; var currentEditor = null; var serializedEditorValue; var editController; var rowsCache = {}; var renderedRows = 0; var numVisibleRows = 0; var prevScrollTop = 0; var scrollTop = 0; var lastRenderedScrollTop = 0; var lastRenderedScrollLeft = 0; var prevScrollLeft = 0; var scrollLeft = 0; var selectionModel; var selectedRows = []; var plugins = []; var cellCssClasses = {}; var columnsById = {}; var sortColumns = []; var columnPosLeft = []; var columnPosRight = []; var pagingActive = false; var pagingIsLastPage = false; var scrollThrottle = ActionThrottle(render, 50); // async call handles var h_editorLoader = null; var h_render = null; var h_postrender = null; var h_postrenderCleanup = null; var postProcessedRows = {}; var postProcessToRow = null; var postProcessFromRow = null; var postProcessedCleanupQueue = []; var postProcessgroupId = 0; // perf counters var counter_rows_rendered = 0; var counter_rows_removed = 0; // These two variables work around a bug with inertial scrolling in Webkit/Blink on Mac. // See http://crbug.com/312427. var rowNodeFromLastMouseWheelEvent; // this node must not be deleted while inertial scrolling var zombieRowNodeFromLastMouseWheelEvent; // node that was hidden instead of getting deleted var zombieRowCacheFromLastMouseWheelEvent; // row cache for above node var zombieRowPostProcessedFromLastMouseWheelEvent; // post processing references for above node var $paneHeaderL; var $paneHeaderR; var $paneTopL; var $paneTopR; var $paneBottomL; var $paneBottomR; var $headerScrollerL; var $headerScrollerR; var $headerL; var $headerR; var $groupHeadersL; var $groupHeadersR; var $headerRowScrollerL; var $headerRowScrollerR; var $footerRowScrollerL; var $footerRowScrollerR; var $headerRowL; var $headerRowR; var $footerRowL; var $footerRowR; var $topPanelScrollerL; var $topPanelScrollerR; var $topPanelL; var $topPanelR; var $viewportTopL; var $viewportTopR; var $viewportBottomL; var $viewportBottomR; var $canvasTopL; var $canvasTopR; var $canvasBottomL; var $canvasBottomR; var $viewportScrollContainerX; var $viewportScrollContainerY; var $headerScrollContainer; var $headerRowScrollContainer; var $footerRowScrollContainer; // store css attributes if display:none is active in container or parent var cssShow = { position: 'absolute', visibility: 'hidden', display: 'block' }; var $hiddenParents; var oldProps = []; var columnResizeDragging = false; ////////////////////////////////////////////////////////////////////////////////////////////// // Initialization function init() { if (container instanceof jQuery) { $container = container; } else { $container = $(container); } if ($container.length < 1) { throw new Error("SlickGrid requires a valid container, " + container + " does not exist in the DOM."); } cacheCssForHiddenInit(); // calculate these only once and share between grid instances maxSupportedCssHeight = maxSupportedCssHeight || getMaxSupportedCssHeight(); options = $.extend({}, defaults, options); validateAndEnforceOptions(); columnDefaults.width = options.defaultColumnWidth; treeColumns = new Slick.TreeColumns(columns); columns = treeColumns.extractColumns(); columnsById = {}; for (var i = 0; i < columns.length; i++) { var m = columns[i] = $.extend({}, columnDefaults, columns[i]); columnsById[m.id] = i; if (m.minWidth && m.width < m.minWidth) { m.width = m.minWidth; } if (m.maxWidth && m.width > m.maxWidth) { m.width = m.maxWidth; } } // validate loaded JavaScript modules against requested options if (options.enableColumnReorder && !$.fn.sortable) { throw new Error("SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded"); } editController = { "commitCurrentEdit": commitCurrentEdit, "cancelCurrentEdit": cancelCurrentEdit }; $container .empty() .css("overflow", "hidden") .css("outline", 0) .addClass(uid) .addClass("ui-widget"); // set up a positioning container if needed if (!/relative|absolute|fixed/.test($container.css("position"))) { $container.css("position", "relative"); } $focusSink = $("
").appendTo($container); // Containers used for scrolling frozen columns and rows $paneHeaderL = $("
").appendTo($container); $paneHeaderR = $("
").appendTo($container); $paneTopL = $("
").appendTo($container); $paneTopR = $("
").appendTo($container); $paneBottomL = $("
").appendTo($container); $paneBottomR = $("
").appendTo($container); if (options.createPreHeaderPanel) { $preHeaderPanelScroller = $("
").appendTo($paneHeaderL); $preHeaderPanel = $("
").appendTo($preHeaderPanelScroller); $preHeaderPanelSpacer = $("
") .appendTo($preHeaderPanelScroller); if (!options.showPreHeaderPanel) { $preHeaderPanelScroller.hide(); } } // Append the header scroller containers $headerScrollerL = $("
").appendTo($paneHeaderL); $headerScrollerR = $("
").appendTo($paneHeaderR); // Cache the header scroller containers $headerScroller = $().add($headerScrollerL).add($headerScrollerR); if (treeColumns.hasDepth()) { $groupHeadersL = [], $groupHeadersR = []; for (var index = 0; index < treeColumns.getDepth() - 1; index++) { $groupHeadersL[index] = $("
").appendTo($headerScrollerL); $groupHeadersR[index] = $("
").appendTo($headerScrollerR); } $groupHeaders = $().add($groupHeadersL).add($groupHeadersR); } // Append the columnn containers to the headers $headerL = $("
").appendTo($headerScrollerL); $headerR = $("
").appendTo($headerScrollerR); // Cache the header columns $headers = $().add($headerL).add($headerR); $headerRowScrollerL = $("
").appendTo($paneTopL); $headerRowScrollerR = $("
").appendTo($paneTopR); $headerRowScroller = $().add($headerRowScrollerL).add($headerRowScrollerR); $headerRowSpacerL = $("
") .appendTo($headerRowScrollerL); $headerRowSpacerR = $("
") .appendTo($headerRowScrollerR); $headerRowL = $("
").appendTo($headerRowScrollerL); $headerRowR = $("
").appendTo($headerRowScrollerR); $headerRow = $().add($headerRowL).add($headerRowR); // Append the top panel scroller $topPanelScrollerL = $("
").appendTo($paneTopL); $topPanelScrollerR = $("
").appendTo($paneTopR); $topPanelScroller = $().add($topPanelScrollerL).add($topPanelScrollerR); // Append the top panel $topPanelL = $("
").appendTo($topPanelScrollerL); $topPanelR = $("
").appendTo($topPanelScrollerR); $topPanel = $().add($topPanelL).add($topPanelR); if (!options.showTopPanel) { $topPanelScroller.hide(); } if (!options.showHeaderRow) { $headerRowScroller.hide(); } // Append the viewport containers $viewportTopL = $("
").appendTo($paneTopL); $viewportTopR = $("
").appendTo($paneTopR); $viewportBottomL = $("
").appendTo($paneBottomL); $viewportBottomR = $("
").appendTo($paneBottomR); // Cache the viewports $viewport = $().add($viewportTopL).add($viewportTopR).add($viewportBottomL).add($viewportBottomR); // Default the active viewport to the top left $activeViewportNode = $viewportTopL; // Append the canvas containers $canvasTopL = $("
").appendTo($viewportTopL); $canvasTopR = $("
").appendTo($viewportTopR); $canvasBottomL = $("
").appendTo($viewportBottomL); $canvasBottomR = $("
").appendTo($viewportBottomR); if (options.viewportClass) $viewport.toggleClass(options.viewportClass, true); // Cache the canvases $canvas = $().add($canvasTopL).add($canvasTopR).add($canvasBottomL).add($canvasBottomR); scrollbarDimensions = scrollbarDimensions || measureScrollbar(); // Default the active canvas to the top left $activeCanvasNode = $canvasTopL; // pre-header if ($preHeaderPanelSpacer) $preHeaderPanelSpacer.css("width", getCanvasWidth() + scrollbarDimensions.width + "px"); $headers.width(getHeadersWidth()); $headerRowSpacerL.css("width", getCanvasWidth() + scrollbarDimensions.width + "px"); $headerRowSpacerR.css("width", getCanvasWidth() + scrollbarDimensions.width + "px"); // footer Row if (options.createFooterRow) { $footerRowScrollerR = $("
").appendTo($paneTopR); $footerRowScrollerL = $("
").appendTo($paneTopL); $footerRowScroller = $().add($footerRowScrollerL).add($footerRowScrollerR); $footerRowSpacerL = $("
") .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") .appendTo($footerRowScrollerL); $footerRowSpacerR = $("
") .css("width", getCanvasWidth() + scrollbarDimensions.width + "px") .appendTo($footerRowScrollerR); $footerRowL = $("
").appendTo($footerRowScrollerL); $footerRowR = $("
").appendTo($footerRowScrollerR); $footerRow = $().add($footerRowL).add($footerRowR); if (!options.showFooterRow) { $footerRowScroller.hide(); } } $focusSink2 = $focusSink.clone().appendTo($container); if (!options.explicitInitialization) { finishInitialization(); } } function finishInitialization() { if (!initialized) { initialized = true; getViewportWidth(); getViewportHeight(); // header columns and cells may have different padding/border skewing width calculations (box-sizing, hello?) // calculate the diff so we can set consistent sizes measureCellPaddingAndBorder(); // for usability reasons, all text selection in SlickGrid is disabled // with the exception of input and textarea elements (selection must // be enabled there so that editors work as expected); note that // selection in grid cells (grid body) is already unavailable in // all browsers except IE disableSelection($headers); // disable all text selection in header (including input and textarea) if (!options.enableTextSelectionOnCells) { // disable text selection in grid cells except in input and textarea elements // (this is IE-specific, because selectstart event will only fire in IE) $viewport.on("selectstart.ui", function (event) { return $(event.target).is("input,textarea"); }); } setFrozenOptions(); setPaneVisibility(); setScroller(); setOverflow(); updateColumnCaches(); createColumnHeaders(); createColumnGroupHeaders(); createColumnFooter(); setupColumnSort(); createCssRules(); resizeCanvas(); bindAncestorScrollEvents(); $container .on("resize.slickgrid", resizeCanvas); $viewport .on("scroll", handleScroll); if (jQuery.fn.mousewheel) { $viewport.on("mousewheel", handleMouseWheel); } $headerScroller //.on("scroll", handleHeaderScroll) .on("contextmenu", handleHeaderContextMenu) .on("click", handleHeaderClick) .on("mouseenter", ".slick-header-column", handleHeaderMouseEnter) .on("mouseleave", ".slick-header-column", handleHeaderMouseLeave); $headerRowScroller .on("scroll", handleHeaderRowScroll); if (options.createFooterRow) { $footerRowScroller .on("scroll", handleFooterRowScroll); } if (options.createPreHeaderPanel) { $preHeaderPanelScroller .on("scroll", handlePreHeaderPanelScroll); } $focusSink.add($focusSink2) .on("keydown", handleKeyDown); $canvas .on("keydown", handleKeyDown) .on("click", handleClick) .on("dblclick", handleDblClick) .on("contextmenu", handleContextMenu) .on("draginit", handleDragInit) .on("dragstart", { distance: 3 }, handleDragStart) .on("drag", handleDrag) .on("dragend", handleDragEnd) .on("mouseenter", ".slick-cell", handleMouseEnter) .on("mouseleave", ".slick-cell", handleMouseLeave); restoreCssFromHiddenInit(); } } function cacheCssForHiddenInit() { // handle display:none on container or container parents $hiddenParents = $container.parents().addBack().not(':visible'); $hiddenParents.each(function () { var old = {}; for (var name in cssShow) { old[name] = this.style[name]; this.style[name] = cssShow[name]; } oldProps.push(old); }); } function restoreCssFromHiddenInit() { // finish handle display:none on container or container parents // - put values back the way they were $hiddenParents.each(function (i) { var old = oldProps[i]; for (var name in cssShow) { this.style[name] = old[name]; } }); } function hasFrozenColumns() { return options.frozenColumn > -1; } function registerPlugin(plugin) { plugins.unshift(plugin); plugin.init(self); } function unregisterPlugin(plugin) { for (var i = plugins.length; i >= 0; i--) { if (plugins[i] === plugin) { if (plugins[i].destroy) { plugins[i].destroy(); } plugins.splice(i, 1); break; } } } function setSelectionModel(model) { if (selectionModel) { selectionModel.onSelectedRangesChanged.unsubscribe(handleSelectedRangesChanged); if (selectionModel.destroy) { selectionModel.destroy(); } } selectionModel = model; if (selectionModel) { selectionModel.init(self); selectionModel.onSelectedRangesChanged.subscribe(handleSelectedRangesChanged); } } function getSelectionModel() { return selectionModel; } function getCanvasNode() { return $canvas[0]; } function getActiveCanvasNode(element) { setActiveCanvasNode(element); return $activeCanvasNode[0]; } function getCanvases() { return $canvas; } function setActiveCanvasNode(element) { if (element) { $activeCanvasNode = $(element.target).closest('.grid-canvas'); } } function getViewportNode() { return $viewport[0]; } function getActiveViewportNode(element) { setActiveViewPortNode(element); return $activeViewportNode[0]; } function setActiveViewportNode(element) { if (element) { $activeViewportNode = $(element.target).closest('.slick-viewport'); } } function measureScrollbar() { var $outerdiv = $('
').appendTo($viewport); var $innerdiv = $('
').appendTo($outerdiv); var dim = { width: $outerdiv[0].offsetWidth - $outerdiv[0].clientWidth, height: $outerdiv[0].offsetHeight - $outerdiv[0].clientHeight }; $innerdiv.remove(); $outerdiv.remove(); return dim; } function getHeadersWidth() { headersWidth = headersWidthL = headersWidthR = 0; var includeScrollbar = !options.autoHeight; for (var i = 0, ii = columns.length; i < ii; i++) { var width = columns[i].width; if ((options.frozenColumn) > -1 && (i > options.frozenColumn)) { headersWidthR += width; } else { headersWidthL += width; } } if (includeScrollbar) { if ((options.frozenColumn) > -1 && (i > options.frozenColumn)) { headersWidthR += scrollbarDimensions.width; } else { headersWidthL += scrollbarDimensions.width; } } if (hasFrozenColumns()) { headersWidthL = headersWidthL + 1000; headersWidthR = Math.max(headersWidthR, viewportW) + headersWidthL; headersWidthR += scrollbarDimensions.width; } else { headersWidthL += scrollbarDimensions.width; headersWidthL = Math.max(headersWidthL, viewportW) + 1000; } headersWidth = headersWidthL + headersWidthR; return Math.max(headersWidth, viewportW) + 1000; } function getHeadersWidthL() { headersWidthL = 0; columns.forEach(function (column, i) { if (!((options.frozenColumn) > -1 && (i > options.frozenColumn))) headersWidthL += column.width; }); if (hasFrozenColumns()) { headersWidthL += 1000; } else { headersWidthL += scrollbarDimensions.width; headersWidthL = Math.max(headersWidthL, viewportW) + 1000; } return headersWidthL; } function getHeadersWidthR() { headersWidthR = 0; columns.forEach(function (column, i) { if ((options.frozenColumn) > -1 && (i > options.frozenColumn)) headersWidthR += column.width; }); if (hasFrozenColumns()) { headersWidthR = Math.max(headersWidthR, viewportW) + getHeadersWidthL(); headersWidthR += scrollbarDimensions.width; } return headersWidthR; } function getCanvasWidth() { var availableWidth = viewportHasVScroll ? viewportW - scrollbarDimensions.width : viewportW; var i = columns.length; canvasWidthL = canvasWidthR = 0; while (i--) { if (hasFrozenColumns() && (i > options.frozenColumn)) { canvasWidthR += columns[i].width; } else { canvasWidthL += columns[i].width; } } var totalRowWidth = canvasWidthL + canvasWidthR; return options.fullWidthRows ? Math.max(totalRowWidth, availableWidth) : totalRowWidth; } function updateCanvasWidth(forceColumnWidthsUpdate) { var oldCanvasWidth = canvasWidth; var oldCanvasWidthL = canvasWidthL; var oldCanvasWidthR = canvasWidthR; var widthChanged; canvasWidth = getCanvasWidth(); widthChanged = canvasWidth !== oldCanvasWidth || canvasWidthL !== oldCanvasWidthL || canvasWidthR !== oldCanvasWidthR; if (widthChanged || hasFrozenColumns() || hasFrozenRows) { $canvasTopL.width(canvasWidthL); getHeadersWidth(); $headerL.width(headersWidthL); $headerR.width(headersWidthR); if (hasFrozenColumns()) { $canvasTopR.width(canvasWidthR); $paneHeaderL.width(canvasWidthL); $paneHeaderR.css('left', canvasWidthL); $paneHeaderR.css('width', viewportW - canvasWidthL); $paneTopL.width(canvasWidthL); $paneTopR.css('left', canvasWidthL); $paneTopR.css('width', viewportW - canvasWidthL); $headerRowScrollerL.width(canvasWidthL); $headerRowScrollerR.width(viewportW - canvasWidthL); $headerRowL.width(canvasWidthL); $headerRowR.width(canvasWidthR); if (options.createFooterRow) { $footerRowScrollerL.width(canvasWidthL); $footerRowScrollerR.width(viewportW - canvasWidthL); $footerRowL.width(canvasWidthL); $footerRowR.width(canvasWidthR); } if (options.createPreHeaderPanel) { $preHeaderPanel.width(canvasWidth); } $viewportTopL.width(canvasWidthL); $viewportTopR.width(viewportW - canvasWidthL); if (hasFrozenRows) { $paneBottomL.width(canvasWidthL); $paneBottomR.css('left', canvasWidthL); $viewportBottomL.width(canvasWidthL); $viewportBottomR.width(viewportW - canvasWidthL); $canvasBottomL.width(canvasWidthL); $canvasBottomR.width(canvasWidthR); } } else { $paneHeaderL.width('100%'); $paneTopL.width('100%'); $headerRowScrollerL.width('100%'); $headerRowL.width(canvasWidth); if (options.createFooterRow) { $footerRowScrollerL.width('100%'); $footerRowL.width(canvasWidth); } if (options.createPreHeaderPanel) { $preHeaderPanel.width('100%'); $preHeaderPanel.width(canvasWidth); } $viewportTopL.width('100%'); if (hasFrozenRows) { $viewportBottomL.width('100%'); $canvasBottomL.width(canvasWidthL); } } viewportHasHScroll = (canvasWidth > viewportW - scrollbarDimensions.width); } $headerRowSpacerL.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); $headerRowSpacerR.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); if (options.createFooterRow) { $footerRowSpacerL.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); $footerRowSpacerR.width(canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0)); } if (widthChanged || forceColumnWidthsUpdate) { applyColumnWidths(); } } function disableSelection($target) { if ($target && $target.jquery) { $target .attr("unselectable", "on") .css("MozUserSelect", "none") .on("selectstart.ui", function () { return false; }); // from jquery:ui.core.js 1.7.2 } } function getMaxSupportedCssHeight() { var supportedHeight = 1000000; // FF reports the height back but still renders blank after ~6M px var testUpTo = navigator.userAgent.toLowerCase().match(/firefox/) ? 6000000 : 1000000000; var div = $("
").appendTo(document.body); while (true) { var test = supportedHeight * 2; div.css("height", test); if (test > testUpTo || div.height() !== test) { break; } else { supportedHeight = test; } } div.remove(); return supportedHeight; } function getUID() { return uid; } function getHeaderColumnWidthDiff() { return headerColumnWidthDiff; } function getScrollbarDimensions() { return scrollbarDimensions; } // TODO: this is static. need to handle page mutation. function bindAncestorScrollEvents() { var elem = (hasFrozenRows && !options.frozenBottom) ? $canvasBottomL[0] : $canvasTopL[0]; while ((elem = elem.parentNode) != document.body && elem != null) { // bind to scroll containers only if (elem == $viewportTopL[0] || elem.scrollWidth != elem.clientWidth || elem.scrollHeight != elem.clientHeight) { var $elem = $(elem); if (!$boundAncestors) { $boundAncestors = $elem; } else { $boundAncestors = $boundAncestors.add($elem); } $elem.on("scroll." + uid, handleActiveCellPositionChange); } } } function unbindAncestorScrollEvents() { if (!$boundAncestors) { return; } $boundAncestors.off("scroll." + uid); $boundAncestors = null; } function updateColumnHeader(columnId, title, toolTip) { if (!initialized) { return; } var idx = getColumnIndex(columnId); if (idx == null) { return; } var columnDef = columns[idx]; var $header = $headers.children().eq(idx); if ($header) { if (title !== undefined) { columns[idx].name = title; } if (toolTip !== undefined) { columns[idx].toolTip = toolTip; } trigger(self.onBeforeHeaderCellDestroy, { "node": $header[0], "column": columnDef, "grid": self }); $header .attr("title", toolTip || "") .children().eq(0).html(title); trigger(self.onHeaderCellRendered, { "node": $header[0], "column": columnDef, "grid": self }); } } function getHeader() { return $headers[0]; } function getHeaderColumn(columnIdOrIdx) { var idx = (typeof columnIdOrIdx === "number" ? columnIdOrIdx : getColumnIndex(columnIdOrIdx)); var $rtn = $headers.children().eq(idx); return $rtn && $rtn[0]; } function getHeaderRow() { return hasFrozenColumns() ? $headerRow : $headerRow[0]; } function getFooterRow() { return hasFrozenColumns() ? $footerRow : $footerRow[0]; } function getPreHeaderPanel() { return $preHeaderPanel[0]; } function getHeaderRowColumn(columnIdOrIdx) { var idx = (typeof columnIdOrIdx === "number" ? columnIdOrIdx : getColumnIndex(columnIdOrIdx)); var $headerRowTarget; if (hasFrozenColumns()) { if (idx <= options.frozenColumn) { $headerRowTarget = $headerRowL; } else { $headerRowTarget = $headerRowR; idx -= options.frozenColumn + 1; } } else { $headerRowTarget = $headerRowL; } var $header = $headerRowTarget.children().eq(idx); return $header && $header[0]; } function getFooterRowColumn(columnIdOrIdx) { var idx = (typeof columnIdOrIdx === "number" ? columnIdOrIdx : getColumnIndex(columnIdOrIdx)); var $footerRowTarget; if (hasFrozenColumns()) { if (idx <= options.frozenColumn) { $footerRowTarget = $footerRowL; } else { $footerRowTarget = $footerRowR; idx -= options.frozenColumn + 1; } } else { $footerRowTarget = $footerRowL; } var $footer = $footerRowTarget.children().eq(idx); return $footer && $footer[0]; } function createColumnFooter() { if (options.createFooterRow) { $footerRow.find(".slick-footerrow-column") .each(function () { var columnDef = $(this).data("column"); if (columnDef) { trigger(self.onBeforeFooterRowCellDestroy, { "node": this, "column": columnDef, "grid": self }); } }); $footerRowL.empty(); $footerRowR.empty(); for (var i = 0; i < columns.length; i++) { var m = columns[i]; var footerRowCell = $("
") .data("column", m) .addClass(hasFrozenColumns() && i <= options.frozenColumn ? 'frozen' : '') .appendTo(hasFrozenColumns() && (i > options.frozenColumn) ? $footerRowR : $footerRowL); trigger(self.onFooterRowCellRendered, { "node": footerRowCell[0], "column": m, "grid": self }); } } } function createColumnGroupHeaders() { var columnsLength = 0; var frozenColumnsValid = false; if (!treeColumns.hasDepth()) return; for (var index = 0; index < $groupHeadersL.length; index++) { $groupHeadersL[index].empty(); $groupHeadersR[index].empty(); var groupColumns = treeColumns.getColumnsInDepth(index); for (var indexGroup in groupColumns) { var m = groupColumns[indexGroup]; columnsLength += m.extractColumns().length; if (hasFrozenColumns() && index == 0 && (columnsLength - 1) === options.frozenColumn) frozenColumnsValid = true; $("
") .html("" + m.name + "") .attr("id", "" + uid + m.id) .attr("title", m.toolTip || "") .data("column", m) .addClass(m.headerCssClass || "") .addClass(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? 'frozen' : '') .appendTo(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? $groupHeadersR[index] : $groupHeadersL[index]); } if (hasFrozenColumns() && index == 0 && !frozenColumnsValid) { $groupHeadersL[index].empty(); $groupHeadersR[index].empty(); alert("All columns of group should to be grouped!"); break; } } applyColumnGroupHeaderWidths(); } function createColumnHeaders() { function onMouseEnter() { $(this).addClass("ui-state-hover"); } function onMouseLeave() { $(this).removeClass("ui-state-hover"); } $headers.find(".slick-header-column") .each(function () { var columnDef = $(this).data("column"); if (columnDef) { trigger(self.onBeforeHeaderCellDestroy, { "node": this, "column": columnDef, "grid": self }); } }); $headerL.empty(); $headerR.empty(); getHeadersWidth(); $headerL.width(headersWidthL); $headerR.width(headersWidthR); $headerRow.find(".slick-headerrow-column") .each(function () { var columnDef = $(this).data("column"); if (columnDef) { trigger(self.onBeforeHeaderRowCellDestroy, { "node": this, "column": columnDef, "grid": self }); } }); $headerRowL.empty(); $headerRowR.empty(); if (options.createFooterRow) { $footerRowL.find(".slick-footerrow-column") .each(function () { var columnDef = $(this).data("column"); if (columnDef) { trigger(self.onBeforeFooterRowCellDestroy, { "node": this, "column": columnDef, "grid": self }); } }); $footerRowL.empty(); if (hasFrozenColumns()) { $footerRowR.find(".slick-footerrow-column") .each(function () { var columnDef = $(this).data("column"); if (columnDef) { trigger(self.onBeforeFooterRowCellDestroy, { "node": this, "column": columnDef, "grid": self }); } }); $footerRowR.empty(); } } for (var i = 0; i < columns.length; i++) { var m = columns[i]; var $headerTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? $headerL : $headerR) : $headerL; var $headerRowTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? $headerRowL : $headerRowR) : $headerRowL; var header = $("
") .html("" + m.name + "") .width(m.width - headerColumnWidthDiff) .attr("id", "" + uid + m.id) .attr("title", m.toolTip || "") .data("column", m) .addClass(m.headerCssClass || "") .addClass(hasFrozenColumns() && i <= options.frozenColumn ? 'frozen' : '') .appendTo($headerTarget); if (options.enableColumnReorder || m.sortable) { header .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave); } if (m.sortable) { header.addClass("slick-header-sortable"); header.append(""); if (options.numberedMultiColumnSort && options.sortColNumberInSeparateSpan) { header.append(""); } } trigger(self.onHeaderCellRendered, { "node": header[0], "column": m, "grid": self }); if (options.showHeaderRow) { var headerRowCell = $("
") .data("column", m) .addClass(hasFrozenColumns() && i <= options.frozenColumn ? 'frozen' : '') .appendTo($headerRowTarget); trigger(self.onHeaderRowCellRendered, { "node": headerRowCell[0], "column": m, "grid": self }); } if (options.createFooterRow && options.showFooterRow) { var footerRowCell = $("
") .data("column", m) .appendTo($footerRow); trigger(self.onFooterRowCellRendered, { "node": footerRowCell[0], "column": m, "grid": self }); } } setSortColumns(sortColumns); setupColumnResize(); if (options.enableColumnReorder) { if (typeof options.enableColumnReorder == 'function') { options.enableColumnReorder(self, $headers, headerColumnWidthDiff, setColumns, setupColumnResize, columns, getColumnIndex, uid, trigger); } else { setupColumnReorder(); } } } function setupColumnSort() { $headers.click(function (e) { if (columnResizeDragging) return; // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328) e.metaKey = e.metaKey || e.ctrlKey; if ($(e.target).hasClass("slick-resizable-handle")) { return; } var $col = $(e.target).closest(".slick-header-column"); if (!$col.length) { return; } var column = $col.data("column"); if (column.sortable) { if (!getEditorLock().commitCurrentEdit()) { return; } var sortColumn = null; var i = 0; for (; i < sortColumns.length; i++) { if (sortColumns[i].columnId == column.id) { sortColumn = sortColumns[i]; sortColumn.sortAsc = !sortColumn.sortAsc; break; } } var hadSortCol = !!sortColumn; if (options.tristateMultiColumnSort) { if (!sortColumn) { sortColumn = { columnId: column.id, sortAsc: column.defaultSortAsc }; } if (hadSortCol && sortColumn.sortAsc) { // three state: remove sort rather than go back to ASC sortColumns.splice(i, 1); sortColumn = null; } if (!options.multiColumnSort) { sortColumns = []; } if (sortColumn && (!hadSortCol || !options.multiColumnSort)) { sortColumns.push(sortColumn); } } else { // legacy behaviour if (e.metaKey && options.multiColumnSort) { if (sortColumn) { sortColumns.splice(i, 1); } } else { if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) { sortColumns = []; } if (!sortColumn) { sortColumn = { columnId: column.id, sortAsc: column.defaultSortAsc }; sortColumns.push(sortColumn); } else if (sortColumns.length == 0) { sortColumns.push(sortColumn); } } } setSortColumns(sortColumns); if (!options.multiColumnSort) { trigger(self.onSort, { multiColumnSort: false, sortCol: (sortColumns.length > 0 ? column : null), sortAsc: (sortColumns.length > 0 ? sortColumns[0].sortAsc : true) }, e); } else { trigger(self.onSort, { multiColumnSort: true, sortCols: $.map(sortColumns, function (col) { return { sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc }; }) }, e); } } }); } function currentPositionInHeader(id) { var currentPosition = 0; $headers.find('.slick-header-column').each(function (i) { if (this.id == id) { currentPosition = i; return false; } }); return currentPosition; } function limitPositionInGroup(idColumn) { var groupColumnOfPreviousPosition, startLimit = 0, endLimit = 0; treeColumns .getColumnsInDepth($groupHeadersL.length - 1) .some(function (groupColumn) { startLimit = endLimit; endLimit += groupColumn.columns.length; groupColumn.columns.some(function (column) { if (column.id === idColumn) groupColumnOfPreviousPosition = groupColumn; return groupColumnOfPreviousPosition; }); return groupColumnOfPreviousPosition; }); endLimit--; return { start: startLimit, end: endLimit, group: groupColumnOfPreviousPosition } } function remove(arr, elem) { var index = arr.lastIndexOf(elem); if (index > -1) { arr.splice(index, 1); remove(arr, elem); } } function columnPositionValidInGroup($item) { var currentPosition = currentPositionInHeader($item[0].id); var limit = limitPositionInGroup($item.data('column').id); var positionValid = limit.start <= currentPosition && currentPosition <= limit.end; return { limit: limit, valid: positionValid, message: positionValid ? '' : 'Column "'.concat($item.text(), '" can be reordered only within the "', limit.group.name, '" group!') }; } function setupColumnReorder() { $headers.filter(":ui-sortable").sortable("destroy"); var columnScrollTimer = null; function scrollColumnsRight() { $viewportScrollContainerX[0].scrollLeft = $viewportScrollContainerX[0].scrollLeft + 10; } function scrollColumnsLeft() { $viewportScrollContainerX[0].scrollLeft = $viewportScrollContainerX[0].scrollLeft - 10; } var canDragScroll; $headers.sortable({ containment: "parent", distance: 3, axis: "x", cursor: "default", tolerance: "intersection", helper: "clone", placeholder: "slick-sortable-placeholder ui-state-default slick-header-column", start: function (e, ui) { ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff); canDragScroll = !hasFrozenColumns() || (ui.placeholder.offset().left + ui.placeholder.width()) > $viewportScrollContainerX.offset().left; $(ui.helper).addClass("slick-header-column-active"); }, beforeStop: function (e, ui) { $(ui.helper).removeClass("slick-header-column-active"); }, sort: function (e, ui) { if (canDragScroll && e.originalEvent.pageX > $container[0].clientWidth) { if (!(columnScrollTimer)) { columnScrollTimer = setInterval( scrollColumnsRight, 100); } } else if (canDragScroll && e.originalEvent.pageX < $viewportScrollContainerX.offset().left) { if (!(columnScrollTimer)) { columnScrollTimer = setInterval( scrollColumnsLeft, 100); } } else { clearInterval(columnScrollTimer); columnScrollTimer = null; } }, stop: function (e, ui) { var cancel = false; clearInterval(columnScrollTimer); columnScrollTimer = null; var limit = null; if (treeColumns.hasDepth()) { var validPositionInGroup = columnPositionValidInGroup(ui.item); limit = validPositionInGroup.limit; cancel = !validPositionInGroup.valid; if (cancel) alert(validPositionInGroup.message); } if (cancel || !getEditorLock().commitCurrentEdit()) { $(this).sortable("cancel"); return; } var reorderedIds = $headerL.sortable("toArray"); reorderedIds = reorderedIds.concat($headerR.sortable("toArray")); var reorderedColumns = []; for (var i = 0; i < reorderedIds.length; i++) { reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]); } setColumns(reorderedColumns); trigger(self.onColumnsReordered, { impactedColumns: getImpactedColumns(limit) }); e.stopPropagation(); setupColumnResize(); } }); } function getImpactedColumns(limit) { var impactedColumns = []; if (limit != undefined) { for (var i = limit.start; i <= limit.end; i++) { impactedColumns.push(columns[i]); } } else { impactedColumns = columns; } return impactedColumns; } function setupColumnResize() { var $col, j, k, c, pageX, columnElements, minPageX, maxPageX, firstResizable, lastResizable; columnElements = $headers.children(); columnElements.find(".slick-resizable-handle").remove(); columnElements.each(function (i, e) { if (i >= columns.length) { return; } if (columns[i].resizable) { if (firstResizable === undefined) { firstResizable = i; } lastResizable = i; } }); if (firstResizable === undefined) { return; } columnElements.each(function (i, e) { if (i >= columns.length) { return; } if (i < firstResizable || (options.forceFitColumns && i >= lastResizable)) { return; } $col = $(e); $("
") .appendTo(e) .on("dragstart", function (e, dd) { if (!getEditorLock().commitCurrentEdit()) { return false; } pageX = e.pageX; $(this).parent().addClass("slick-header-column-active"); var shrinkLeewayOnRight = null, stretchLeewayOnRight = null; // lock each column's width option to current width columnElements.each(function (i, e) { if (i >= columns.length) { return; } columns[i].previousWidth = $(e).outerWidth(); }); if (options.forceFitColumns) { shrinkLeewayOnRight = 0; stretchLeewayOnRight = 0; // colums on right affect maxPageX/minPageX for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (c.resizable) { if (stretchLeewayOnRight !== null) { if (c.maxWidth) { stretchLeewayOnRight += c.maxWidth - c.previousWidth; } else { stretchLeewayOnRight = null; } } shrinkLeewayOnRight += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); } } } var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0; for (j = 0; j <= i; j++) { // columns on left only affect minPageX c = columns[j]; if (c.resizable) { if (stretchLeewayOnLeft !== null) { if (c.maxWidth) { stretchLeewayOnLeft += c.maxWidth - c.previousWidth; } else { stretchLeewayOnLeft = null; } } shrinkLeewayOnLeft += c.previousWidth - Math.max(c.minWidth || 0, absoluteColumnMinWidth); } } if (shrinkLeewayOnRight === null) { shrinkLeewayOnRight = 100000; } if (shrinkLeewayOnLeft === null) { shrinkLeewayOnLeft = 100000; } if (stretchLeewayOnRight === null) { stretchLeewayOnRight = 100000; } if (stretchLeewayOnLeft === null) { stretchLeewayOnLeft = 100000; } maxPageX = pageX + Math.min(shrinkLeewayOnRight, stretchLeewayOnLeft); minPageX = pageX - Math.min(shrinkLeewayOnLeft, stretchLeewayOnRight); }) .on("drag", function (e, dd) { columnResizeDragging = true; var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, e.pageX)) - pageX, x; if (d < 0) { // shrink column x = d; var newCanvasWidthL = 0, newCanvasWidthR = 0; for (j = i; j >= 0; j--) { c = columns[j]; if (c.resizable) { actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); if (x && c.previousWidth + x < actualMinWidth) { x += c.previousWidth - actualMinWidth; c.width = actualMinWidth; } else { c.width = c.previousWidth + x; x = 0; } } } for (k = 0; k <= i; k++) { c = columns[k]; if (hasFrozenColumns() && (k > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } if (options.forceFitColumns) { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; c.width = c.maxWidth; } else { c.width = c.previousWidth + x; x = 0; } if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } } } else { for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } } if (options.forceFitColumns) { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; c.width = c.maxWidth; } else { c.width = c.previousWidth + x; x = 0; } } } } } else { // stretch column x = d; var newCanvasWidthL = 0, newCanvasWidthR = 0; for (j = i; j >= 0; j--) { c = columns[j]; if (c.resizable) { if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) { x -= c.maxWidth - c.previousWidth; c.width = c.maxWidth; } else { c.width = c.previousWidth + x; x = 0; } } } for (k = 0; k <= i; k++) { c = columns[k]; if (hasFrozenColumns() && (k > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } if (options.forceFitColumns) { x = -d; for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (c.resizable) { actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth); if (x && c.previousWidth + x < actualMinWidth) { x += c.previousWidth - actualMinWidth; c.width = actualMinWidth; } else { c.width = c.previousWidth + x; x = 0; } if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } } } else { for (j = i + 1; j < columns.length; j++) { c = columns[j]; if (hasFrozenColumns() && (j > options.frozenColumn)) { newCanvasWidthR += c.width; } else { newCanvasWidthL += c.width; } } } } if (hasFrozenColumns() && newCanvasWidthL != canvasWidthL) { $headerL.width(newCanvasWidthL + 1000); $paneHeaderR.css('left', newCanvasWidthL); } applyColumnHeaderWidths(); applyColumnGroupHeaderWidths(); if (options.syncColumnCellResize) { applyColumnWidths(); } }) .on("dragend", function (e, dd) { var newWidth; $(this).parent().removeClass("slick-header-column-active"); for (j = 0; j < columns.length; j++) { c = columns[j]; newWidth = $(columnElements[j]).outerWidth(); if (c.previousWidth !== newWidth && c.rerenderOnResize) { invalidateAllRows(); } } updateCanvasWidth(true); render(); trigger(self.onColumnsResized, {}); setTimeout(function () { columnResizeDragging = false; }, 300); }); }); } function getVBoxDelta($el) { var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; var delta = 0; $.each(p, function (n, val) { delta += parseFloat($el.css(val)) || 0; }); return delta; } function setFrozenOptions() { options.frozenColumn = (options.frozenColumn >= 0 && options.frozenColumn < columns.length) ? parseInt(options.frozenColumn) : -1; if (options.frozenRow > -1) { hasFrozenRows = true; frozenRowsHeight = (options.frozenRow) * options.rowHeight; var dataLength = getDataLength(); actualFrozenRow = (options.frozenBottom) ? (dataLength - options.frozenRow) : options.frozenRow; } else { hasFrozenRows = false; } } function setPaneVisibility() { if (hasFrozenColumns()) { $paneHeaderR.show(); $paneTopR.show(); if (hasFrozenRows) { $paneBottomL.show(); $paneBottomR.show(); } else { $paneBottomR.hide(); $paneBottomL.hide(); } } else { $paneHeaderR.hide(); $paneTopR.hide(); $paneBottomR.hide(); if (hasFrozenRows) { $paneBottomL.show(); } else { $paneBottomR.hide(); $paneBottomL.hide(); } } } function setOverflow() { $viewportTopL.css({ 'overflow-x': (hasFrozenColumns()) ? (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'hidden' : 'scroll') : (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'hidden' : 'auto'), 'overflow-y': options.alwaysShowVerticalScroll ? "scroll" : ((hasFrozenColumns()) ? (hasFrozenRows ? 'hidden' : 'hidden') : (hasFrozenRows ? 'scroll' : 'auto')) }); $viewportTopR.css({ 'overflow-x': (hasFrozenColumns()) ? (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'hidden' : 'scroll') : (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'hidden' : 'auto'), 'overflow-y': options.alwaysShowVerticalScroll ? "scroll" : ((hasFrozenColumns()) ? (hasFrozenRows ? 'scroll' : 'auto') : (hasFrozenRows ? 'scroll' : 'auto')) }); $viewportBottomL.css({ 'overflow-x': (hasFrozenColumns()) ? (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'scroll' : 'auto') : (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'auto' : 'auto'), 'overflow-y': options.alwaysShowVerticalScroll ? "scroll" : ((hasFrozenColumns()) ? (hasFrozenRows ? 'hidden' : 'hidden') : (hasFrozenRows ? 'scroll' : 'auto')) }); $viewportBottomR.css({ 'overflow-x': (hasFrozenColumns()) ? (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'scroll' : 'auto') : (hasFrozenRows && !options.alwaysAllowHorizontalScroll ? 'auto' : 'auto'), 'overflow-y': options.alwaysShowVerticalScroll ? "scroll" : ((hasFrozenColumns()) ? (hasFrozenRows ? 'auto' : 'auto') : (hasFrozenRows ? 'auto' : 'auto')) }); if (options.viewportClass) { $viewportTopL.toggleClass(options.viewportClass, true); $viewportTopR.toggleClass(options.viewportClass, true); $viewportBottomL.toggleClass(options.viewportClass, true); $viewportBottomR.toggleClass(options.viewportClass, true); } } function setScroller() { if (hasFrozenColumns()) { $headerScrollContainer = $headerScrollerR; $headerRowScrollContainer = $headerRowScrollerR; $footerRowScrollContainer = $footerRowScrollerR; if (hasFrozenRows) { if (options.frozenBottom) { $viewportScrollContainerX = $viewportBottomR; $viewportScrollContainerY = $viewportTopR; } else { $viewportScrollContainerX = $viewportScrollContainerY = $viewportBottomR; } } else { $viewportScrollContainerX = $viewportScrollContainerY = $viewportTopR; } } else { $headerScrollContainer = $headerScrollerL; $headerRowScrollContainer = $headerRowScrollerL; $footerRowScrollContainer = $footerRowScrollerL; if (hasFrozenRows) { if (options.frozenBottom) { $viewportScrollContainerX = $viewportBottomL; $viewportScrollContainerY = $viewportTopL; } else { $viewportScrollContainerX = $viewportScrollContainerY = $viewportBottomL; } } else { $viewportScrollContainerX = $viewportScrollContainerY = $viewportTopL; } } } function measureCellPaddingAndBorder() { var el; var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"]; var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"]; // jquery prior to version 1.8 handles .width setter/getter as a direct css write/read // jquery 1.8 changed .width to read the true inner element width if box-sizing is set to border-box, and introduced a setter for .outerWidth // so for equivalent functionality, prior to 1.8 use .width, and after use .outerWidth var verArray = $.fn.jquery.split('.'); jQueryNewWidthBehaviour = (verArray[0] == 1 && verArray[1] >= 8) || verArray[0] >= 2; el = $("").appendTo($headers); headerColumnWidthDiff = headerColumnHeightDiff = 0; if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") { $.each(h, function (n, val) { headerColumnWidthDiff += parseFloat(el.css(val)) || 0; }); $.each(v, function (n, val) { headerColumnHeightDiff += parseFloat(el.css(val)) || 0; }); } el.remove(); var r = $("
").appendTo($canvas); el = $("").appendTo(r); cellWidthDiff = cellHeightDiff = 0; if (el.css("box-sizing") != "border-box" && el.css("-moz-box-sizing") != "border-box" && el.css("-webkit-box-sizing") != "border-box") { $.each(h, function (n, val) { cellWidthDiff += parseFloat(el.css(val)) || 0; }); $.each(v, function (n, val) { cellHeightDiff += parseFloat(el.css(val)) || 0; }); } r.remove(); absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff); } function createCssRules() { $style = $("