More work on sorting:
- added "sorted" drop down menu to data table view if it's sorted. - set forward and reverse radio button labels depending on value type. - don't use a whole submenu for sorting if a column isn't sorted yet. git-svn-id: http://google-refine.googlecode.com/svn/trunk@836 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh
parent
80a199b4a9
commit
369a02043c
@ -7,6 +7,10 @@ function DataTableColumnHeaderUI(dataTableView, column, columnIndex, td) {
|
||||
this._render();
|
||||
}
|
||||
|
||||
DataTableColumnHeaderUI.prototype.getColumn = function() {
|
||||
return this._column;
|
||||
};
|
||||
|
||||
DataTableColumnHeaderUI.prototype._render = function() {
|
||||
var self = this;
|
||||
|
||||
@ -56,7 +60,7 @@ DataTableColumnHeaderUI.prototype._render = function() {
|
||||
};
|
||||
|
||||
DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
|
||||
self = this;
|
||||
var self = this;
|
||||
MenuSystem.createAndShowStandardMenu([
|
||||
{
|
||||
label: "Facet",
|
||||
@ -313,10 +317,19 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
|
||||
]
|
||||
},
|
||||
{},
|
||||
{
|
||||
label: "Sort",
|
||||
submenu: this.createSortingMenu()
|
||||
},
|
||||
(
|
||||
this._dataTableView._getSortingCriterionForColumn(this._column.name) == null ?
|
||||
{
|
||||
"label": "Sort ...",
|
||||
"click": function() {
|
||||
self._showSortingCriterion(null, self._dataTableView._getSortingCriteriaCount() > 0)
|
||||
}
|
||||
} :
|
||||
{
|
||||
label: "Sort",
|
||||
submenu: this.createSortingMenu()
|
||||
}
|
||||
),
|
||||
{
|
||||
label: "View",
|
||||
tooltip: "Collapse/expand columns to make viewing the data more convenient",
|
||||
@ -1174,8 +1187,8 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr><td colspan="2" bind="directionOptions">' +
|
||||
'<input type="radio" class="inline" name="sorting-dialog-direction" value="forward" /><label>forward</label> ' +
|
||||
'<input type="radio" class="inline" name="sorting-dialog-direction" value="reverse" /><label>reverse</label> ' +
|
||||
'<input type="radio" class="inline" name="sorting-dialog-direction" value="forward" /><label id="sorting-dialog-direction-forward">forward</label> ' +
|
||||
'<input type="radio" class="inline" name="sorting-dialog-direction" value="reverse" /><label id="sorting-dialog-direction-reverse">reverse</label> ' +
|
||||
'<span bind="sortAloneContainer" style="display:none;"><input type="checkbox" class="inline" /><label>sort by this column alone</label></span>' +
|
||||
'</td></tr>' +
|
||||
'</table></div>'
|
||||
@ -1186,6 +1199,27 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
|
||||
bodyElmts.valueTypeOptions.find("input[type='radio'][value='" + criterion.valueType + "']")
|
||||
.attr("checked", "checked");
|
||||
|
||||
var setValueType = function(valueType) {
|
||||
var forward = $("#sorting-dialog-direction-forward");
|
||||
var reverse = $("#sorting-dialog-direction-reverse");
|
||||
if (valueType == "string") {
|
||||
forward.html("a - z");
|
||||
reverse.html("z - a");
|
||||
} else if (valueType == "number") {
|
||||
forward.html("smallest first");
|
||||
reverse.html("largest first");
|
||||
} else if (valueType == "date") {
|
||||
forward.html("earliest first");
|
||||
reverse.html("latest first");
|
||||
} else if (valueType == "boolean") {
|
||||
forward.html("false then true");
|
||||
reverse.html("true then false");
|
||||
}
|
||||
};
|
||||
bodyElmts.valueTypeOptions.find("input[type='radio']").change(function() {
|
||||
setValueType(this.value);
|
||||
});
|
||||
|
||||
if (criterion.valueType == "string" && criterion.caseSensitive) {
|
||||
bodyElmts.caseSensitiveCheckbox.attr("checked", "checked");
|
||||
}
|
||||
@ -1208,6 +1242,8 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
|
||||
DialogSystem.dismissUntil(level - 1);
|
||||
};
|
||||
|
||||
setValueType(criterion.valueType);
|
||||
|
||||
footerElmts.cancelButton.click(dismiss);
|
||||
footerElmts.okButton.click(function() {
|
||||
var criterion2 = {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
function DataTableView(div) {
|
||||
this._div = div;
|
||||
|
||||
this._pageSize = 20;
|
||||
this._showRecon = true;
|
||||
this._collapsedColumnNames = {};
|
||||
this._sorting = { criteria: [] };
|
||||
this._columnHeaderUIs = [];
|
||||
|
||||
this._showRows(0);
|
||||
}
|
||||
@ -30,6 +32,7 @@ DataTableView.prototype.render = function() {
|
||||
'<table class="viewPanel-header">' +
|
||||
'<tr>' +
|
||||
'<td bind="summary"></td>' +
|
||||
'<td bind="sortingControls" align="right"></td>' +
|
||||
'<td bind="pageSizeControls" align="right"></td>' +
|
||||
'<td bind="pagingControls" align="right"></td>' +
|
||||
'</tr>' +
|
||||
@ -42,6 +45,10 @@ DataTableView.prototype.render = function() {
|
||||
this._renderPagingControls(elmts.pageSizeControls, elmts.pagingControls);
|
||||
this._renderDataTable(elmts.table[0]);
|
||||
|
||||
if (this._sorting.criteria.length > 0) {
|
||||
this._renderSortingControls(elmts.sortingControls);
|
||||
}
|
||||
|
||||
this._div.empty().append(html);
|
||||
|
||||
this.resize();
|
||||
@ -64,6 +71,19 @@ DataTableView.prototype._renderSummaryText = function(elmt) {
|
||||
$('<span>').html(summaryText).appendTo(elmt);
|
||||
};
|
||||
|
||||
DataTableView.prototype._renderSortingControls = function(sortingControls) {
|
||||
var self = this;
|
||||
|
||||
$('<a href="javascript:{}"></a>')
|
||||
.addClass("action")
|
||||
.text("Sorted")
|
||||
.append($('<img>').attr("src", "/images/down-arrow.png"))
|
||||
.appendTo(sortingControls)
|
||||
.click(function() {
|
||||
self._createSortingMenu(this);
|
||||
});
|
||||
};
|
||||
|
||||
DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagingControls) {
|
||||
var self = this;
|
||||
|
||||
@ -218,6 +238,7 @@ DataTableView.prototype._renderDataTable = function(table) {
|
||||
self._createMenuForAllColumns(this);
|
||||
});
|
||||
|
||||
this._columnHeaderUIs = [];
|
||||
var createColumnHeader = function(column, index) {
|
||||
var td = trHead.insertCell(trHead.cells.length);
|
||||
$(td).addClass("column-header");
|
||||
@ -228,7 +249,8 @@ DataTableView.prototype._renderDataTable = function(table) {
|
||||
self.render();
|
||||
});
|
||||
} else {
|
||||
new DataTableColumnHeaderUI(self, column, index, td);
|
||||
var columnHeaderUI = new DataTableColumnHeaderUI(self, column, index, td);
|
||||
self._columnHeaderUIs.push(columnHeaderUI);
|
||||
}
|
||||
};
|
||||
|
||||
@ -402,7 +424,7 @@ DataTableView.prototype._addSortingCriterion = function(criterion, alone) {
|
||||
};
|
||||
|
||||
DataTableView.prototype._createMenuForAllColumns = function(elmt) {
|
||||
self = this;
|
||||
var self = this;
|
||||
MenuSystem.createAndShowStandardMenu([
|
||||
{ label: "Facet",
|
||||
submenu: [
|
||||
@ -499,6 +521,45 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
|
||||
], elmt, { width: "80px", horizontal: false });
|
||||
};
|
||||
|
||||
DataTableView.prototype._createSortingMenu = function(elmt) {
|
||||
var self = this;
|
||||
var items = [
|
||||
{
|
||||
"label" : "Un-sort",
|
||||
"click" : function() {
|
||||
self._sorting.criteria = [];
|
||||
self.update();
|
||||
}
|
||||
},
|
||||
{}
|
||||
];
|
||||
|
||||
var getColumnHeaderUI = function(columnName) {
|
||||
for (var i = 0; i < self._columnHeaderUIs.length; i++) {
|
||||
var columnHeaderUI = self._columnHeaderUIs[i];
|
||||
if (columnHeaderUI.getColumn().name == columnName) {
|
||||
return columnHeaderUI;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
var createSubmenu = function(criterion) {
|
||||
var columnHeaderUI = getColumnHeaderUI(criterion.column);
|
||||
if (columnHeaderUI != null) {
|
||||
items.push({
|
||||
"label" : "By " + criterion.column,
|
||||
"submenu" : columnHeaderUI.createSortingMenu()
|
||||
})
|
||||
}
|
||||
};
|
||||
for (var i = 0; i < this._sorting.criteria.length; i++) {
|
||||
createSubmenu(this._sorting.criteria[i]);
|
||||
}
|
||||
|
||||
MenuSystem.createAndShowStandardMenu(items, elmt, { horizontal: false });
|
||||
};
|
||||
|
||||
|
||||
DataTableView.prototype._updateCell = function(rowIndex, cellIndex, cell) {
|
||||
var rows = theProject.rowModel.rows;
|
||||
for (var r = 0; r < rows.length; r++) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user