diff --git a/js/repeater-list.js b/js/repeater-list.js
index 1e04f0efa..aa6e6b3e8 100755
--- a/js/repeater-list.js
+++ b/js/repeater-list.js
@@ -139,6 +139,57 @@
});
};
+ $.fn.repeater.Constructor.prototype.list_setFrozenColumns = function () {
+ var frozenTable = this.$canvas.find('.table-frozen');
+ var $table = this.$element.find('.repeater-list table');
+ var repeaterWrapper = this.$element.find('.repeater-list');
+ var numFrozenColumns = this.viewOptions.list_frozenColumns;
+
+ if (frozenTable.length < 1) {
+ //setup frozen column markup
+ //main wrapper and remove unneeded columns
+ var $frozenColumnWrapper = $('').insertBefore($table);
+ var $frozenColumn = $table.clone().addClass('table-frozen');
+ $frozenColumn.find('th:not(:lt('+ numFrozenColumns +'))').remove();
+ $frozenColumn.find('td:not(:nth-child(n+0):nth-child(-n+'+ numFrozenColumns +'))').remove();
+
+ //need to set absolute heading for vertical scrolling
+ var $frozenThead = $frozenColumn.clone().removeClass('table-frozen');
+ $frozenThead.find('tbody').remove();
+ var $frozenTheadWrapper = $('').append($frozenThead);
+
+ $frozenColumnWrapper.append($frozenColumn);
+ repeaterWrapper.append($frozenTheadWrapper);
+ this.$canvas.addClass('frozen-enabled');
+ }
+
+ this.$element.find('.repeater-list table.table-frozen tr').each(function (i, elem) {
+ $(this).height($table.find('tr:eq(' + i + ')').height());
+ });
+ var columnWidth = $table.find('td:eq(0)').outerWidth();
+ this.$element.find('.frozen-column-wrapper, .frozen-thead-wrapper').width(columnWidth);
+ };
+
+ $.fn.repeater.Constructor.prototype.list_positionFrozenColumns = function () {
+ var $wrapper = this.$element.find('.repeater-canvas');
+ var scrollTop = $wrapper.scrollTop();
+ var scrollLeft = $wrapper.scrollLeft();
+ if (scrollTop > 0) {
+ $wrapper.find('.repeater-list-heading').css('top', scrollTop);
+ }
+ else {
+ $wrapper.find('.repeater-list-heading').css('top','0');
+ }
+ if (scrollLeft > 0) {
+ $wrapper.find('.frozen-thead-wrapper').css('left', scrollLeft);
+ $wrapper.find('.frozen-column-wrapper').css('left', scrollLeft);
+ } else {
+ $wrapper.find('.frozen-thead-wrapper').css('left', '0');
+ $wrapper.find('.frozen-column-wrapper').css('left', '0');
+ }
+
+ };
+
//ADDITIONAL DEFAULT OPTIONS
$.fn.repeater.defaults = $.extend({}, $.fn.repeater.defaults, {
list_columnRendered: null,
@@ -149,7 +200,8 @@
list_noItemsHTML: 'no items found',
list_selectable: false,
list_sortClearing: false,
- list_rowRendered: null
+ list_rowRendered: null,
+ list_frozenColumns: 0
});
//EXTENSION DEFINITION
@@ -202,6 +254,11 @@
self.list_positionHeadings();
}
});
+ if (self.viewOptions.list_frozenColumns) {
+ helpers.container.on('scroll.fu.repeaterList', function () {
+ self.list_positionFrozenColumns();
+ });
+ }
helpers.container.append($listContainer);
}
@@ -223,6 +280,11 @@
this.list_positionHeadings();
}
+ if (this.viewOptions.list_frozenColumns) {
+ this.list_setFrozenColumns();
+ this.list_positionFrozenColumns();
+ }
+
$sorted = this.$canvas.find('.repeater-list-heading.sorted');
if ($sorted.length > 0) {
this.list_highlightColumn($sorted.data('fu_item_index'));
diff --git a/less/repeater-list.less b/less/repeater-list.less
index 91c6d0e2c..22cd1541b 100755
--- a/less/repeater-list.less
+++ b/less/repeater-list.less
@@ -14,179 +14,228 @@
height: 100%;
overflow: auto;
}
- }
- .repeater-loader {
- margin-top: -12px;
+ .repeater-list {
+ position: relative;
- &.noHeader {
- margin-top: -32px;
- }
- }
+ table {
+ margin-bottom: 0;
+ width: 100%;
- .repeater-viewport {
- overflow: hidden;
- }
-}
+ tbody {
+ td {
+ border-bottom: 1px solid #ddd;
+ border-left: 1px solid #ddd;
+ border-top: none;
-.repeater-list {
- position: relative;
+ &:first-child {
+ border-left: none;
+ }
- table {
- margin-bottom: 0;
- width: 100%;
+ &.sorted {
+ background: #f9f9f9;
+ }
+ }
- tbody {
- td {
- border-bottom: 1px solid #ddd;
- border-left: 1px solid #ddd;
- border-top: none;
+ tr {
+ &:focus {
+ outline: 1px dotted #d7d7d7;
+ }
- &:first-child {
- border-left: none;
- }
+ &.empty {
+ td {
+ border-bottom: none;
+ font-size: 14px;
+ font-style: italic;
+ padding: 20px;
+ text-align: center;
+ width: 100%;
+ }
+ }
- &.sorted {
- background: #f9f9f9;
- }
- }
+ &.selectable{
+ &:hover td {
+ background: @selectableHover;
+ cursor: pointer;
+ }
+ }
- tr {
- &:focus {
- outline: 1px dotted #d7d7d7;
- }
+ &.selected {
+ &:hover td {
+ background: @selectedHover;
+ }
- &.empty {
- td {
- border-bottom: none;
- font-size: 14px;
- font-style: italic;
- padding: 20px;
- text-align: center;
- width: 100%;
- }
- }
+ td {
+ background: @selected;
+ color: #333;
- &.selectable{
- &:hover td {
- background: @selectableHover;
- cursor: pointer;
+ &:first-child {
+ padding-left: 30px;
+ }
+ }
+ }
}
}
- &.selected {
- &:hover td {
- background: @selectedHover;
- }
+ thead > tr > th {
+ background: #F9F9F9;
+ border-bottom: 1px solid #ddd;
+ border-left: 1px solid transparent;
+ border-top: none;
+ color: rgba(0, 0, 0, 0);
+ line-height: 1.42857;
+ padding: 8px;
- td {
- background: @selected;
- color: #333;
+ .noSelectionAllowed();
- &:first-child {
- padding-left: 30px;
- }
+ &:first-child {
+ border-left: none;
}
- }
- }
- }
-
- thead > tr > th {
- background: #F9F9F9;
- border-bottom: 1px solid #ddd;
- border-left: 1px solid transparent;
- border-top: none;
- color: rgba(0, 0, 0, 0);
- line-height: 1.42857;
- padding: 8px;
- .noSelectionAllowed();
+ &.sortable {
+ &:hover, &.sorted {
+ background: #F1F1F1;
+ cursor: pointer;
+ #gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
+ }
+ }
- &:first-child {
- border-left: none;
- }
+ &.sorted {
+ span.glyphicon {
+ display: block;
+ visibility: hidden;
+ }
+ }
- &.sortable {
- &:hover, &.sorted {
- background: #F1F1F1;
- cursor: pointer;
- #gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
+ span.glyphicon {
+ display: none;
+ float: right;
+ margin-top: 2px;
+ }
}
}
- &.sorted {
+ &-check {
+ display: inline-block;
+ height: 0;
+ line-height: 0;
+ position: relative;
+ vertical-align: top;
+ width: 0;
+
span.glyphicon {
- display: block;
- visibility: hidden;
+ left: -22px;
+ position: absolute;
+ top: 2px;
}
}
- span.glyphicon {
- display: none;
- float: right;
- margin-top: 2px;
- }
- }
- }
+ &-heading {
+ background: #F9F9F9;
+ border-bottom: 1px solid #ddd;
+ border-left: 1px solid #ddd;
+ border-top: none;
+ color: #333;
+ line-height: 1.42857;
+ margin-left: -9px;
+ padding: 8px;
+ position: absolute;
+ top: 0;
+ z-index: 1;
+
+ .noSelectionAllowed();
+
+ &.shifted {
+ margin-left: -1px;
+
+ //Webkit override
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
+ margin-left: 0;
+ }
+ }
- &-check {
- display: inline-block;
- height: 0;
- line-height: 0;
- position: relative;
- vertical-align: top;
- width: 0;
+ &.sortable {
+ &:hover, &.sorted {
+ background: #F1F1F1;
+ cursor: pointer;
+ #gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
+ }
- span.glyphicon {
- left: -22px;
- position: absolute;
- top: 2px;
- }
- }
+ &.sorted {
+ span.glyphicon {
+ display: block;
+ visibility: visible;
+ }
+ }
+ }
- &-heading {
- background: #F9F9F9;
- border-bottom: 1px solid #ddd;
- border-left: 1px solid #ddd;
- border-top: none;
- color: #333;
- line-height: 1.42857;
- margin-left: -9px;
- padding: 8px;
- position: absolute;
- top: 0;
- z-index: 1;
-
- .noSelectionAllowed();
-
- &.shifted {
- margin-left: -1px;
-
- //Webkit override
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- margin-left: 0;
+ span.glyphicon {
+ display: none;
+ float: right;
+ margin-top: 2px;
+ }
}
}
- &.sortable {
- &:hover, &.sorted {
- background: #F1F1F1;
- cursor: pointer;
- #gradient > .vertical(@startColor: #F9F9F9; @endColor: #E5E5E5);
+ //Frozen Column Class that gets added if frozen enabled
+ &.frozen-enabled {
+ overflow: auto;
+ .repeater-list-wrapper {
+ overflow: visible;
}
-
- &.sorted {
- span.glyphicon {
- display: block;
- visibility: visible;
+ .repeater-list {
+ .frozen-column-wrapper {
+ position: absolute;
+ z-index: 2;
+ left: 0;
+ th, td {
+ position: relative;
+ }
+ }
+ .frozen-thead-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 3;
+ }
+ table {
+ table-layout: fixed;
+ word-wrap: break-word;
+
+ &.table-frozen{
+ border-right: 1px solid #ddd;
+ z-index: 2;
+ background: #ffffff;
+ border-collapse: collapse;
+ table-layout: fixed;
+ float: left;
+ td, th {
+ border-collapse: collapse;
+ word-wrap: break-word;
+ }
+ .repeater-frozen-heading {
+ background: #F9F9F9;
+ &.shifted {
+ left: -1px;
+ }
+ }
+ }
}
}
}
+ }
- span.glyphicon {
- display: none;
- float: right;
- margin-top: 2px;
+ .repeater-loader {
+ margin-top: -12px;
+
+ &.noHeader {
+ margin-top: -32px;
}
}
+
+ .repeater-viewport {
+ overflow: hidden;
+ }
}
+
+