滚动时文本输入单元格值在 table 中清除
Text input cell values clears in table when scrolling
我在每个 table 行的 table 列中有一个输入文本值框。该数据最初被获取并最初填充在那个特定的 table 单元格中。此单元格由用户编辑table，稍后可以在单击保存按钮后将其保存在数据库中。
但是，当用户在文本字段中输入值并上下滚动时会出现问题。该值被清除并默认为默认获取的值。无论如何我可以阻止它吗？当 table 的记录数量较少时，这不是问题，而是当您有大量行时才会出现问题。
这是否有任何 table 级别的配置，或者我是否需要为文本输入实现一些软事件机制？
这是代码。
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>
In order to keep the document DOM as lean as possible, the Table control reuses its DOM elements of the rows. When the user scrolls, only the row contexts are changed but the rendered controls remain the same. This allows the Table control to handle huge amounts of data. Nevertheless, restrictions apply regarding the number of displayed columns. Keep the number as low as possible to improve performance. Due to the nature of tables, the used control for column templates also has a big influence on the performance.
强调我的。我认为您描述的行为是设计好的。
你用这种方式显示了多少数据？如果您不需要显示数千行，您最好使用 sap.m.Table，它不会执行此操作。
问题是因为 ODataModel。使用 ODataModel 的版本 2 解决了这个问题。
我在每个 table 行的 table 列中有一个输入文本值框。该数据最初被获取并最初填充在那个特定的 table 单元格中。此单元格由用户编辑table，稍后可以在单击保存按钮后将其保存在数据库中。
但是，当用户在文本字段中输入值并上下滚动时会出现问题。该值被清除并默认为默认获取的值。无论如何我可以阻止它吗？当 table 的记录数量较少时，这不是问题，而是当您有大量行时才会出现问题。
这是否有任何 table 级别的配置，或者我是否需要为文本输入实现一些软事件机制？
这是代码。
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>
In order to keep the document DOM as lean as possible, the Table control reuses its DOM elements of the rows. When the user scrolls, only the row contexts are changed but the rendered controls remain the same. This allows the Table control to handle huge amounts of data. Nevertheless, restrictions apply regarding the number of displayed columns. Keep the number as low as possible to improve performance. Due to the nature of tables, the used control for column templates also has a big influence on the performance.
强调我的。我认为您描述的行为是设计好的。
你用这种方式显示了多少数据？如果您不需要显示数千行，您最好使用 sap.m.Table，它不会执行此操作。
问题是因为 ODataModel。使用 ODataModel 的版本 2 解决了这个问题。