You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bh...@apache.org on 2015/11/19 12:23:10 UTC
[2/9] git commit: updated refs/heads/master to fe2917e
CLOUDSTACK-9020: Implement sorting for tables
Implements sorting for tables across CloudStack UI;
- General alphabetic/string based sorting
- Numeric sorting for columns if data appears numeric
- Special sorting comparator for state columns
- Avoids sorting quick view columns and other specific columns
Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/106e9106
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/106e9106
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/106e9106
Branch: refs/heads/master
Commit: 106e9106c94ca9dc1e048c5d98b1ffa7b041c807
Parents: a48a224
Author: Rohit Yadav <ro...@shapeblue.com>
Authored: Thu Nov 5 12:36:42 2015 +0530
Committer: Rohit Yadav <ro...@shapeblue.com>
Committed: Thu Nov 19 15:17:43 2015 +0530
----------------------------------------------------------------------
ui/scripts/ui/widgets/dataTable.js | 91 ++++++++++++++++++++++++++-------
1 file changed, 72 insertions(+), 19 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/106e9106/ui/scripts/ui/widgets/dataTable.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js
index 4c02531..22ddda6 100644
--- a/ui/scripts/ui/widgets/dataTable.js
+++ b/ui/scripts/ui/widgets/dataTable.js
@@ -141,49 +141,95 @@
* @param columnIndex Index of column (starting at 0) to sort by
*/
var sortTable = function(columnIndex) {
- return false;
var direction = 'asc';
- if ($table.find('thead th').hasClass('sorted ' + direction)) {
+ if ($table.find('thead tr:last th').hasClass('sorted ' + direction)) {
direction = 'desc';
}
- $table.find('thead th').removeClass('sorted desc asc');
- $($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
+ $table.find('thead tr:last th').removeClass('sorted desc asc');
+ $($table.find('thead tr:last th')[columnIndex]).addClass('sorted').addClass(direction);
var $elems = $table.find('tbody td').filter(function() {
return $(this).index() == columnIndex;
});
+ if ($elems.length < 2) {
+ return;
+ }
+
+ var stringComparator = function(a,b) {
+ return a.html().localeCompare(b.html());
+ };
+ var numericComparator = function(a,b) {
+ return parseFloat(a.children().html()) < parseFloat(b.children().html()) ? 1 : -1;
+ };
+ var stateComparator = function(a,b) {
+ return a.attr('title').localeCompare(b.attr('title'));
+ };
+ var isNumeric = function(obj) {
+ return !$.isArray(obj) && !isNaN(parseFloat(obj)) && isFinite(parseFloat(obj));
+ }
+
+ var comparator = stringComparator;
+ var hasAllRowsSameValue = true;
+ var firstElem = $($elems[0]).html();
var sortData = [];
+ var numericDataCount = 0;
$elems.each(function() {
- sortData.push($(this).html());
- sortData.sort();
-
- if (direction == 'asc') {
- sortData.reverse();
+ var text = $(this).html();
+ if (hasAllRowsSameValue) {
+ if (firstElem !== text) {
+ hasAllRowsSameValue = false;
+ }
+ }
+ if (isNumeric(text) || !text) {
+ numericDataCount++;
}
+ sortData.push($(this));
});
+ if ($($elems[0]).hasClass('state')) {
+ comparator = stateComparator;
+ } else {
+ if (hasAllRowsSameValue) {
+ return;
+ }
+ if (columnIndex != 0 && numericDataCount > ($elems.length / 4)) {
+ comparator = numericComparator;
+ }
+ }
+
+ sortData.sort(comparator);
+
+ if (direction == 'asc') {
+ sortData.reverse();
+ }
+
+ var elements = [];
$(sortData).each(function() {
- var sortKey = this;
- var $targetCell = $elems.filter(function() {
- return $(this).html() == sortKey;
- });
- var $targetContainer = $targetCell.parent();
+ elements.push($(this).parent().clone(true));
+ });
- $targetContainer.remove().appendTo($table.find('tbody'));
+ var $tbody = $table.find('tbody');
+ $tbody.empty();
+ $(elements).each(function() {
+ $(this).appendTo($tbody);
});
computeEvenOddRows();
};
var resizeHeaders = function() {
- var $thead = $table.closest('div.data-table').find('thead');
+ var $thead = $table.hasClass('no-split') ? $table.find('thead') : $table.closest('div.data-table').find('thead');
var $tbody = $table.find('tbody');
var $ths = $thead.find('th');
var $tds = $tbody.find('tr:first td');
+ if ($table.hasClass('no-split')) {
+ $tbody.width($thead.width());
+ }
+
if ($ths.size() > $tds.size()) {
$ths.width(
$table.width() / $ths.size()
@@ -194,6 +240,10 @@
$ths.each(function() {
var $th = $(this);
+ if ($th.hasClass('collapsible-column')) {
+ return true;
+ }
+
var $td = $tds.filter(function() {
return $(this).index() == $th.index();
});
@@ -238,9 +288,12 @@
$table.find('tbody').closest('table').addClass('body');
}
- $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
- $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
- $table.find('th:not(:has(input))').bind('click', function(event) {
+ if (!$table.hasClass('horizontal-overflow')) {
+ $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
+ $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
+ }
+
+ $table.find('thead tr:last th:not(:has(input)):not(.collapsible-column):not(.quick-view)').unbind('click').bind('click', function(event) {
if ($(this).hasClass('resizable')) {
return false;
}