Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: support div based table markup in UITable.update()

Browse source 
Constructing UITable instances from existing, div based markup is
supported but the UITable.update() implementation did not account
for that, leading to defunct data updates on tables built from div
based markup.

Fix this issue by extending UITable.update() to consider a div based
table structure as well, like we do in UITable.initFromMarkup() already.

Fixes: #5713
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2022-12-27 20:20:36 +01:00
parent 91fbd1ac57
commit deed6827b2
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -3231,19 +3231,21 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
this.placeholder = placeholder; this.placeholder = placeholder;
var n = 0, var n = 0,
rows = this.node.querySelectorAll('tr'), rows = this.node.querySelectorAll('tr, .tr'),
trows = [], trows = [],
headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th')), headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th, .th')),
captionClasses = this.options.captionClasses; captionClasses = this.options.captionClasses,
trTag = (rows[0] && rows[0].nodeName == 'DIV') ? 'div' : 'tr',
tdTag = (headings[0] && headings[0].nodeName == 'DIV') ? 'div' : 'td';
data.forEach(function(row) { data.forEach(function(row) {
trows[n] = E('tr', { 'class': 'tr' }); trows[n] = E(trTag, { 'class': 'tr' });
for (var i = 0; i < headings.length; i++) { for (var i = 0; i < headings.length; i++) {
var text = (headings[i].innerText || '').trim(); var text = (headings[i].innerText || '').trim();
var raw_val = Array.isArray(row[i]) ? row[i][0] : null; var raw_val = Array.isArray(row[i]) ? row[i][0] : null;
var disp_val = Array.isArray(row[i]) ? row[i][1] : row[i]; var disp_val = Array.isArray(row[i]) ? row[i][1] : row[i];
var td = trows[n].appendChild(E('td', { var td = trows[n].appendChild(E(tdTag, {
'class': 'td', 'class': 'td',
'data-title': (text !== '') ? text : null, 'data-title': (text !== '') ? text : null,
'data-value': raw_val 'data-value': raw_val
@ -3270,8 +3272,8 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
this.node.removeChild(rows[n]); this.node.removeChild(rows[n]);
if (placeholder && this.node.firstElementChild === this.node.lastElementChild) { if (placeholder && this.node.firstElementChild === this.node.lastElementChild) {
var trow = this.node.appendChild(E('tr', { 'class': 'tr placeholder' })), var trow = this.node.appendChild(E(trTag, { 'class': 'tr placeholder' })),
td = trow.appendChild(E('td', { 'class': 'td' }, placeholder)); td = trow.appendChild(E(tdTag, { 'class': 'td' }, placeholder));
if (typeof(captionClasses) == 'object') if (typeof(captionClasses) == 'object')
DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0])); DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0]));