我所做的是从oData服务中提取oData然后我对这些数据进行了计算,现在我想在表中显示修改后的数据。
用于修改oData并将其存储在JSON模型中的代码如下:
$.each(customers,function(i){
sum = 0;
$.each(payerName,function(j){
if (payerName[j] === customers[i] && year[j] === ySelect && mSelectKey === "a" ){
sum += amount[j];
}
else if (payerName[j] === customers[i] && year[j] === ySelect && month[j] === mSelect){
sum += amount[j];
}
});
total[i] = sum;
});
for (var i = 0; i < customers.length; i++){
tableView.push({
"customer": customers[i],
"total": total[i],
"currencyCode": currencyCode
});
}
var tableObject = {"Data": tableView};
tableModel = new sap.ui.model.json.JSONModel(tableObject);
this.setModel(tableModel, "tableModel");
我现在想在表格中显示这些数据。我尝试过以下方法,但似乎没有用:
<semantic:content>
<Table
id="customersTable"
width="auto"
items="{tableModel>/Data}"
noDataText="{worklistView>/tableNoDataText}"
busyIndicatorDelay="{worklistView>/tableBusyDelay}"
growing="true"
growingScrollToLoad="false"
updateFinished="onUpdateFinished">
<columns>
<Column id="nameColumn">
<Text text="{i18n>tableNameColumnTitle}" id="nameColumnTitle"/>
</Column>
<Column id="unitNumberColumn" hAlign="End">
<Text text="{i18n>tableUnitNumberColumnTitle}" id="unitNumberColumnTitle"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{tableModel>customer}"
/>
<ObjectNumber
number="{
parts: [
{path: 'tableModel>total'},
{path: 'tableModel>currencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {
currencyCode: false
}
}"
/>
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
更新
我添加了所有代码,希望有人能发现我的错误: Worklist.view.xml:
<mvc:View
controllerName="know.billingdocuments.KnowTable.controller.Worklist"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.f.semantic"
xmlns:footerbar="sap.ushell.ui.footerbar"
xmlns:core="sap.ui.core">
<semantic:SemanticPage
id="page"
headerPinnable="false"
toggleHeaderOnTitleClick="false">
<semantic:titleHeading>
<Title text="{i18n>worklistTitle}" />
</semantic:titleHeading>
<semantic:content>
<Table
id="customersTable"
width="auto"
items="{model: 'tableModel', path: '/Data'}"
noDataText="{worklistView>/tableNoDataText}"
busyIndicatorDelay="{worklistView>/tableBusyDelay}"
growing="true"
growingScrollToLoad="false"
updateFinished="onUpdateFinished">
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer />
<Label text = "{i18n>filterYear}:"/>
<Select id="YearSelect">
<items>
<core:Item text="2018"/>
<core:Item text="2017"/>
<core:Item text="2016"/>
<core:Item text="2015"/>
</items>
</Select>
<Label text = "{i18n>filterMonth}:"/>
<Select id="MonthSelect">
<items>
<core:Item text="{i18n>filterWholeYear}" key = "a"/>
<core:Item text="{i18n>filterJanuary}"/>
<core:Item text="{i18n>filterFebruary}"/>
<core:Item text="{i18n>filterMarch}"/>
<core:Item text="{i18n>filterApril}"/>
<core:Item text="{i18n>filterMay}"/>
<core:Item text="{i18n>filterJune}"/>
<core:Item text="{i18n>filterJuly}"/>
<core:Item text="{i18n>filterAugust}"/>
<core:Item text="{i18n>filterSeptember}"/>
<core:Item text="{i18n>filterOctober}"/>
<core:Item text="{i18n>filterNovember}"/>
<core:Item text="{i18n>filterDecember}"/>
</items>
</Select>
<Button text="{i18n>filterDisplay}" press="onPress"/>
<ToolbarSpacer />
<SearchField
id="searchField"
tooltip="{i18n>worklistSearchTooltip}"
search="onSearch"
width="auto">
</SearchField>
</Toolbar>
</headerToolbar>
<columns>
<Column id="nameColumn">
<Text text="{i18n>tableNameColumnTitle}" id="nameColumnTitle"/>
</Column>
<Column id="unitNumberColumn" hAlign="End">
<Text text="{i18n>tableUnitNumberColumnTitle}" id="unitNumberColumnTitle"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{tableModel>customer}"
/>
<ObjectNumber
number="{
parts: [
{path: 'tableModel>total'},
{path: 'tableModel>currencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {
currencyCode: false
}
}"
/>
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
</semantic:SemanticPage>
和Worklist.controller.js:
sap.ui.define([
"know/billingdocuments/KnowTable/controller/BaseController",
"sap/ui/model/json/JSONModel",
"sap/ui/core/routing/History",
"know/billingdocuments/KnowTable/model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (BaseController, JSONModel, History, formatter, Filter, FilterOperator) {
"use strict";
return BaseController.extend("know.billingdocuments.KnowTable.controller.Worklist", {
formatter: formatter,
/* =========================================================== */
/* lifecycle methods */
/* =========================================================== */
/**
* Called when the worklist controller is instantiated.
* @public
*/
onInit : function () {
var oViewModel,
iOriginalBusyDelay,
oTable = this.byId("customersTable");
// Put down worklist table's original value for busy indicator delay,
// so it can be restored later on. Busy handling on the table is
// taken care of by the table itself.
iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
// keeps the search state
this._aTableSearchState = [];
// Model used to manipulate control states
oViewModel = new JSONModel({
worklistTableTitle : this.getResourceBundle().getText("worklistTableTitle"),
tableNoDataText : this.getResourceBundle().getText("tableNoDataText"),
tableBusyDelay : 0
});
this.setModel(oViewModel, "worklistView");
// Make sure, busy indication is showing immediately so there is no
// break after the busy indication for loading the view's meta data is
// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
oTable.attachEventOnce("updateFinished", function(){
// Restore original busy indicator delay for worklist's table
oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
});
var oModel = new sap.ui.model.odata.v2.ODataModel("/Demo21/sap/opu/odata/sap/CB_BILLING_DOCUMENT_SRV/");
var tableView = [];
var tableModel;
var customers = [];
var payerName = [];
var netValue = [];
var date = [];
var currencyCode = "USD";
var amount = [];
var year = [];
var month = [];
var monthNumber = [];
var sum;
var total = [];
sap.ui.getCore().setModel(oModel);
oModel.read("/Customers", {
async: false,
success: function (oEvent) {
$.each(oEvent.results, function (i, item) {
customers.push(
item.CustomerName
);
});
}
});
oModel.read("/BillingDocuments", {
async: false,
success: function (oEvent) {
$.each(oEvent.results, function (i, item) {
payerName.push(
item.PayerName
);
});
$.each(oEvent.results, function (i, item) {
netValue.push(
item.NetValue
);
});
$.each(oEvent.results, function (i, item) {
date.push(
item.BillingDocumentDate
);
});
$.each(netValue,function(i){
amount[i] = parseInt(netValue[i],10);
});
$.each(date,function(i){
var now = date[i];
year[i] = now.getFullYear();
});
$.each(date,function(i){
var now = date[i];
monthNumber[i] = now.getMonth();
});
$.each(monthNumber,function(i){
switch (monthNumber[i]) {
case 0 :
month[i] = "January";
break;
case 1 :
month[i] = "February";
break;
case 2 :
month[i] = "March";
break;
case 3 :
month[i] = "April";
break;
case 4 :
month[i] = "May";
break;
case 5 :
month[i] = "June";
break;
case 6 :
month[i] = "July";
break;
case 7 :
month[i] = "August";
break;
case 8 :
month[i] = "September";
break;
case 9 :
month[i] = "October";
break;
case 10 :
month[i] = "November";
break;
case 11 :
month[i] = "December";
break;
}
});
$.each(customers,function(i){
sum = 0;
$.each(payerName,function(j){
if (payerName[j] === customers[i]){
sum += amount[j];
}
});
total[i] = sum;
});
for (var i = 0; i < customers.length; i++){
tableView.push({
"customer": customers[i],
"total": total[i],
"currencyCode": currencyCode
});
}
}
});
var tableObject = {"Data": tableView};
tableModel = new sap.ui.model.json.JSONModel(tableObject);
this.setModel(tableModel, "tableModel");
console.log(tableObject);
console.log(tableModel);
},
/* =========================================================== */
/* event handlers */
/* =========================================================== */
/**
* Triggered by the table's 'updateFinished' event: after new table
* data is available, this handler method updates the table counter.
* This should only happen if the update was successful, which is
* why this handler is attached to 'updateFinished' and not to the
* table's list binding's 'dataReceived' method.
* @param {sap.ui.base.Event} oEvent the update finished event
* @public
*/
onUpdateFinished : function (oEvent) {
// update the worklist's object counter after the table update
var sTitle,
oTable = oEvent.getSource(),
iTotalItems = oEvent.getParameter("total");
// only update the counter if the length is final and
// the table is not empty
if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]);
} else {
sTitle = this.getResourceBundle().getText("worklistTableTitle");
}
this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle);
},
/**
* Event handler when a table item gets pressed
* @param {sap.ui.base.Event} oEvent the table selectionChange event
* @public
*/
onPress : function () {
// The source is the list item that got pressed
var oModel = new sap.ui.model.odata.v2.ODataModel("/Demo21/sap/opu/odata/sap/CB_BILLING_DOCUMENT_SRV/");
var ySelect = parseInt(this.getView().byId("YearSelect").getSelectedItem().getText(),10);
var mSelect = this.getView().byId("MonthSelect").getSelectedItem().getText();
var mSelectKey = this.getView().byId("MonthSelect").getSelectedKey();
var tableView = [];
var tableModel;
var customers = [];
var payerName = [];
var netValue = [];
var date = [];
var currencyCode = "USD";
var amount = [];
var year = [];
var month = [];
var monthNumber = [];
var sum;
var total = [];
sap.ui.getCore().setModel(oModel);
oModel.read("/Customers", {
async: false,
success: function (oEvent) {
$.each(oEvent.results, function (i, item) {
customers.push(
item.CustomerName
);
});
}
});
oModel.read("/BillingDocuments", {
async: false,
success: function (oEvent) {
$.each(oEvent.results, function (i, item) {
payerName.push(
item.PayerName
);
});
$.each(oEvent.results, function (i, item) {
netValue.push(
item.NetValue
);
});
$.each(oEvent.results, function (i, item) {
date.push(
item.BillingDocumentDate
);
});
$.each(netValue,function(i){
amount[i] = parseInt(netValue[i],10);
});
$.each(date,function(i){
var now = date[i];
year[i] = now.getFullYear();
});
$.each(date,function(i){
var now = date[i];
monthNumber[i] = now.getMonth();
});
$.each(monthNumber,function(i){
switch (monthNumber[i]) {
case 0 :
month[i] = "January";
break;
case 1 :
month[i] = "February";
break;
case 2 :
month[i] = "March";
break;
case 3 :
month[i] = "April";
break;
case 4 :
month[i] = "May";
break;
case 5 :
month[i] = "June";
break;
case 6 :
month[i] = "July";
break;
case 7 :
month[i] = "August";
break;
case 8 :
month[i] = "September";
break;
case 9 :
month[i] = "October";
break;
case 10 :
month[i] = "November";
break;
case 11 :
month[i] = "December";
break;
}
});
$.each(customers,function(i){
sum = 0;
$.each(payerName,function(j){
if (payerName[j] === customers[i] && year[j] === ySelect && mSelectKey === "a" ){
sum += amount[j];
}
else if (payerName[j] === customers[i] && year[j] === ySelect && month[j] === mSelect){
sum += amount[j];
}
});
total[i] = sum;
});
for (var i = 0; i < customers.length; i++){
tableView.push({
"customer": customers[i],
"total": total[i],
"currencyCode": currencyCode
});
}
}
});
var tableObject = {"Data": tableView};
tableModel = new sap.ui.model.json.JSONModel(tableObject);
this.setModel(tableModel, "tableModel");
console.log(tableObject);
console.log(tableModel);
},
onSearch : function (oEvent) {
if (oEvent.getParameters().refreshButtonPressed) {
// Search field's 'refresh' button has been pressed.
// This is visible if you select any master list item.
// In this case no new search is triggered, we only
// refresh the list binding.
this.onRefresh();
} else {
var aTableSearchState = [];
var sQuery = oEvent.getParameter("query");
if (sQuery && sQuery.length > 0) {
aTableSearchState = [new Filter("PayerName", FilterOperator.Contains, sQuery)];
}
this._applySearch(aTableSearchState);
}
},
/**
* Event handler for refresh event. Keeps filter, sort
* and group settings and refreshes the list binding.
* @public
*/
onRefresh : function () {
var oTable = this.byId("table");
oTable.getBinding("items").refresh();
},
/* =========================================================== */
/* internal methods */
/* =========================================================== */
/**
* Shows the selected item on the object page
* On phones a additional history entry is created
* @param {sap.m.ObjectListItem} oItem selected Item
* @private
*/
_showObject : function (oItem) {
this.getRouter().navTo("object", {
objectId: oItem.getBindingContext().getProperty("BillingDocument")
});
},
/**
* Internal helper method to apply both filter and search state together on the list binding
* @param {sap.ui.model.Filter[]} aTableSearchState An array of filters for the search
* @private
*/
_applySearch: function(aTableSearchState) {
var oTable = this.byId("table"),
oViewModel = this.getModel("worklistView");
oTable.getBinding("items").filter(aTableSearchState, "Application");
// changes the noDataText of the list in case there are no filter results
if (aTableSearchState.length !== 0) {
oViewModel.setProperty("/tableNoDataText", this.getResourceBundle().getText("worklistNoDataWithSearchText"));
}
}
});
}
);
更新2.其他数据。
当我在setModel之前放置一个断点时: Breakpoint
在下一个命令中,控制台中记录了什么: Console
答案 0 :(得分:0)
您的项目绑定需要指定模型。刚试过这个,它对我有用。
<mvc:View
controllerName="sap.m.sample.Table.Table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Table
id="customersTable"
width="auto"
items="{ model: 'tableModel', path: '/Data' }"
noDataText="No Data"
growing="true"
growingScrollToLoad="false">
<columns>
<Column id="nameColumn">
<Text text="Column Title" id="nameColumnTitle"/>
</Column>
<Column id="unitNumberColumn" hAlign="End">
<Text text="Unit Number" id="unitNumberColumnTitle"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{tableModel>customer}"
/>
<ObjectNumber
number="{
parts: [
{path: 'tableModel>total'},
{path: 'tableModel>currencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {
currencyCode: false
}
}"
/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>