如何解决智能滤镜条在滚动时被置顶的问题。

Question

是否可以将智能滤栏固定在滚动时的顶部，类似于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中，删除sticky属性。

<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.

参考链接