我在每个表格行的表格列中都有一个输入文本值框。该数据最初被获取，并最初填充在该特定表单元中。用户可以编辑该单元格，然后单击保存按钮将其保存在数据库中。
但是，当用户在文本字段中输入值并向上和向下滚动时，就会出现此问题。该值将被清除，并且默认为默认的访存值。无论如何，我可以防止吗？当表中的记录数较少时，这不是问题，而是当您有大量的行集时发生此问题。
这在表级别上有任何配置吗，或者我需要为文本输入实现一些事件机制吗？
这是代码。
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel",
"sap/ui/Device",
"sap/ui/table/Table",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/ux3/FacetFilter",
"sap/m/TablePersoController",
"sap/m/UploadCollectionParameter",
"sap/m/MessageBox"
], function(Controller, MessageToast, JSONModel, Device, models, Filter, FilterOperator, TablePersoController) {
"use strict";
var dataPath;
var oModel;
var that;
var items;
var jModel = new sap.ui.model.json.JSONModel();
var result = {};
var ppernr;
var from_date;
var to_date;
var oTableEntry;
var t_ttwork = 0;
var t_ttout = 0;
var t_ttoin = 0;
var t_ttShift = 0;
var t_ttmhrs = 0;
var t_tthrapp = 0;
var t_AddHRs = 0;
var t_Syshr = 0;
var t_Penalty = 0;
function roundToTwo(num) {
return +(Math.round(num + "e+2") + "e-2");
}
return Controller.extend("OVERTIME.controller.OTMain", {
onInit: function() {
// dataPath = "/webidedispatcher/destinations/AV_GWD/sap/opu/odata/SAP/ZHRPT_OVERTIME_SRV/";
dataPath = "/sap/opu/odata/SAP/ZHRPT_OVERTIME_SRV/";
oModel = new sap.ui.model.odata.ODataModel(dataPath);
that = this;
that.setDates();
that.GET_DATA();
},
GET_DATA: function(oEvent) {
result.historySet = [];
// var URI = "/EMP_DETAILSSet?$filter=Pernr eq '" + pernr + "'";
oModel.read("/EMP_DETAILSSet/", null, null, false, function(oData, oResponse) {
result.EMP_DETAILSSet = oData.results;
items = result.EMP_DETAILSSet;
result.historySet = oData.results;
jModel.setData(result);
that.getView().setModel(jModel);
});
},
OnPressList: function(oEvent) {
t_ttwork = 0;
t_ttout = 0;
t_ttoin = 0;
t_ttShift = 0;
t_ttmhrs = 0;
t_tthrapp = 0;
t_AddHRs = 0;
t_Syshr = 0;
t_Penalty = 0;
if (items !== "") {
var BindingContext = oEvent.getSource().getBindingContext();
result.EMP_DATASet = BindingContext.getProperty();
jModel.setData(result);
that.getView().setModel(jModel);
ppernr = BindingContext.getProperty("Pernr");
that.getData();
}
},
getData: function() {
if (ppernr !== undefined) {
from_date = that.getView().byId("fdate").getValue();
to_date = that.getView().byId("tdate").getValue();
var oFilter = new Array();
oFilter[0] = new sap.ui.model.Filter("Pernr", sap.ui.model.FilterOperator.EQ, ppernr);
oFilter[1] = new sap.ui.model.Filter("FromDate", sap.ui.model.FilterOperator.EQ, from_date);
oFilter[2] = new sap.ui.model.Filter("ToDate", sap.ui.model.FilterOperator.EQ, to_date);
var oTable = this.getView().byId("oTable");
//this.getView().setModel(oModel);
oTable.setModel(oModel);
oTable.bindRows({
//method: "GET",
path: '/EE_OVETIMESet/',
filters: oFilter
});
// that.OnCalc();
} else {
// MessageToast.show("Please select employee first");
sap.m.MessageBox.show("Please select employee first", {
icon: sap.m.MessageBox.Icon.ERROR,
title: "Error",
onClose: function(evt) {}
});
}
},
OnCalc: function() {
oTableEntry = this.getView().byId("oTable");
var count = oTableEntry._getRowCount();
var oTData;
var cells;
var hour_inoffice = 0;
var minute_inoffice = 0;
var hour_shift = 0;
var minute_shift = 0;
var hour_manual = 0;
var minute_manual = 0;
var hour_sys = 0;
var minute_sys = 0;
var hour_hr = 0;
var minute_hr = 0;
// var second = 0;
t_ttoin = 0;
t_ttShift = 0;
t_ttmhrs = 0;
t_tthrapp = 0;
t_Syshr = 0;
t_AddHRs = 0;
for (var i = 0; i < count; i++) {
oTData = oTableEntry.getContextByIndex(i).getObject();
//cells = oTableEntry.getRows()[i].getCells();
var hrAppValue = oTableEntry.getRows()[i].getCells()[9]._lastValue;
if (oTData.InOffice !== "") {
var splitTime1 = oTData.InOffice.split(':');
hour_inoffice = hour_inoffice + parseInt(splitTime1[0]);
minute_inoffice = minute_inoffice + parseInt(splitTime1[1]);
}
if (oTData.EligableHours !== "") {
var splitTime1 = oTData.EligableHours.split(':');
hour_shift = hour_shift + parseInt(splitTime1[0]);
minute_shift = minute_shift + parseInt(splitTime1[1]);
}
if (oTData.ManualOvt !== "") {
var splitTime1 = oTData.ManualOvt.split(':');
hour_manual = hour_manual + parseInt(splitTime1[0]);
//minute_manual = minute_manual + parseInt(splitTime1[1]);
}
if (oTData.TimeDiff !== "") {
var splitTime1 = oTData.TimeDiff.split(':');
if (splitTime1[0].charAt(0) === "+") {
splitTime1[0] = splitTime1[0].replace('+', '');
hour_sys = hour_sys + parseInt(splitTime1[0]);
minute_sys = minute_sys + parseInt(splitTime1[1]);
} else {
splitTime1[0] = splitTime1[0].replace('-', '');
hour_sys = hour_sys - parseInt(splitTime1[0]);
minute_sys = minute_sys - parseInt(splitTime1[1]);
}
}
if (hrAppValue !== "") {
var splitTime1 = hrAppValue.split(':');
if (splitTime1[0].charAt(0) === "+") {
splitTime1[0] = splitTime1[0].replace('+', '');
hour_hr = hour_hr + parseInt(splitTime1[0]);
minute_hr = minute_hr + parseInt(splitTime1[1]);
} else {
splitTime1[0] = splitTime1[0].replace('-', '');
hour_hr = hour_hr - parseInt(splitTime1[0]);
minute_hr = minute_hr - parseInt(splitTime1[1]);
}
}
/* minute_inoffice = minute_inoffice%60;
second_inoffice = parseInt(splitTime1[2]);
minute_inoffice = minute_inoffice + second_inoffice/60;
second_inoffice = second_inoffice%60;*/
/* if (parseFloat(cells[3].getText()) > 0) {
t_ttwork = parseFloat(t_ttwork) + parseFloat(cells[3].getText().replace(':', '.'));
}
t_ttout = parseFloat(t_ttout) + parseFloat(cells[4].getText().replace(':', '.'));
t_ttoin = parseFloat(t_ttoin) + parseFloat(cells[5].getText().replace(':', '.'));
t_ttShift = parseFloat(t_ttShift) + parseFloat(cells[6].getText()); //.replace(':', '.'));
t_ttmhrs = parseFloat(t_ttmhrs) + parseFloat(cells[7].getText().replace(':', '.'));
t_tthrapp = parseFloat(t_tthrapp) + parseFloat(cells[9].getValue().replace(':', '.'));
if (parseFloat(cells[9].getValue().replace(':', '.')) > 0) {
t_AddHRs = parseFloat(t_AddHRs) + parseFloat(cells[9].getValue());
} else if (parseFloat(cells[9].getValue().replace(':', '.')) < 0) {
t_Penalty = parseFloat(t_Penalty) + parseFloat(cells[9].getValue());
}*/
}
var temp;
t_ttoin = roundToTwo(hour_inoffice + minute_inoffice / 60);
t_ttShift = roundToTwo(hour_shift + minute_shift / 60);
t_ttmhrs = hour_manual;
t_Syshr = roundToTwo(hour_sys + minute_sys / 60);
t_AddHRs = roundToTwo(hour_hr + minute_hr / 60);
/* temp = t_ttoin ;
temp = '.' + temp.split('.') ;
temp[1] = temp[1] * 60 ;
t_ttoin = temp[0] + ':' + temp[1] ;*/
// this.getView().byId("t_ttwork").setValue(t_ttwork);
// this.getView().byId("t_ttoout").setValue(t_ttout);
this.getView().byId("t_ttoin").setValue(t_ttoin);
this.getView().byId("t_ttShift").setValue(t_ttShift);
this.getView().byId("t_ttmhrs").setValue(t_ttmhrs);
this.getView().byId("t_tsyshr").setValue(t_Syshr);
this.getView().byId("t_tthrapp").setValue(t_AddHRs);
// this.getView().byId("t_Penalty").setValue(t_Penalty);
},
setDates: function() {
var today = new Date();
var dd = today.getDate().toString();
var mm = (today.getMonth() + 1).toString(); //January is 0!
var yyyy = today.getFullYear();
var date = yyyy.toString().concat((mm[1] ? mm : "0" + mm[0]).toString(), '01');
this.getView().byId("fdate").setValue(date);
var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 15);
lastDay = yyyy.toString().concat((mm[1] ? mm : "0" + mm[0]).toString(), lastDay.getDate());
this.getView().byId("tdate").setValue(lastDay);
},
OngetData: function(oEvent) {
that.getData();
},
OnSave: function(oEvent) {
var oTEntry = this.getView().byId("oTable");
var count = oTEntry._getRowCount();
var cells;
var bodyArray = [];
for (var i = 0; i < count; i++) {
var oTData = oTEntry.getContextByIndex(i).getObject();
//cells = oTableEntry.getRows()[i].getCells();
var hrAppValue = oTableEntry.getRows()[i].getCells()[9]._lastValue;
var requestBody = {};
requestBody.Pernr = "" + oTData.Pernr;
requestBody.FromDate = "" + oTData.FromDate;
requestBody.ToDate = "" + oTData.ToDate;
requestBody.OtDate = "" + oTData.OtDate;
requestBody.FcIn = "" + oTData.FcIn;
requestBody.LcOut = "" + oTData.LcOut;
requestBody.LogicHours = "" + oTData.LogicHours;
requestBody.OutOffice = "" + oTData.OutOffice;
requestBody.InOffice = "" + oTData.InOffice;
requestBody.EligableHours = "" + oTData.EligableHours;
requestBody.ManualOvt = "" + oTData.ManualOvt;
requestBody.HrApp = "" + hrAppValue; //oTData.HrApp;
bodyArray.push(requestBody);
}
var Sflag;
for (var i = 0; i < bodyArray.length; i++) {
oModel.create("/EE_OVETIMESet", bodyArray[i], {
success: function(oData, oResponse) {
Sflag = "S";
},
error: function() {
Sflag = "E";
break;
}
});
}
/**oModel.create("/EE_OVETIMESet", bodyArray, {
success: function(oData, oResponse) {
Sflag = "S";
},
error: function() {
Sflag = "E";
}
});*/
if (Sflag === "S") {
var msg = "Saved Successfully";
sap.m.MessageBox.show(msg, {
icon: sap.m.MessageBox.Icon.SUCCESS,
title: "Success",
onClose: function(evt) {}
});
} else {
sap.m.MessageBox.show("Data Not Saved", {
icon: sap.m.MessageBox.Icon.ERROR,
title: "Error",
onClose: function(evt) {}
});
}
},
OnApprove: function(oEvent) {
var requestBody = {};
requestBody.Pernr = ppernr;
requestBody.FromDate = from_date;
requestBody.ToDate = to_date;
requestBody.Svalue = this.getView().byId("t_AddHRs").getValue();
requestBody.Pvalue = this.getView().byId("t_Penalty").getValue();
/* if (this.getView().byId("addover").getSelected() === true ) {
requestBody.Sflag = "A";
requestBody.Svalue = this.getView().byId("t_AddHRs").getValue();
} else if (this.getView().byId("subover").getSelected() === true ) {
requestBody.Sflag = "P";
requestBody.Pvalue = this.getView().byId("t_Penalty").getValue();
}*/
oModel.create("/EE_SOVTSet", requestBody, {
// method: "POST",
success: function(oData, oResponse) {
var status = oData.STATUS;
if (status === "S") {
sap.m.MessageBox.show("Data Saved", {
icon: sap.m.MessageBox.Icon.SUCCESS,
title: "Success",
onClose: function(evt) {}
});
} else if (status === "E") {
sap.m.MessageBox.show("Data Not Saved", {
icon: sap.m.MessageBox.Icon.ERROR,
title: "Error",
onClose: function(evt) {}
});
}
},
error: function() {
MessageToast.show("Error. Try Again");
}
});
},
onNavBack: function() {
window.history.go(-1);
},
onSearch: function(oEvt) {
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter1 = new sap.ui.model.Filter("Pernr", sap.ui.model.FilterOperator.Contains, sQuery);
var filter2 = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery);
var allfilter = new sap.ui.model.Filter([filter1, filter2], false);
}
var list = this.getView().byId("idList");
var binding = list.getBinding("items");
binding.filter(allfilter);
}
});
});
查看
<mvc:View controllerName="OVERTIME.controller.OTMain" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:f="sap.ui.layout.form" xmlns:t="sap.ui.table" xmlns:co="sap.ui.commons" xmlns:sc="sap.ui.core">
<SplitApp id="idSplitApp">
<masterPages>
<Page id="idMaster" title="{i18n>title}" icon="sap-icon://action" class="sapUiSizeCompact">
<headerContent class="sapUiSizeCompact"></headerContent>
<subHeader>
<Toolbar>
<SearchField width="100%" liveChange="onSearch" class="sapUiSizeCompact"/>
</Toolbar>
</subHeader>
<content>
<List id="idList" items="{/EMP_DETAILSSet}" class="sapUiSizeCompact">
<items class="Masterpage">
<ObjectListItem title="{Name}" type="Active" press="OnPressList" class="Masterpage">
<firstStatus>
<!--<ObjectStatus text="{Pernr}"/>-->
</firstStatus>
<attributes>
<ObjectAttribute text="{Pernr}"/>
</attributes>
</ObjectListItem>
</items>
</List>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</masterPages>
<detailPages>
<Page id="idDetails" showHeader="true" title="{i18n>appTitle}" class="sapUiSizeCompact" showNavButton="true" navButtonText="Back"
navButtonPress="onNavBack">
<ObjectHeader id="oh1" responsive="true" binding="{/EMP_DATASet}" intro="{i18n>pernr} - {Pernr}" title="{i18n>name} - {Name}"
showMarkers="false" markFlagged="false" markFavorite="false" backgroundDesign="Translucent">
<attributes>
<ObjectAttribute title="{i18n>org}" text="{Orgtx}"/>
<ObjectAttribute title="{i18n>posi}" text="{Postx}"/>
<ObjectAttribute title="{i18n>group}" text="{Ptext01}"/>
</attributes>
<statuses>
<ObjectStatus title="{i18n>subgroup}" text="{Ptext02}"/>
<ObjectStatus title="" text=""/>
</statuses>
</ObjectHeader>
<IconTabBar id="idIconTabBarMulti" class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter icon="sap-icon://account">
<f:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="fales" layout="ResponsiveGridLayout"
id="from_header" title="">
<f:content>
<Label text="{i18n>fromdate}" id="l_fdate" required="true"/>
<DatePicker width="30%" id="fdate" valueFormat="yyyyMMdd" displayFormat="dd/MM/yyyy"/>
<Label text="{i18n>todate}" id="l_tdate" required="true"/>
<DatePicker width="61%" id="tdate" valueFormat="yyyyMMdd" displayFormat="dd/MM/yyyy"/>
<Button id="iddate" press="OngetData" type="Unstyled" icon="sap-icon://display" width="30%"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="fales" layout="ResponsiveGridLayout"
id="from_overtime" title="">
<f:content id="cc">
<ScrollContainer horizontal="true" vertical="false" focusable="true" width="55rem">
<!--<sc:ScrollBarheight="20rem" vertical="false" size = "200px" contentSize = "500px" scrollPosition = "50"> -->
<t:Table selectionMode="None" id="oTable" navigationMode="Paginator" filter="onfilter" showNoData="true" width="70rem" visibleRowCount="16">
<t:columns>
<t:Column id="c_odate" width="10%" autoResizable="true">
<Label text="{i18n>odate}"/>
<t:template>
<Label id="t_odate" text="{OtDate}"/>
</t:template>
</t:Column>
<t:Column id="c_cin" autoResizable="true">
<Label text="{i18n>cin}"/>
<t:template>
<Label id="t_cin" text="{FcIn}"/>
</t:template>
</t:Column>
<t:Column id="c_cout" autoResizable="true">
<Label text="{i18n>cout}"/>
<t:template>
<Label id="t_cout" text="{LcOut}"/>
</t:template>
</t:Column>
<t:Column id="c_lhour" autoResizable="true">
<Label text="{i18n>lhour}"/>
<t:template>
<Label id="t_lhour" text="{LogicHours}"/>
</t:template>
</t:Column>
<t:Column id="c_toout" autoResizable="true">
<Label text="{i18n>toout}"/>
<t:template>
<Label id="t_toout" text="{OutOffice}"/>
</t:template>
</t:Column>
<t:Column id="c_toin" autoResizable="true">
<Label text="{i18n>toin}"/>
<t:template>
<Label id="t_toin" text="{InOffice}"/>
</t:template>
</t:Column>
<t:Column id="c_elhours" autoResizable="true">
<Label text="{i18n>elhours}"/>
<t:template>
<Label id="t_elhours" text="{EligableHours}"/>
</t:template>
</t:Column>
<!-- <t:Column id="c_stime" autoResizable="true">
<Label text="{i18n>stime}"/>
<t:template>
<Label id="t_stime" text="{TimeDiff}"/>
</t:template>
</t:Column>-->
<t:Column id="c_mover" autoResizable="true">
<Label text="{i18n>mover}"/>
<t:template>
<Label id="t_mover" text="{ManualOvt}"/>
</t:template>
</t:Column>
<t:Column id="c_diff" autoResizable="true">
<Label text="{i18n>tdiff}"/>
<t:template>
<Label id="t_diff" text="{TimeDiff}"/>
</t:template>
</t:Column>
<t:Column id="c_hrapp" autoResizable="true">
<Label text="{i18n>hrapp}"/>
<t:template>
<Input id="t_hrapp" value="{HrApp}"/>
</t:template>
</t:Column>
<!-- <t:Column id="c_ElgHrApp" autoResizable="true">
<Label text="{i18n>ElgHrApp}"/>
<t:template>
<Label id="t_ElgHrApp" text="{ElgHrApp}"/>
</t:template>
</t:Column>-->
</t:columns>
</t:Table>
</ScrollContainer>
<!-- </sc:ScrollBar>-->
</f:content>
</f:SimpleForm>
<f:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="true" layout="ResponsiveGridLayout"
id="from_tovertime" title="Totals ">
<Button id="idCalc" text="{i18n>Calc}" press="OnCalc" type="Default" icon="sap-icon://simulate" width="10%"/>
<f:content id="cc1">
<!-- <Label id="t_twork" text="{i18n>TWOffice}"/>
<Input id="t_ttwork" editable="false" width="40%"/>
<Input id="t_ttout" value="{i18n>TOutOffice}" editable="false"/>
<Input id="t_ttoout" type="Number" editable="false"/>-->
<Label id="t_ttin" text="{i18n>TInOffice}"/>
<Input id="t_ttoin" type="Number" editable="false"/>
<Input id="t_tShift" value="{i18n>TShift}" editable="false"/>
<Input id="t_ttShift" type="Number" editable="false"/>
<Label id="t_tmhrs" text="{i18n>Tmhrs}"/>
<Input id="t_ttmhrs" type="Number" editable="false"/>
<Label id="t_syshr" text="{i18n>Tsyshr}"/>
<Input id="t_tsyshr" editable="false" width="40%"/>
<Input id="t_thrapp" value="{i18n>thrapp}" editable="false"/>
<Input id="t_tthrapp" type="Number" editable="false"/>
</f:content>
</f:SimpleForm>
<f:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="false" layout="ResponsiveLayout"
id="from_tovertime2" title="Approved Hrs ">
<f:content >
<!--<RadioButton id="addover" groupName="G1" text="Add Over Hrs" selected="true" valueState="Warning"/>-->
<Label id="l_AddHRs" text="Add Over Hrs"/>
<Input id="t_AddHRs" type="Number" editable="true" width="30%" valueState="Success"/>
<!--<RadioButton id="subover" groupName="G1" text="Add Penalty" valueState="Error"></RadioButton>-->
<Label id="l_Penalty" text="Add Penalty"/>
<Input id="t_Penalty" type="Number" editable="true" width="30%"/>
</f:content>
</f:SimpleForm>
</IconTabFilter>
<!--<IconTabFilter icon="sap-icon://attachment">
<Panel>
<UploadCollection id="UploadCollection" maximumFilenameLength="55" multiple="true" showSeparators="None" items="{/AttachmentsSet}"
change="onChange" fileDeleted="onFileDeleted" uploadComplete="onUploadComplete">
<UploadCollectionItem fileName="{Filename}" mimeType="{MimeType}" url="{url}"/>
</UploadCollection>
</Panel>
</IconTabFilter>-->
</items>
</IconTabBar>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="idSubmit" text="{i18n>save}" press="OnSave" type="Emphasized" icon="sap-icon://add"/>
<Button id="idApprove" text="{i18n>approve}" press="OnApprove" type="Accept" icon="sap-icon://accept"/>
<Button id="idCancel" text="{i18n>close}" press="onNavBack" type="Reject" icon="sap-icon://sys-cancel"/>
</Toolbar>
</footer>
</Page>
</detailPages>
</SplitApp>
</mvc:View>
答案 0 :(得分：0)
为了使文档DOM尽可能精简，Table控件重用了其行的DOM元素。当用户滚动时，仅行上下文被更改，但呈现的控件保持不变。这使Table控件可以处理大量数据。但是，对于显示的列数有限制。保持尽可能低的数量以提高性能。由于表的性质，用于列模板的控件对性能也有很大影响。
强调我的。我认为您描述的行为是设计好的。
您以这种方式显示多少数据？如果您不需要显示数千行，则最好使用sap.m.Table而不这样做。
答案 1 :(得分：0)
问题是由于ODataModel。使用了ODataModel的版本2解决了该问题。