Javascript 在基于sap.m.Table的自定义控件中定义渲染器时的奇怪行为

我正在尝试创建一个带有固定标题的

sap.m.Table

。我试过几次，其中一次发生了奇怪的事情

我试图在

sap.m.Table

中创建一个新的自定义控件，并重新定义渲染器（基于

sap.m.TableRenderer

中的

sap.m.TableRenderer

，它基于

sap.m.ListBaseRerender

）以在

tbody

和

tfoot

周围放置一个

div

（我知道这是一个无效的HTML）并通过CSS使div可滚动。此代码无法按现在的状态获取滚动，它需要额外的工作

这是新控件：

(function() {
    var table = sap.m.Table.extend("sap.m.FixedHeaderTable2", {
        metadata: {
            properties: {},
            aggregations: {},
            events: {}
        },
        init : function(){
            if (sap.m.Table.prototype.init) {
                sap.m.Table.prototype.init.apply(this, arguments);
            }
        },
        renderer: function (oRM, oControl) {
            sap.ui.require("sap.ui.core.Renderer");
            sap.ui.require("sap.m.TableRenderer");
            var renderer = sap.ui.core.Renderer.extend(sap.m.TableRenderer);

            renderer.renderListHeadAttributes = function(r, c) {
                this.renderColumns(r, c, 'Head');
                r.write("<div style=\"border:10px solid green\">");// ADDED
                r.write('<tbody');
                r.writeAttribute('id', c.addNavSection(c.getId('tblBody')));
                r.write('>');
            };

            renderer.renderListEndAttributes = function(r, c) {
                r.write('</tbody>');
                c._hasFooter && this.renderColumns(r, c, 'Foot');
                r.write("</div>");// ADDED
                r.write('</table>');
            }

            renderer.render(oRM, oControl);
        }
    });
    return table;
})();

现在，我的

div

中有一个空的

div

，但是

表仍然有
thead
、
tbody
和
tfoot
作为子项。

我还注意到
边框图像：无不知从何处出现。这一点以及渲染未按预期工作这一事实使我认为某种形式的后期渲染正在发生，从而修改DOM。据我所知，唯一可能发生这种情况的地方是
onAfterRendering
，但它似乎不在那里（我通过addEventDelegate和empty函数删除onAfterRendering）

此“后期渲染”发生在何处/为什么？


我知道有更好的方法可以做到这一点，而且我知道另一个scrool中的滚动是不好的（在移动设备中更糟）。我已经有了一个有效的解决方案

这个问题不是关于如何实现固定标题的滚动，而是关于为什么会发生这种奇怪的行为。
这种行为是由浏览器由于无效的HTML（
div
inside
table
）导致的，因此它与SAPUI5呈现过程无关。。。这里指定的是：（）

您可以在以下问题中获得更多详细信息：

renderer.renderListHeadAttributes = function(r, c) {
    this.renderColumns(r, c, 'Head');
    r.write("<div style=\"border:10px solid green\">");// ADDED
    r.write('<div');// MODIFIED
    r.writeAttribute('id', c.addNavSection(c.getId('tblBody')));
    r.write('>');
};

renderer.renderListEndAttributes = function(r, c) {
    r.write('</div>');// MODIFIED
    c._hasFooter && this.renderColumns(r, c, 'Foot');
    r.write("</div>");// ADDED
    r.write('</table>');
};