是否可以将智能滤栏固定在滚动时的顶部,类似于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>
谢谢
你需要使头条粘性。
在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.