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 self = this;
var cell = this._cell; var cell = this._cell;
var divContent = $('<div/>') var divContent = document.createElement('div');
.addClass("data-table-cell-content"); divContent.className = 'data-table-cell-content';
var editLink = $('<a href="javascript:{}">&nbsp;</a>') var editLink = document.createElement('a');
.addClass("data-table-cell-edit") editLink.className = 'data-table-cell-edit';
.attr("title", $.i18n('core-views/edit-cell')) editLink.setAttribute('title', $.i18n('core-views/edit-cell'));
.appendTo(divContent) editLink.href = 'javascript:{}';
.click(function() { self._startEdit(this); }); divContent.appendChild(editLink).appendChild(document.createTextNode('\u00A0'));
editLink.addEventListener('click', function() { self._startEdit(this); });
$(this._td).empty() $(this._td).empty()
.unbind() .unbind()
.mouseenter(function() { editLink.css("visibility", "visible"); }) .mouseenter(function() { editLink.style.visibility = "visible" })
.mouseleave(function() { editLink.css("visibility", "hidden"); }); .mouseleave(function() { editLink.style.visibility = "hidden" });
if (!cell || ("v" in cell && cell.v === null)) { 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) { } 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) { } else if (!("r" in cell) || !cell.r) {
if (typeof cell.v !== "string" || "t" in cell) { if (typeof cell.v !== "string" || "t" in cell) {
if (typeof cell.v == "number") { if (typeof cell.v == "number") {
divContent.addClass("data-table-cell-content-numeric"); divContent.classList.add('data-table-cell-content-numeric');
} }
$('<span>') var nonstringSpan = document.createElement('span');
.addClass("data-table-value-nonstring") nonstringSpan.className = 'data-table-value-nonstring';
.text(cell.v) nonstringSpan.textContent = cell.v;
.appendTo(divContent); divContent.appendChild(nonstringSpan);
} else if (URL.looksLikeUrl(cell.v)) { } else if (URL.looksLikeUrl(cell.v)) {
$('<a>') var url = document.createElement('a');
.text(cell.v) url.textContent = cell.v;
.attr("href", cell.v) url.setAttribute('href', cell.v);
.attr("target", "_blank") url.setAttribute('target', '_blank');
.appendTo(divContent); divContent.appendChild(url);
} else { } else {
$('<span>') var span = document.createElement('span');
.text(cell.v) span.textContent = cell.v;
.appendTo(divContent); divContent.appendChild(span);
} }
} else { } else {
var divContentRecon = $(divContent);
var r = cell.r; var r = cell.r;
var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null; var service = (r.service) ? ReconciliationManager.getServiceFromUrl(r.service) : null;
if (r.j == "new") { if (r.j == "new") {
$('<span>').text(cell.v).appendTo(divContent); $('<span>').text(cell.v).appendTo(divContentRecon);
$('<span>').addClass("data-table-recon-new").text("new").appendTo(divContent); $('<span>').addClass("data-table-recon-new").text("new").appendTo(divContentRecon);
$('<a href="javascript:{}"></a>') $('<a href="javascript:{}"></a>')
.text($.i18n('core-views/choose-match')) .text($.i18n('core-views/choose-match'))
.addClass("data-table-recon-action") .addClass("data-table-recon-action")
.appendTo(divContent).click(function(evt) { .appendTo(divContentRecon).click(function(evt) {
self._doRematch(); self._doRematch();
}); });
} else if (r.j == "matched" && "m" in r && r.m !== null) { } else if (r.j == "matched" && "m" in r && r.m !== null) {
@ -119,7 +127,7 @@ DataTableCellUI.prototype._render = function() {
var a = $('<a></a>') var a = $('<a></a>')
.text(match.name) .text(match.name)
.attr("target", "_blank") .attr("target", "_blank")
.appendTo(divContent); .appendTo(divContentRecon);
if (service && (service.view) && (service.view.url)) { if (service && (service.view) && (service.view.url)) {
a.attr("href", encodeURI(service.view.url.replace("{{id}}", match.id))); 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); self._previewOnHover(service, match, a, a, false);
} }
$('<span> </span>').appendTo(divContent); $('<span> </span>').appendTo(divContentRecon);
$('<a href="javascript:{}"></a>') $('<a href="javascript:{}"></a>')
.text($.i18n('core-views/choose-match')) .text($.i18n('core-views/choose-match'))
.addClass("data-table-recon-action") .addClass("data-table-recon-action")
.appendTo(divContent) .appendTo(divContentRecon)
.click(function(evt) { .click(function(evt) {
self._doRematch(); self._doRematch();
}); });
} else { } else {
$('<span>').text(cell.v).appendTo(divContent); $('<span>').text(cell.v).appendTo(divContentRecon);
if (this._dataTableView._showRecon) { 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) { if ("c" in r && r.c.length > 0) {
var candidates = r.c; var candidates = r.c;
var renderCandidate = function(candidate, index) { var renderCandidate = function(candidate, index) {
@ -219,7 +227,7 @@ DataTableCellUI.prototype._render = function() {
addSuggest = true; addSuggest = true;
} }
var extraChoices = $('<div>').addClass("data-table-recon-extra").appendTo(divContent); var extraChoices = $('<div>').addClass("data-table-recon-extra").appendTo(divContentRecon);
if (addSuggest) { if (addSuggest) {
$('<a href="javascript:{}"></a>') $('<a href="javascript:{}"></a>')
.click(function(evt) { .click(function(evt) {
@ -233,7 +241,7 @@ DataTableCellUI.prototype._render = function() {
} }
} }
divContent.appendTo(this._td); this._td.appendChild(divContent);
}; };
DataTableCellUI.prototype._doRematch = function() { 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(); $(tr).empty();
var cells = row.cells; var cells = row.cells;
var tdStar = tr.insertCell(tr.cells.length); var tdStar = tr.insertCell(tr.cells.length);
var star = $('<a href="javascript:{}">&nbsp;</a>') var star = document.createElement('a');
.addClass(row.starred ? "data-table-star-on" : "data-table-star-off") star.href = "javascript:{}";
.appendTo(tdStar) star.classList.add(row.starred ? "data-table-star-on" : "data-table-star-off");
.click(function() { tdStar.appendChild(star).appendChild(document.createTextNode('\u00A0')); // NBSP
var newStarred = !row.starred; star.addEventListener('click', function() {
var newStarred = !row.starred;
Refine.postCoreProcess( Refine.postCoreProcess(
"annotate-one-row", "annotate-one-row",
{ row: row.i, starred: newStarred }, { row: row.i, starred: newStarred },
@ -418,10 +419,11 @@ DataTableView.prototype._renderDataTables = function(table, tableHeader) {
}); });
var tdFlag = tr.insertCell(tr.cells.length); var tdFlag = tr.insertCell(tr.cells.length);
var flag = $('<a href="javascript:{}">&nbsp;</a>') var flag = document.createElement('a');
.addClass(row.flagged ? "data-table-flag-on" : "data-table-flag-off") flag.classList.add(row.flagged ? "data-table-flag-on" : "data-table-flag-off");
.appendTo(tdFlag) flag.href = "javascript:{}";
.click(function() { tdFlag.appendChild(flag).appendChild(document.createTextNode('\u00A0'));
flag.addEventListener('click', function() {
var newFlagged = !row.flagged; var newFlagged = !row.flagged;
Refine.postCoreProcess( Refine.postCoreProcess(
"annotate-one-row", "annotate-one-row",
@ -442,12 +444,18 @@ DataTableView.prototype._renderDataTables = function(table, tableHeader) {
if (theProject.rowModel.mode == "record-based") { if (theProject.rowModel.mode == "record-based") {
if ("j" in row) { if ("j" in row) {
$(tr).addClass("record"); $(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 { } else {
$('<div></div>').html("&nbsp;").appendTo(tdIndex); var div = document.createElement('div');
div.innerHTML = '\u00A0';
tdIndex.appendChild(div);
} }
} else { } 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"); $(tr).addClass(even ? "even" : "odd");