使用JS fileUploader将csv上传到动态表

2020-08-23 11:58发布

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

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


亲爱的,当我想上传一个csv文件并将其显示在动态表格中时,遇到以下问题:

 1)----在索引中,我声明了具有相应视图的以下库
 <!DOCTYPE HTML>
 
 <头>
  CMPC客户端
 
 
 
 
 
 <!-仅加载移动库" sap.m"和" sap_bluecrystal"主题->
 <脚本>
 sap.ui.localResources(" cmpcclient");
 var app = new sap.m.App({initialPage:" idLogo1"});
 var page = sap.ui.view({id:" idLogo1",viewName:" cmpcclient.Logo",键入:sap.ui.core.mvc.ViewType.JS});
 var page2 = sap.ui.view({id:" idLogo2",viewName:" cmpcclient.form",类型:sap.ui.core.mvc.ViewType.JS});


 app.addPage(page);
 app.addPage(page2);
 app.placeAt(" content");
 

 
 
 
 2)-------在视图中,我配置了以下内容:--------------- 
 sap.ui.define([
 'jquery.sap.global',
 " sap/ui/model/Filter",
 " sap/ui/unified/FileUploader",
 " sap/ui/core/mvc/Controller",
 " sap/ui/model/json/JSONModel",
 " sap/m/MessageToast",
 " sap/m/Column",
 " sap/m/ColumnListItem",
 "SAP/米/标签",
 " sap/m/Text",
 " sap/m/TabContainerItem",
 " sap/m/MessageBox",
 ]),
 sap.ui.jsview(" cmpcclient.form",{
/**指定属于该视图的控制器。
 *在未实现或返回" null"的情况下,该视图没有控制器。
 * @memberOf cmpcclient.form
 */
 getControllerName:function(){
 返回" cmpcclient.form";
 },
/**在实例化Controller之后最初被调用一次。 这是构造UI的地方。
 *由于将控制器赋予了此方法,因此可以立即附加其事件处理程序。
 * @memberOf cmpcclient.form
 */
 createContent:function(oController){
 var oLabel = new sap.m.Label(" IdLabel1");

//Asignaciones Cajas


 var cajaPrincipal = new sap.ui.commons.layout.MatrixLayout(" Matrix4",{
 layoutFixed:正确,
 列:5
 宽度:['300px','300px','300px','200px','200px']
 })。addStyleClass(" divInput");
//1.行

 var seccionTitulo = new sap.ui.commons.layout.MatrixLayoutCell();
 seccionTitulo.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 seccionTitulo.setColSpan(5)

 cajaPrincipal.createRow({height:" 100px"},seccionTitulo);;


 var oMLC2 = new sap.ui.commons.layout.MatrixLayoutCell(" caja1");
 oMLC2.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 oMLC2.setColSpan(5);

 cajaPrincipal.createRow({height:" 100px"},oMLC2);



 var tableDiv = new sap.ui.commons.layout.MatrixLayoutCell(" tableDiv")。addStyleClass(" table");
 tableDiv.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 tableDiv.setColSpan(5)

 cajaPrincipal.createRow({height:" auto",width:" 100%"},tableDiv);


//FIN Asignaciones Cajas

//标题
//Titulo
 var component = new sap.ui.commons.TextView(" TV-Head")。addStyleClass(" component-title");
 component.setText(" Carga de Datos");
 component.setDesign(sap.ui.commons.TextViewDesign.H3);
 seccionTitulo.addContent(component);


//Creamos lista de Items
 var oListBox1 = new sap.ui.commons.ListBox(" Cities",{
 项目:[
 新的sap.ui.core.ListItem({id:" Ciudad1",文本:" Orlando",AdditionalText:" bello"}),
 新的sap.ui.core.ListItem({id:" Ciudad2",文本:"España",AdditionalText:" bello"}),
 新的sap.ui.core.ListItem({id:" Ciudad3",文本:"巴拉圭",AdditionalText:" maso"}),
 新的sap.ui.core.ListItem({id:" Ciudad4",文本:" Argentina",AdditionalText:" copado"}),
 ]
 });


 var oComboBox1 = new sap.ui.commons.ComboBox(" ComboBoxC",{
 工具提示:" ciudad",
 displaySecondaryValues:true,
 值:" Prueba1",
 " association:listBox":oListBox1
 })。addStyleClass(" combBox");

 oMLC2.addContent(oComboBox1);


//suba de archivos

 var oFileUploader = new sap.ui.unified.FileUploader({
 id:" fileUpload",
             名称:" simpleUploader",
             sendXHR:是的,
             uploadUrl:"上传/",
             useMultipart:否,
             更改:[oController.handleUpload,oController],
         });
 oMLC2.addContent(oFileUploader);


 var oButton = new sap.m.Button({width:" 10rem",
             文字:" Enviar",
             类型:"强调",
           
 });
 oMLC2.addContent(oButton);


//商标
 var oImg = new sap.ui.commons.Image({
 id:" img-pic",
 src:'./logo-cmpc.png',
 alt:" CMPC",
 })。addStyleClass(" logo-cmpc");
 seccionTitulo.addContent(oImg);


//Comienzo表
 var oTable = new sap.ui.table.Table(" TableInvoice",{可编辑:false,



 });
 tableDiv.addContent(oTable);


 

//Fin标题


//Retornamos todo el DIV
 返回cajaPrincipal;



 var oPage = new sap.m.Page({
 标题:"简单动物清单",
 showNavButton:是的,
             navButtonPress:function(){oController.handleNavBack();  },
 内容:[Titulo,
 cajaPrincipal,
 oAppHeader,
 表
 ]
 });


 返回oPage;
 }
 }); 


 -------------------------在控制器中的以下代码:------------------  -----------------------------------



 sap.ui.define([
 " jquery.sap.global",
 " sap/ui/model/Filter",
 " sap/ui/unified/FileUploader",
 " sap/ui/core/mvc/Controller",
 " sap/ui/model/json/JSONModel",
 " sap/m/MessageToast",
 " sap/m/Column",
 " sap/m/ColumnListItem",
 "SAP/米/标签",
 " sap/m/Text",
 " sap/m/TabContainerItem",
 " sap/m/MessageBox",
 ],函数(jQuery,控制器,过滤器,JSONModel,列,ColumnListItem,标签,文本){



 var cController = Controller.extend(" cmpcclient.form",{

 onInit:函数(oEvent){
 var oModel = new sap.ui.model.json.JSONModel();
 oModel.setSizeLimit(10000);
 sap.ui.getCore()。setModel(oModel);
 var oUploader = this.getView()。byId(" fileUploader");
 oUploader.addEventDelegate({
 onAfterRendering:function(){
 this.setFileType(['csv']);
 }
 },oUploader);
 },





 handleUpload:function(oEvent){
 var that = this
 var oFileToRead = oEvent.getParameters()。files [" 0"];
 if(oFileToRead && window.FileReader){
 var reader = new FileReader();
//以UTF-8格式将文件读入内存
//处理错误加载
 reader.onload = function(evt){
             var strCSV = evt.target.result; //CSV字符串
             that.csvJSON(strCSV);
           };
           reader.readAsText(oFileToRead);
 }
 },




 csvJSON:function(csv){
 var lines = csv.split(" \ n");
 var result = [];
 var headers = lines [0] .split(",");
 for(var i = 1; i 

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

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


亲爱的,当我想上传一个csv文件并将其显示在动态表格中时,遇到以下问题:

 1)----在索引中,我声明了具有相应视图的以下库
 <!DOCTYPE HTML>
 
 <头>
  CMPC客户端
 
 
 
 
 
 <!-仅加载移动库" sap.m"和" sap_bluecrystal"主题->
 <脚本>
 sap.ui.localResources(" cmpcclient");
 var app = new sap.m.App({initialPage:" idLogo1"});
 var page = sap.ui.view({id:" idLogo1",viewName:" cmpcclient.Logo",键入:sap.ui.core.mvc.ViewType.JS});
 var page2 = sap.ui.view({id:" idLogo2",viewName:" cmpcclient.form",类型:sap.ui.core.mvc.ViewType.JS});


 app.addPage(page);
 app.addPage(page2);
 app.placeAt(" content");
 

 
 
 
 2)-------在视图中,我配置了以下内容:--------------- 
 sap.ui.define([
 'jquery.sap.global',
 " sap/ui/model/Filter",
 " sap/ui/unified/FileUploader",
 " sap/ui/core/mvc/Controller",
 " sap/ui/model/json/JSONModel",
 " sap/m/MessageToast",
 " sap/m/Column",
 " sap/m/ColumnListItem",
 "SAP/米/标签",
 " sap/m/Text",
 " sap/m/TabContainerItem",
 " sap/m/MessageBox",
 ]),
 sap.ui.jsview(" cmpcclient.form",{
/**指定属于该视图的控制器。
 *在未实现或返回" null"的情况下,该视图没有控制器。
 * @memberOf cmpcclient.form
 */
 getControllerName:function(){
 返回" cmpcclient.form";
 },
/**在实例化Controller之后最初被调用一次。 这是构造UI的地方。
 *由于将控制器赋予了此方法,因此可以立即附加其事件处理程序。
 * @memberOf cmpcclient.form
 */
 createContent:function(oController){
 var oLabel = new sap.m.Label(" IdLabel1");

//Asignaciones Cajas


 var cajaPrincipal = new sap.ui.commons.layout.MatrixLayout(" Matrix4",{
 layoutFixed:正确,
 列:5
 宽度:['300px','300px','300px','200px','200px']
 })。addStyleClass(" divInput");
//1.行

 var seccionTitulo = new sap.ui.commons.layout.MatrixLayoutCell();
 seccionTitulo.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 seccionTitulo.setColSpan(5)

 cajaPrincipal.createRow({height:" 100px"},seccionTitulo);;


 var oMLC2 = new sap.ui.commons.layout.MatrixLayoutCell(" caja1");
 oMLC2.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 oMLC2.setColSpan(5);

 cajaPrincipal.createRow({height:" 100px"},oMLC2);



 var tableDiv = new sap.ui.commons.layout.MatrixLayoutCell(" tableDiv")。addStyleClass(" table");
 tableDiv.setVAlign(sap.ui.commons.layout.VAlign.bottom);
 tableDiv.setColSpan(5)

 cajaPrincipal.createRow({height:" auto",width:" 100%"},tableDiv);


//FIN Asignaciones Cajas

//标题
//Titulo
 var component = new sap.ui.commons.TextView(" TV-Head")。addStyleClass(" component-title");
 component.setText(" Carga de Datos");
 component.setDesign(sap.ui.commons.TextViewDesign.H3);
 seccionTitulo.addContent(component);


//Creamos lista de Items
 var oListBox1 = new sap.ui.commons.ListBox(" Cities",{
 项目:[
 新的sap.ui.core.ListItem({id:" Ciudad1",文本:" Orlando",AdditionalText:" bello"}),
 新的sap.ui.core.ListItem({id:" Ciudad2",文本:"España",AdditionalText:" bello"}),
 新的sap.ui.core.ListItem({id:" Ciudad3",文本:"巴拉圭",AdditionalText:" maso"}),
 新的sap.ui.core.ListItem({id:" Ciudad4",文本:" Argentina",AdditionalText:" copado"}),
 ]
 });


 var oComboBox1 = new sap.ui.commons.ComboBox(" ComboBoxC",{
 工具提示:" ciudad",
 displaySecondaryValues:true,
 值:" Prueba1",
 " association:listBox":oListBox1
 })。addStyleClass(" combBox");

 oMLC2.addContent(oComboBox1);


//suba de archivos

 var oFileUploader = new sap.ui.unified.FileUploader({
 id:" fileUpload",
             名称:" simpleUploader",
             sendXHR:是的,
             uploadUrl:"上传/",
             useMultipart:否,
             更改:[oController.handleUpload,oController],
         });
 oMLC2.addContent(oFileUploader);


 var oButton = new sap.m.Button({width:" 10rem",
             文字:" Enviar",
             类型:"强调",
           
 });
 oMLC2.addContent(oButton);


//商标
 var oImg = new sap.ui.commons.Image({
 id:" img-pic",
 src:'./logo-cmpc.png',
 alt:" CMPC",
 })。addStyleClass(" logo-cmpc");
 seccionTitulo.addContent(oImg);


//Comienzo表
 var oTable = new sap.ui.table.Table(" TableInvoice",{可编辑:false,



 });
 tableDiv.addContent(oTable);


 

//Fin标题


//Retornamos todo el DIV
 返回cajaPrincipal;



 var oPage = new sap.m.Page({
 标题:"简单动物清单",
 showNavButton:是的,
             navButtonPress:function(){oController.handleNavBack();  },
 内容:[Titulo,
 cajaPrincipal,
 oAppHeader,
 表
 ]
 });


 返回oPage;
 }
 }); 


 -------------------------在控制器中的以下代码:------------------  -----------------------------------



 sap.ui.define([
 " jquery.sap.global",
 " sap/ui/model/Filter",
 " sap/ui/unified/FileUploader",
 " sap/ui/core/mvc/Controller",
 " sap/ui/model/json/JSONModel",
 " sap/m/MessageToast",
 " sap/m/Column",
 " sap/m/ColumnListItem",
 "SAP/米/标签",
 " sap/m/Text",
 " sap/m/TabContainerItem",
 " sap/m/MessageBox",
 ],函数(jQuery,控制器,过滤器,JSONModel,列,ColumnListItem,标签,文本){



 var cController = Controller.extend(" cmpcclient.form",{

 onInit:函数(oEvent){
 var oModel = new sap.ui.model.json.JSONModel();
 oModel.setSizeLimit(10000);
 sap.ui.getCore()。setModel(oModel);
 var oUploader = this.getView()。byId(" fileUploader");
 oUploader.addEventDelegate({
 onAfterRendering:function(){
 this.setFileType(['csv']);
 }
 },oUploader);
 },





 handleUpload:function(oEvent){
 var that = this
 var oFileToRead = oEvent.getParameters()。files [" 0"];
 if(oFileToRead && window.FileReader){
 var reader = new FileReader();
//以UTF-8格式将文件读入内存
//处理错误加载
 reader.onload = function(evt){
             var strCSV = evt.target.result; //CSV字符串
             that.csvJSON(strCSV);
           };
           reader.readAsText(oFileToRead);
 }
 },




 csvJSON:function(csv){
 var lines = csv.split(" \ n");
 var result = [];
 var headers = lines [0] .split(",");
 for(var i = 1; i   
付费偷看设置
发送
4条回答
何必丶何苦呢
1楼-- · 2020-08-23 12:43

将您的onInit代码从:

 var oModel = new sap.ui.model.json.JSONModel(); 

更改为

 this.oModel  = new sap.ui.model.json.JSONModel(); 

,然后在generateTable方法中,使用this.oModel代替oModel

暮风yp
2楼-- · 2020-08-23 12:31

进行调试(例如,通过开发者工具进行调试) 在Chrome浏览器中)无济于事?

葫芦娃快救爷爷
3楼-- · 2020-08-23 12:48

尊敬的早上好,谢谢您的答复,我能够通过添加该函数所在的库来解决它(如果有的话) 怀疑,因为我不认识该表,在启动它时,我认为它是未定义的,

huskylover
4楼-- · 2020-08-23 12:39

亲爱的我抛出了以下错误,

 ncaught TypeError:this.oTable.bindAggregation不是函数
  在builder.generateTable(Form.controller.js?eval:134)处
  在builder.csvJSON(Form.controller.js?eval:114)
  在FileReader.reader.onload(Form.controller.js?eval:77)

一周热门 更多>