s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Faster rendering of rows and cells (#2973)

Browse Source 
* changes to rendering of rows

* some cell rendering improvements

* more render row improvements

* fixed jQuery methods on js elements

* added comment for nbsp
This commit is contained in:
Lisa Chandra 2020-07-28 21:55:32 +05:30 committed by GitHub
parent db42bcab92
commit 1dcc83209c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
main/webapp/modules/core/scripts/views/data-table/cell-ui.js
View File

@ -62,56 +62,64 @@ DataTableCellUI.prototype._render = function() {
var self = this;
var cell = this._cell;
var divContent = $('<div/>')
.addClass("data-table-cell-content");
var divContent = document.createElement('div');
divContent.className = 'data-table-cell-content';
var editLink = $('<a href="javascript:{}">&nbsp;</a>')
.addClass("data-table-cell-edit")
.attr("title", $.i18n('core-views/edit-cell'))
.appendTo(divContent)
.click(function() { self._startEdit(this); });
var editLink = document.createElement('a');
editLink.className = 'data-table-cell-edit';
editLink.setAttribute('title', $.i18n('core-views/edit-cell'));
editLink.href = 'javascript:{}';
divContent.appendChild(editLink).appendChild(document.createTextNode('\u00A0'));
editLink.addEventListener('click', function() { self._startEdit(this); });
$(this._td).empty()
.unbind()
.mouseenter(function() { editLink.css("visibility", "visible"); })
.mouseleave(function() { editLink.css("visibility", "hidden"); });
.mouseenter(function() { editLink.style.visibility = "visible" })
.mouseleave(function() { editLink.style.visibility = "hidden" });
if (!cell || ("v" in cell && cell.v === null)) {
$('<span>').addClass("data-table-null").html('null').appendTo(divContent);
var nullSpan = document.createElement('span');
nullSpan.className = 'data-table-null';
nullSpan.innerHTML = 'null';
divContent.appendChild(nullSpan);
} else if ("e" in cell) {
$('<span>').addClass("data-table-error").text(cell.e).appendTo(divContent);
var errorSpan = document.createElement('span');
errorSpan.className = 'data-table-error';
errorSpan.textContent = cell.e;
divContent.appendChild(errorSpan);
} else if (!("r" in cell) || !cell.r) {
if (typeof cell.v !== "string" || "t" in cell) {
if (typeof cell.v == "number") {
divContent.addClass("data-table-cell-content-numeric");
divContent.classList.add('data-table-cell-content-numeric');
}
$('<span>')
.addClass("data-table-value-nonstring")
.text(cell.v)
.appendTo(divContent);
var nonstringSpan = document.createElement('span');
nonstringSpan.className = 'data-table-value-nonstring';
nonstringSpan.textContent = cell.v;
divContent.appendChild(nonstringSpan);
} else if (URL.looksLikeUrl(cell.v)) {
$('<a>')
.text(cell.v)
.attr("href", cell.v)
.attr("target", "_blank")
.appendTo(divContent);
var url = document.createElement('a');
url.textContent = cell.v;
url.setAttribute('href', cell.v);
url.setAttribute('target', '_blank');
divContent.appendChild(url);
} else {
$('<span>')
.text(cell.v)
.appendTo(divContent);
var span = document.createElement('span');
span.textContent = cell.v;
divContent.appendChild(span);
}
} else {
var divContentRecon = $(divContent);
var r = cell.r;
var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null;
if (r.j == "new") {
$('<span>').text(cell.v).appendTo(divContent);
$('<span>').addClass("data-table-recon-new").text("new").appendTo(divContent);
$('<span>').text(cell.v).appendTo(divContentRecon);
$('<span>').addClass("data-table-recon-new").text("new").appendTo(divContentRecon);
$('<a href="javascript:{}"></a>')
.text($.i18n('core-views/choose-match'))
.addClass("data-table-recon-action")
.appendTo(divContent).click(function(evt) {
.appendTo(divContentRecon).click(function(evt) {
self._doRematch();
});
} else if (r.j == "matched" && "m" in r && r.m !== null) {
@ -119,7 +127,7 @@ DataTableCellUI.prototype._render = function() {
var a = $('<a></a>')
.text(match.name)
.attr("target", "_blank")
.appendTo(divContent);
.appendTo(divContentRecon);
if (service && (service.view) && (service.view.url)) {
a.attr("href", encodeURI(service.view.url.replace("{{id}}", match.id)));
@ -129,19 +137,19 @@ DataTableCellUI.prototype._render = function() {
self._previewOnHover(service, match, a, a, false);
}
$('<span> </span>').appendTo(divContent);
$('<span> </span>').appendTo(divContentRecon);
$('<a href="javascript:{}"></a>')
.text($.i18n('core-views/choose-match'))
.addClass("data-table-recon-action")
.appendTo(divContent)
.appendTo(divContentRecon)
.click(function(evt) {
self._doRematch();
});
} else {
$('<span>').text(cell.v).appendTo(divContent);
$('<span>').text(cell.v).appendTo(divContentRecon);
if (this._dataTableView._showRecon) {
var ul = $('<div></div>').addClass("data-table-recon-candidates").appendTo(divContent);
var ul = $('<div></div>').addClass("data-table-recon-candidates").appendTo(divContentRecon);
if ("c" in r && r.c.length > 0) {
var candidates = r.c;
var renderCandidate = function(candidate, index) {
@ -219,7 +227,7 @@ DataTableCellUI.prototype._render = function() {
addSuggest = true;
}
var extraChoices = $('<div>').addClass("data-table-recon-extra").appendTo(divContent);
var extraChoices = $('<div>').addClass("data-table-recon-extra").appendTo(divContentRecon);
if (addSuggest) {
$('<a href="javascript:{}"></a>')
.click(function(evt) {
@ -233,7 +241,7 @@ DataTableCellUI.prototype._render = function() {
}
}
divContent.appendTo(this._td);
this._td.appendChild(divContent);
};
DataTableCellUI.prototype._doRematch = function() {

32
main/webapp/modules/core/scripts/views/data-table/data-table-view.js
View File

@ -397,11 +397,12 @@ DataTableView.prototype._renderDataTables = function(table, tableHeader) {
$(tr).empty();
var cells = row.cells;
var tdStar = tr.insertCell(tr.cells.length);
var star = $('<a href="javascript:{}">&nbsp;</a>')
.addClass(row.starred ? "data-table-star-on" : "data-table-star-off")
.appendTo(tdStar)
.click(function() {
var newStarred = !row.starred;
var star = document.createElement('a');
star.href = "javascript:{}";
star.classList.add(row.starred ? "data-table-star-on" : "data-table-star-off");
tdStar.appendChild(star).appendChild(document.createTextNode('\u00A0')); // NBSP
star.addEventListener('click', function() {
var newStarred = !row.starred;
Refine.postCoreProcess(
"annotate-one-row",
{ row: row.i, starred: newStarred },
@ -418,10 +419,11 @@ DataTableView.prototype._renderDataTables = function(table, tableHeader) {
});
var tdFlag = tr.insertCell(tr.cells.length);
var flag = $('<a href="javascript:{}">&nbsp;</a>')
.addClass(row.flagged ? "data-table-flag-on" : "data-table-flag-off")
.appendTo(tdFlag)
.click(function() {
var flag = document.createElement('a');
flag.classList.add(row.flagged ? "data-table-flag-on" : "data-table-flag-off");
flag.href = "javascript:{}";
tdFlag.appendChild(flag).appendChild(document.createTextNode('\u00A0'));
flag.addEventListener('click', function() {
var newFlagged = !row.flagged;
Refine.postCoreProcess(
"annotate-one-row",
@ -442,12 +444,18 @@ DataTableView.prototype._renderDataTables = function(table, tableHeader) {
if (theProject.rowModel.mode == "record-based") {
if ("j" in row) {
$(tr).addClass("record");
$('<div></div>').html((row.j + 1) + ".").appendTo(tdIndex);
var div = document.createElement('div');
div.innerHTML = (row.j + 1) + '.';
tdIndex.appendChild(div);
} else {
$('<div></div>').html("&nbsp;").appendTo(tdIndex);
var div = document.createElement('div');
div.innerHTML = '\u00A0';
tdIndex.appendChild(div);
}
} else {
$('<div></div>').html((row.i + 1) + ".").appendTo(tdIndex);
var div = document.createElement('div');
div.innerHTML = (row.i + 1) + '.';
tdIndex.appendChild(div);
}
$(tr).addClass(even ? "even" : "odd");