Question

是否有可能将smartfilterbar固定在顶部，同时进行类似于table标记的sticky属性的粘贴，在垂直滚动过程中控件保持固定在页面顶部？

我的编码：

<IconTabFilter id="ITBId" text="{i18n>Name}">
        <smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="SomeText" liveMode="true" useToolbar="true" showFilterConfiguration="true" considerSelectionVariants="true" header="{i18n>Text}">
                <smartFilterBar:controlConfiguration>
                        <smartFilterBar:ControlConfiguration key="SomeKey" index="1" visibleInAdvancedArea="true" label="SomeLabel">
                        ...
                        </smartFilterBar:ControlConfiguration>
                </smartFilterBar:controlConfiguration>
        </smartFilterBar:SmartFilterBar>
        ...
</IconTabFilter>

谢谢

Answer 1

您需要使页眉变粘。

在XML中，删除粘性属性：

<m:Table id="table" mode="MultiSelect">

在您的控制器文件中：

onAfterRendering: function() {
    // Stick the toolbar and header of the smart table to top. 
    var oSmartTable = this.byId("__smartTableWorklist");
    oSmartTable.onAfterRendering = function() {
        var oToolbar = this.byId("stickyToolbar"),
            oParent = oToolbar.$().parent();
        if (oParent) {
            oParent.addClass("cimtStickyToolbar");
        }
    }.bind(this);
        // This is new code to make the table's header also sticky
    var oTable = this.byId("table");
    oTable.onAfterRendering = function() {
        oTable.addStyleClass("cimtStickyTableMSW");
        var oToolbar = this.byId("stickyToolbar"),
        iTop = oToolbar.$().outerHeight();
        if ($("head").find("style#cimtStickyTableMSW").length !== 0) {
            $("head").find("style#cimtStickyTableMSW").remove();
        }
        var style = $("<style id='cimtStickyTableMSW'></style>");
        $(style).html(" .cimtStickyTableMSW > table > thead > tr," +
            ".cimtStickyTableMSW > table > thead > tr > th {" +
            "   position: sticky;" +
            "   position: -webkit-sticky;" +
            "   top: " + iTop + "px;" +
            "   z-index: 100;" +
            "}");
        $("head").prepend(style); //eslint-disable-line
    }.bind(this);
}, // end of afterRendering handler of the view.

Reference Link

滚动时如何将smartfilterbar固定在顶部

1 个答案: