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

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>
(cherry picked from commit deed6827b2eb0b58ee8c1d810a584a9589108eac)

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 7168b8c1448d04561b0e1bc3ee5eeb812b734f12..c7b7ccd773ee5cf448bc5a2e2b38ef8171100c16 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -3231,19 +3231,21 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
                this.placeholder = placeholder;
 
                var n = 0,
-                   rows = this.node.querySelectorAll('tr'),
+                   rows = this.node.querySelectorAll('tr, .tr'),
                    trows = [],
-                   headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th')),
-                   captionClasses = this.options.captionClasses;
+                   headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th, .th')),
+                   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) {
-                       trows[n] = E('tr', { 'class': 'tr' });
+                       trows[n] = E(trTag, { 'class': 'tr' });
 
                        for (var i = 0; i < headings.length; i++) {
                                var text = (headings[i].innerText || '').trim();
                                var raw_val = Array.isArray(row[i]) ? row[i][0] : null;
                                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',
                                        'data-title': (text !== '') ? text : null,
                                        'data-value': raw_val
@@ -3270,8 +3272,8 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
                        this.node.removeChild(rows[n]);
 
                if (placeholder && this.node.firstElementChild === this.node.lastElementChild) {
-                       var trow = this.node.appendChild(E('tr', { 'class': 'tr placeholder' })),
-                           td = trow.appendChild(E('td', { 'class': 'td' }, placeholder));
+                       var trow = this.node.appendChild(E(trTag, { 'class': 'tr placeholder' })),
+                           td = trow.appendChild(E(tdTag, { 'class': 'td' }, placeholder));
 
                        if (typeof(captionClasses) == 'object')
                                DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0]));