提问
SAPUI5 JavaScript

使用JSON数据绑定动态填充表格

2020-09-13 12:09发布

站内问答 / UI5
939 3 6

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


我具有以下功能，可以上传excel文件并将其显示在sapui5视图表中。 我正在使用第三方库SheetJS实现上传。

上传文件时，出现错误，"我的表中不存在"/img/items"。 有人知道我该如何填表吗？ 也许我必须遍历JSON模型中的所有对象？

谢谢！

 onXLSXupload：函数（e）{
 this._import（e.getParameter（" files"）&& e.getParameter（" files"）[0]）;
 }，
 _import：函数（文件）{
 var oTable = this.getView（）。byId（'testdata3'）;
 if（file && window.FileReader）{
 var reader = new FileReader（）;
 var result = {}，数据；
 var that = this;
 reader.readAsBinaryString（file）;
 reader.onload = function（e）{
 var rawLog = reader.result;
 console.log（rawLog）;
 数据= e.target.result;
 var wb = XLSX.read（data，{type：'binary'}）;
 wb.SheetNames.forEach（function（sheetName）{
 var rObjArr = XLSX.utils.sheet_to_json（wb.Sheets [sheetName]）;
 如果（rObjArr.length> 0）{
 result [sheetName] = rObjArr;
 }
 var output = JSON.stringify（result，2，2）;
 var oModel = new sap.ui.model.json.JSONModel（）;
 oModel.setData（{items：rObjArr}）;

     oTable.setModel（oModel）;
     oTable.bindAggregation（'/items'）;
 }）;

 console.log（'输出'）;
 console.log（输出）;
 };
 };
 }，
 这就是我表的xml结构的样子：

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


我具有以下功能，可以上传excel文件并将其显示在sapui5视图表中。 我正在使用第三方库SheetJS实现上传。

上传文件时，出现错误，"我的表中不存在"/img/items"。 有人知道我该如何填表吗？ 也许我必须遍历JSON模型中的所有对象？

谢谢！

 onXLSXupload：函数（e）{
 this._import（e.getParameter（" files"）&& e.getParameter（" files"）[0]）;
 }，
 _import：函数（文件）{
 var oTable = this.getView（）。byId（'testdata3'）;
 if（file && window.FileReader）{
 var reader = new FileReader（）;
 var result = {}，数据；
 var that = this;
 reader.readAsBinaryString（file）;
 reader.onload = function（e）{
 var rawLog = reader.result;
 console.log（rawLog）;
 数据= e.target.result;
 var wb = XLSX.read（data，{type：'binary'}）;
 wb.SheetNames.forEach（function（sheetName）{
 var rObjArr = XLSX.utils.sheet_to_json（wb.Sheets [sheetName]）;
 如果（rObjArr.length> 0）{
 result [sheetName] = rObjArr;
 }
 var output = JSON.stringify（result，2，2）;
 var oModel = new sap.ui.model.json.JSONModel（）;
 oModel.setData（{items：rObjArr}）;

     oTable.setModel（oModel）;
     oTable.bindAggregation（'/items'）;
 }）;

 console.log（'输出'）;
 console.log（输出）;
 };
 };
 }，
 这就是我表的xml结构的样子：
付费偷看设置
发送
3条回答
葫芦娃快救爷爷
1楼-- · 2020-09-13 12:41 
 oTable.bindAggregation（'items'，{您必须在此处提供模板}）;
N-Moskvin
2楼-- · 2020-09-13 13:07

花花公子，否/

SAP小黑
3楼-- · 2020-09-13 12:48

该错误是正确的。 您的表格目前没有项目汇总。 SAPUI5遵循MVC模式（模型视图控制器），这意味着每个文件都处理特定的内容。 模型处理数据以及与服务器的交互，控制器处理逻辑，视图处理渲染/UI。

这是我的建议。 转到表文档，并查看一些表和模板示例。 更新您当前的表项聚合绑定，以像这样绑定到您的JSONModel 

 <表项目=" {/items}">
 <列>
 <栏目>
 
 
 <栏目>
 
 
 <栏目>
 
 
 
 <项目>
 
 <单元格>

请注意，在此示例中，我使用的是默认模型，因此请根据您的用例进行编辑。

还要注意，Value1，Value2，Value3是我使用的一些虚拟数据。 如果在您的JSON模型中您有这样的东西，它将起作用：

 {
 项目：[{
 值1："这是第一个值"，
 值2："这是第二个值"
 值3："这是第三个值"
 }，{
 值1："这是第一个值"，
 值2："这是第二个值"
 值3："这是第三个值"
 }，{
 值1："这是第一个值"，
 值2："这是第二个值"
 值3："这是第三个值"
 }]
 }

在您的控制器中，您可以执行以下操作：

//获取所有数据
 var jsonData = fetchDataFromExcel（）;
 var oModel = new sap.ui.model.json.JSONModel（{items：jsonData}）; //请添加sap.ui.model.json.JSONModel作为依赖项并删除完整路径
 this.getView（）。setModel（oModel）;


//此时，SAPUI5将刷新您的表绑定，并显示表中的所有项目

一周热门 更多>

点击此处---> EasySAP.com 一起学习S4 HANA ...