Question

我正在尝试使用固定标头创建sap.m.Table。我尝试了几种方法，其中一种方法很奇怪。

我尝试在sap.m.Table中创建一个新的自定义控件，并重新定义渲染器（基于sap.m.TableRenderer中的sap.m.ListBaseRerender）以放置div tbody和tfoot（我知道这将是一个无效的HTML）并使div可以通过CSS滚动。此代码无法像现在一样获得滚动，它需要额外的工作。

这是新控件：

(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;
})();

renderListheadAttributes和renderListEndAttributes是基本渲染器的功能，对它的唯一更改是标有“添加”注释的行。

我得到的HTML就是这样，您可以看到空div和table whith thead，tbody和tfoot：HTML image

所以我尝试更改渲染器中的tbody标记（标有“已修改”的行），看看会发生什么：

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>');
};

现在我的div里面有一个空的div，但table仍有thead，tbody和tfoot作为孩子。 HTML image

我还注意到border-image: none;无处不在。这和渲染不能按预期工作的事实使我认为某种类型的后渲染正在发生，修改DOM。据我所知，只有在onAfterRendering可以发生这种情况的地方，但它似乎并不存在（我通过addEventDelegate和空函数删除onAfterRendering）。

在哪里/为什么会发生“推迟”？

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

这个问题不是关于如何使用固定标题实现滚动，而是关于为什么会发生这种奇怪的行为。

Answer 1

此行为是由浏览器导致的HTML无效（div内部table）引起的，因此它与SAPUI5呈现过程无关......这在此处指定：http://w3c.github.io/html/syntax.html#foster-parenting （Alohci answer）。

您可以在以下问题中获得更多详细信息： Browser changing incorrect HTML by itself. Where is stated that behaviour? Is there a way to avoid it?

在基于sap.m.Table的自定义控件

1 个答案: