(function (angular) {
|
'use strict';
|
angular.module('scrollable-table', [])
|
.directive('scrollableTable', ['$timeout', '$q', '$parse', '$document', function ($timeout, $q, $parse, $document) {
|
return {
|
transclude: true,
|
restrict: 'A',
|
scope: {
|
rows: '=watch',
|
sortFn: '='
|
},
|
template: '<div class="scrollableContainer">' +
|
'<div class="headerSpacer"></div>' +
|
'<div class="scrollArea" data-ng-transclude></div>' +
|
'</div>',
|
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
|
|
//传入参数调整表格高度
|
var topHeight = $attrs.topheight ? $attrs.topheight : 50;//页面顶部高度
|
var queryHeight = $attrs.queryheight ? $attrs.queryheight : 70;//查询框高度
|
var spaceBottonHeight = $attrs.spacebottonheight ? $attrs.spacebottonheight : 20;//表格底边距高度
|
var tableTitleHeight = $attrs.tabletitleheight ? $attrs.tabletitleheight : 40;//表格标题栏高度
|
var otherHeight = $attrs.otherheight ? $attrs.otherheight : 0;//以上以外的所有需要去掉的高度
|
var innerHeight = $attrs.bodyheight ? (parseInt($attrs.bodyheight) + parseInt(topHeight) + parseInt(queryHeight)) : $document.innerHeight();
|
|
var containerHeight = ((innerHeight - topHeight - queryHeight - otherHeight) - (spaceBottonHeight + tableTitleHeight) * $attrs.times) / $attrs.times;
|
$element[0].firstChild.style.height = containerHeight + "px";
|
|
// define an API for child directives to view and modify sorting parameters
|
this.getSortExpr = function () {
|
return $scope.sortExpr;
|
};
|
this.isAsc = function () {
|
return $scope.asc;
|
};
|
this.setSortExpr = function (exp) {
|
$scope.asc = true;
|
$scope.sortExpr = exp;
|
};
|
this.toggleSort = function () {
|
$scope.asc = !$scope.asc;
|
};
|
|
this.doSort = function (comparatorFn) {
|
if (comparatorFn) {
|
$scope.rows.sort(function (r1, r2) {
|
var compared = comparatorFn(r1, r2);
|
return $scope.asc ? compared : compared * -1;
|
});
|
} else {
|
$scope.rows.sort(function (r1, r2) {
|
var compared = defaultCompare(r1, r2);
|
return $scope.asc ? compared : compared * -1;
|
});
|
}
|
};
|
|
this.renderTalble = function () {
|
return waitForRender().then(fixHeaderWidths);
|
};
|
|
this.getTableElement = function () {
|
return $element;
|
};
|
|
/**
|
* append handle function to execute after table header resize.
|
*/
|
this.appendTableResizingHandler = function (handler) {
|
var handlerSequence = $scope.headerResizeHanlers || [];
|
for (var i = 0; i < handlerSequence.length; i++) {
|
if (handlerSequence[i].name === handler.name) {
|
return;
|
}
|
}
|
handlerSequence.push(handler);
|
$scope.headerResizeHanlers = handlerSequence;
|
};
|
|
function defaultCompare(row1, row2) {
|
var exprParts = $scope.sortExpr.match(/(.+)\s+as\s+(.+)/);
|
var scope = {};
|
scope[exprParts[1]] = row1;
|
var x = $parse(exprParts[2])(scope);
|
|
scope[exprParts[1]] = row2;
|
var y = $parse(exprParts[2])(scope);
|
|
if (x === y) return 0;
|
return x > y ? 1 : -1;
|
}
|
|
function scrollToRow(row) {
|
var offset = $element.find(".headerSpacer").height();
|
var currentScrollTop = $element.find(".scrollArea").scrollTop();
|
$element.find(".scrollArea").scrollTop(currentScrollTop + row.position().top - offset);
|
}
|
|
$scope.$on('rowSelected', function (event, rowId) {
|
var row = $element.find(".scrollArea table tr[row-id='" + rowId + "']");
|
if (row.length === 1) {
|
// Ensure that the headers have been fixed before scrolling, to ensure accurate
|
// position calculations
|
$q.all([waitForRender(), headersAreFixed.promise]).then(function () {
|
scrollToRow(row);
|
});
|
}
|
});
|
|
// Set fixed widths for the table headers in case the text overflows.
|
// There's no callback for when rendering is complete, so check the visibility of the table
|
// periodically -- see http://stackoverflow.com/questions/11125078
|
function waitForRender() {
|
var deferredRender = $q.defer();
|
|
function wait() {
|
if ($element.find("table:visible").length === 0) {
|
$timeout(wait, 100);
|
} else {
|
deferredRender.resolve();
|
}
|
}
|
|
$timeout(wait);
|
return deferredRender.promise;
|
}
|
|
var headersAreFixed = $q.defer();
|
|
function fixHeaderWidths() {
|
if (!$element.find("thead th .th-inner").length) {
|
$element.find("thead th").wrapInner('<div class="th-inner"></div>');
|
}
|
if ($element.find("thead th .th-inner:not(:has(.box))").length) {
|
$element.find("thead th .th-inner:not(:has(.box))").wrapInner('<div class="box"></div>');
|
}
|
|
$element.find("table th .th-inner:visible").each(function (index, el) {
|
el = angular.element(el);
|
var width = el.parent().width(),
|
lastCol = $element.find("table th:visible:last"),
|
headerWidth = width;
|
if (lastCol.css("text-align") !== "center") {
|
var hasScrollbar = $element.find(".scrollArea").height() < $element.find("table").height();
|
if (lastCol[0] == el.parent()[0] && hasScrollbar) {
|
headerWidth += $element.find(".scrollArea").width() - $element.find("tbody tr").width();
|
headerWidth = Math.max(headerWidth, width);
|
}
|
}
|
var minWidth = _getScale(el.parent().css('min-width')),
|
title = el.parent().attr("title");
|
headerWidth = Math.max(minWidth, headerWidth);
|
el.css("width", headerWidth);
|
if (!title) {
|
// ordinary column(not sortableHeader) has box child div element that contained title string.
|
title = el.find(".title .ng-scope").html() || el.find(".box").html();
|
}
|
el.attr("title", title.trim());
|
});
|
headersAreFixed.resolve();
|
}
|
|
// when the data model changes, fix the header widths. See the comments here:
|
// http://docs.angularjs.org/api/ng.$timeout
|
$scope.$watch('rows', function (newValue, oldValue) {
|
if (newValue) {
|
renderChains($element.find('.scrollArea').width());
|
// clean sort status and scroll to top of table once records replaced.
|
$scope.sortExpr = null;
|
// FIXME what is the reason here must scroll to top? This may cause confusing if using scrolling to implement pagination.
|
$element.find('.scrollArea').scrollTop(0);
|
}
|
});
|
|
$scope.asc = !$attrs.hasOwnProperty("desc");
|
$scope.sortAttr = $attrs.sortAttr;
|
|
$element.find(".scrollArea").scroll(function (event) {
|
$element.find("thead th .th-inner").css('margin-left', 0 - event.target.scrollLeft);
|
});
|
|
$scope.$on("renderScrollableTable", function () {
|
renderChains($element.find('.scrollArea').width());
|
});
|
|
angular.element(window).on('resize', function () {
|
$timeout(function () {
|
$scope.$apply();
|
});
|
});
|
$scope.$watch(function () {
|
return $element.find('.scrollArea').width();
|
}, function (newWidth, oldWidth) {
|
if (newWidth * oldWidth <= 0) {
|
return;
|
}
|
renderChains();
|
});
|
|
function renderChains() {
|
var resizeQueue = waitForRender().then(fixHeaderWidths),
|
customHandlers = $scope.headerResizeHanlers || [];
|
for (var i = 0; i < customHandlers.length; i++) {
|
resizeQueue = resizeQueue.then(customHandlers[i]);
|
}
|
return resizeQueue;
|
}
|
}]
|
};
|
}])
|
.directive('sortableHeader', [function () {
|
return {
|
transclude: true,
|
scope: true,
|
require: '^scrollableTable',
|
template: '<div class="box">' +
|
'<div ng-mouseenter="enter()" ng-mouseleave="leave()">' +
|
'<div class="title" ng-transclude></div>' +
|
'<span class="orderWrapper">' +
|
'<span class="order" ng-show="focused || isActive()" ng-click="toggleSort($event)" ng-class="{active:isActive()}">' +
|
'<i ng-show="isAscending()" class="glyphicon glyphicon-chevron-up"></i>' +
|
'<i ng-show="!isAscending()" class="glyphicon glyphicon-chevron-down"></i>' +
|
'</span>' +
|
'</span>' +
|
'</div>' +
|
'</div>',
|
link: function (scope, elm, attrs, tableController) {
|
var expr = attrs.on || "a as a." + attrs.col;
|
scope.element = angular.element(elm);
|
scope.isActive = function () {
|
return tableController.getSortExpr() === expr;
|
};
|
scope.toggleSort = function (e) {
|
if (scope.isActive()) {
|
tableController.toggleSort();
|
} else {
|
tableController.setSortExpr(expr);
|
}
|
tableController.doSort(scope[attrs.comparatorFn]);
|
e.preventDefault();
|
};
|
scope.isAscending = function () {
|
if (scope.focused && !scope.isActive()) {
|
return true;
|
} else {
|
return tableController.isAsc();
|
}
|
};
|
|
scope.enter = function () {
|
scope.focused = true;
|
};
|
scope.leave = function () {
|
scope.focused = false;
|
};
|
|
scope.isLastCol = function () {
|
return elm.parent().find("th:last-child").get(0) === elm.get(0);
|
};
|
}
|
};
|
}])
|
.directive('resizable', ['$compile', function ($compile) {
|
return {
|
restrict: 'A',
|
priority: 0,
|
scope: false,
|
require: 'scrollableTable',
|
link: function postLink(scope, elm, attrs, tableController) {
|
tableController.appendTableResizingHandler(function () {
|
_init();
|
});
|
|
tableController.appendTableResizingHandler(function relayoutHeaders() {
|
var tableElement = tableController.getTableElement().find('.scrollArea table');
|
if (tableElement.css('table-layout') === 'auto') {
|
initRodPos();
|
} else {
|
_resetColumnsSize(tableElement.parent().width());
|
}
|
});
|
|
scope.resizing = function (e) {
|
var screenOffset = tableController.getTableElement().find('.scrollArea').scrollLeft(),
|
thInnerElm = angular.element(e.target).parent(),
|
thElm = thInnerElm.parent(),
|
startPoint = _getScale(thInnerElm.css('left')) + thInnerElm.width() - screenOffset,
|
movingPos = e.pageX,
|
_document = angular.element(document),
|
_body = angular.element('body'),
|
coverPanel = angular.element('.scrollableContainer .resizing-cover'),
|
scaler = angular.element('<div class="scaler">');
|
|
_body.addClass('scrollable-resizing');
|
coverPanel.addClass('active');
|
angular.element('.scrollableContainer').append(scaler);
|
scaler.css('left', startPoint);
|
|
_document.bind('mousemove', function (e) {
|
var offsetX = e.pageX - movingPos,
|
movedOffset = _getScale(scaler.css('left')) - startPoint,
|
widthOfActiveCol = thElm.width(),
|
nextElm = thElm.nextAll('th:visible').first(),
|
minWidthOfActiveCol = _getScale(thElm.css('min-width')),
|
widthOfNextColOfActive = nextElm.width(),
|
minWidthOfNextColOfActive = _getScale(nextElm.css('min-width'));
|
movingPos = e.pageX;
|
e.preventDefault();
|
if ((offsetX > 0 && widthOfNextColOfActive - movedOffset <= minWidthOfNextColOfActive)
|
|| (offsetX < 0 && widthOfActiveCol + movedOffset <= minWidthOfActiveCol)) {
|
//stopping resize if user trying to extension and the active/next column already minimised.
|
return;
|
}
|
scaler.css('left', _getScale(scaler.css('left')) + offsetX);
|
});
|
_document.bind('mouseup', function (e) {
|
e.preventDefault();
|
scaler.remove();
|
_body.removeClass('scrollable-resizing');
|
coverPanel.removeClass('active');
|
_document.unbind('mousemove');
|
_document.unbind('mouseup');
|
|
var offsetX = _getScale(scaler.css('left')) - startPoint,
|
newWidth = thElm.width(),
|
minWidth = _getScale(thElm.css('min-width')),
|
nextElm = thElm.nextAll('th:visible').first(),
|
widthOfNextColOfActive = nextElm.width(),
|
minWidthOfNextColOfActive = _getScale(nextElm.css('min-width')),
|
tableElement = tableController.getTableElement().find('.scrollArea table');
|
|
//hold original width of cells, to display cells as their original width after turn table-layout to fixed.
|
if (tableElement.css('table-layout') === 'auto') {
|
tableElement.find("th .th-inner").each(function (index, el) {
|
el = angular.element(el);
|
var width = el.parent().width();
|
el.parent().css('width', width);
|
});
|
}
|
|
tableElement.css('table-layout', 'fixed');
|
|
if (offsetX > 0 && widthOfNextColOfActive - offsetX <= minWidthOfNextColOfActive) {
|
offsetX = widthOfNextColOfActive - minWidthOfNextColOfActive;
|
}
|
nextElm.removeAttr('style');
|
newWidth += offsetX;
|
thElm.css('width', Math.max(minWidth, newWidth));
|
nextElm.css('width', widthOfNextColOfActive - offsetX);
|
tableController.renderTalble().then(resizeHeaderWidth());
|
});
|
};
|
|
function _init() {
|
var thInnerElms = elm.find('table th:not(:last-child) .th-inner');
|
if (thInnerElms.find('.resize-rod').length == 0) {
|
tableController.getTableElement().find('.scrollArea table').css('table-layout', 'auto');
|
var resizeRod = angular.element('<div class="resize-rod" ng-mousedown="resizing($event)"></div>');
|
thInnerElms.append($compile(resizeRod)(scope));
|
}
|
}
|
|
function initRodPos() {
|
var tableElement = tableController.getTableElement();
|
var headerPos = 1;// 1 is the width of right border;
|
tableElement.find("table th .th-inner:visible").each(function (index, el) {
|
el = angular.element(el);
|
var width = el.parent().width(), //to made header consistent with its parent.
|
// if it's the last header, add space for the scrollbar equivalent unless it's centered
|
minWidth = _getScale(el.parent().css('min-width'));
|
width = Math.max(minWidth, width);
|
el.css("left", headerPos);
|
headerPos += width;
|
});
|
}
|
|
function resizeHeaderWidth() {
|
var headerPos = 1,// 1 is the width of right border;
|
tableElement = tableController.getTableElement();
|
tableController.getTableElement().find("table th .th-inner:visible").each(function (index, el) {
|
el = angular.element(el);
|
var width = el.parent().width(), //to made header consistent with its parent.
|
// if it's the last header, add space for the scrollbar equivalent unless it's centered
|
lastCol = tableElement.find("table th:visible:last"),
|
minWidth = _getScale(el.parent().css('min-width'));
|
width = Math.max(minWidth, width);
|
//following are resize stuff, to made th-inner position correct.
|
//last column's width should be automatically, to avoid horizontal scroll.
|
if (lastCol[0] != el.parent()[0]) {
|
el.parent().css('width', width);
|
}
|
el.css("left", headerPos);
|
headerPos += width;
|
});
|
}
|
|
function _resetColumnsSize(tableWidth) {
|
var tableElement = tableController.getTableElement(),
|
columnLength = tableElement.find("table th:visible").length,
|
lastCol = tableElement.find("table th:visible:last");
|
tableElement.find("table th:visible").each(function (index, el) {
|
el = angular.element(el);
|
if (lastCol.get(0) == el.get(0)) {
|
//last column's width should be automaically, to avoid horizontal scroll.
|
el.css('width', 'auto');
|
return;
|
}
|
var _width = el.data('width');
|
if (/\d+%$/.test(_width)) { //percentage
|
_width = Math.ceil(tableWidth * _getScale(_width) / 100);
|
} else {
|
// if data-width not exist, use average width for each columns.
|
_width = tableWidth / columnLength;
|
}
|
el.css('width', _width + 'px');
|
});
|
tableController.renderTalble().then(resizeHeaderWidth());
|
}
|
}
|
}
|
}])
|
;
|
|
function _getScale(sizeCss) {
|
return parseInt(sizeCss.replace(/px|%/, ''), 10);
|
}
|
})(angular);
|
