Javascript ui.table.table在滚动时不重新显示行
我得到了一个ui.table.table，当我滚动到新项目或更改过滤器以便将新数据填充到表中时，它无法正确呈现。 初始可见行（8）按其应有的方式进行渲染。我有一个格式化程序，它隐藏输入字段，给单元格的背景上色，等等，也就是说，它是一个大的格式化程序（参见代码示例） 我不确定除了代码示例之外我还能提供什么，但是如果您需要任何信息来让它更清楚，请告诉我 欢迎任何意见，因为我正处于句号，没有任何想法是愚蠢的：-） 奖金信息：Javascript ui.table.table在滚动时不重新显示行,javascript,xml,sapui5,Javascript,Xml,Sapui5,我得到了一个ui.table.table，当我滚动到新项目或更改过滤器以便将新数据填充到表中时，它无法正确呈现。 初始可见行（8）按其应有的方式进行渲染。我有一个格式化程序，它隐藏输入字段，给单元格的背景上色，等等，也就是说，它是一个大的格式化程序（参见代码示例） 我不确定除了代码示例之外我还能提供什么，但是如果您需要任何信息来让它更清楚，请告诉我 欢迎任何意见，因为我正处于句号，没有任何想法是愚蠢的：-） 奖金信息： 应用程序正在1.38版中开发 在控制器中绑定表行 XML代码：
- 应用程序正在1.38版中开发
- 在控制器中绑定表行
<t:Table id="tableLaunch" visible="true" columnMove="false" selectionMode="None" columnHeaderHeight="40px" fixedColumnCount="6" sort="onTableSort" class="tableLaunch" rowHeight="30px"
visibleRowCountMode="Fixed" enableBusyIndicator="true" noData="Select filters" visibleRowCount="8" threshold="5">
<t:footer>
<Toolbar class="sapMTBHeader-CTX SPDToolbarExceptions">
<ToolBarSPacer/>
<Button id="btnResetInput" text="Reset" enabled="false" press="onResetChanges"/>
<Button id="btnSaveInput" text="Save" enabled="false" press="onSaveChanges"/>
</Toolbar>
</t:footer>
<t:columns>
<t:Column width="200px" sortProperty="AccountS" resizable="false" sorted="true">
<Text text="Customer"/>
<t:template>
<Text text="{AccountS}"/>
</t:template>
</t:Column>
<t:Column width="100px" sortProperty="Theme" resizable="false">
<Text text="Theme"/>
<t:template>
<Text text="{Theme}"/>
</t:template>
</t:Column>
<t:Column width="100px" sortProperty="Product" resizable="false">
<Text text="Product"/>
<t:template>
<Text text="{Product}"/>
</t:template>
</t:Column>
<t:Column width="100px" sortProperty="Item" resizable="false">
<Text text="Material Number" maxLines="2" />
<t:template>
<Text text="{Item}"/>
</t:template>
</t:Column>
<t:Column width="150px" sortProperty="CellText" resizable="false">
<Text text="Description"/>
<t:template>
<Text text="{KeyFigureText}"/>
</t:template>
</t:Column>
<t:Column width="55px" sortProperty="CasePack" resizable="false">
<Text text="Case Pack" maxLines="2"/>
<t:template>
<Text text="{CasePack}"/>
</t:template>
</t:Column>
<!--Table split at weeks -->
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue1', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue2', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue3', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue4', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue5', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue6', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue7', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue8', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue9', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue10', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue11', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue12', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue13', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue14', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue15', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue16', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue17', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue18', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue19', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue20', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue21', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue22', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue23', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue24', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue25', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue26', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue27', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue28', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue29', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue30', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue31', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue32', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue33', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue34', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue35', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue36', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue37', formatter:'customFormatter.formatCells'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
<t:Column width="57px" hAlign="Center" resizable="false">
<Text textAlign="Center"/>
<t:template>
<Input value="{path: 'KeyFigureValue38', formatter:'customFormatter.formatRow'}" liveChange="onInputLiveChange" class="input--padding" editable="false"/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
sap.ui.define([], function () {
var customFormatter = {
formatCells: function (value) {
return Math.floor(value);
},
formatRow: function () {
var oBindingContext = this.getBindingContext();
if (oBindingContext !== null) {
var iPreWeeks = 5;
var iPostWeeks = 7;
var iCurrentWeek = new Date(Date.now()).getWeekNumber();
var iLaunchWeek = new Date(oBindingContext.getObject().LaunchDate).getWeekNumber();
var aWeekCells = this.getParent().getCells().slice(6);
var iSelectedWeek = new Date(this.getModel("launchViewModel").getProperty("/selectedLauncDate")).getWeekNumber();
var iLaunchWeekCell = (iLaunchWeek - iSelectedWeek) + 8;
var iThisWeekCell = (iCurrentWeek - iSelectedWeek) + 8;
//Enables colums after this week and disables before
if (iThisWeekCell >= 0 && iThisWeekCell <= 38) {
aWeekCells.slice(iThisWeekCell).forEach(item => item.setEditable(true));
if (iThisWeekCell > 0) {
aWeekCells.slice(0, iThisWeekCell).forEach(item => item.setEditable(false));
}
}
if (iLaunchWeekCell < 0) {
iLaunchWeekCell = 52 + iLaunchWeekCell;
}
var iPreWeekFirstCol = (iLaunchWeekCell - iPreWeeks);
if (iPreWeekFirstCol < 0) iPreWeekFirstCol = 0;
if (iLaunchWeekCell >= 0) {
aWeekCells[iLaunchWeekCell].setVisible(true);
if ($(aWeekCells[iLaunchWeekCell].getDomRef()).length === 0) {
aWeekCells[iLaunchWeekCell].onAfterRendering = function () {
$(this.getDomRef()).parent().parent().addClass("launchCell--background-color");
}
} else {
$(aWeekCells[iLaunchWeekCell].getDomRef()).parent().parent().addClass("launchCell--background-color");
}
}
//Color the pre weeks
if (iLaunchWeekCell > 0) {
aWeekCells.slice(iPreWeekFirstCol, iLaunchWeekCell).forEach(function (item) {
$(item.getDomRef()).parent().parent().addClass("preLaunchCell--background-color");
if ($(item.getDomRef()).length === 0) {
item.onAfterRendering = function () {
$(this.getDomRef()).parent().parent().addClass("preLaunchCell--background-color");
}
} else {
$(item.getDomRef()).parent().parent().addClass("preLaunchCell--background-color");
}
item.setVisible(true);
});
}
//Color the post weeks
if (!((iLaunchWeekCell - iPostWeeks) > aWeekCells.length)) {
if ((iLaunchWeekCell + 1) < 0) {
var tempILaunchWeekCell = 0;
} else {
var tempILaunchWeekCell = iLaunchWeekCell + 1;
}
aWeekCells.slice((tempILaunchWeekCell), (iLaunchWeekCell + iPostWeeks + 1)).forEach(function (item) {
item.setVisible(true);
if ($(item.getDomRef()).length === 0) {
item.onAfterRendering = function () {
$(this.getDomRef()).parent().parent().addClass("postLaunchCell--background-color");
}
} else {
$(item.getDomRef()).parent().parent().addClass("postLaunchCell--background-color");
}
});
//Removes empty cells post launchspan
aWeekCells.slice(iLaunchWeekCell + iPostWeeks + 1).forEach(item => item.setVisible(false));
}
//Empty cells pre launch span
if (iPreWeekFirstCol > 0) {
aWeekCells.slice(0, iPreWeekFirstCol).forEach(item => item.setVisible(false));
}
}
}
};
window.customFormatter = customFormatter;
return customFormatter;