У меня есть пустая таблица XML в моем приложении SAPUi5:
<m:Table id="testdata3"></m:Table>
В моем контроллере JavaScript я использую библиотеку SheetJS, чтобы загрузить файл Excel и затем прочитать данные в таблицу, используя "sheet_to_html"».При отладке моего кода у меня есть все данные вместе, а также мой вызов console.log показывает мне данные в innerHTML моей таблицы.Но по какой-то причине стол остается пустым.Так что в основном ничего не происходит в front-end.Я чувствую, что мне не хватает «возврата» или «заполнить» или что-то в этом направлении, чтобы загрузить таблицу с новыми данными.Есть идеи?
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
oTable.innerHTML = XLSX.utils.sheet_to_html(worksheet);
console.log(oTable.innerHTML);
}
Обновление: код для модели
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
var oModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oModel,'myResultModel');
that.getView().byId("testdata3").setModel(oModel);
var oColumns = [];
*// I'm iterating over the column names and pushing them to my table works fine, but I'm then stuck with proceeding and pushing the rest of the data to my table..*
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(cells).length; i++) {
if( cells[i].indexOf('1') > -1)
{
oColumns.push(worksheet[cells[i]].v);
}
}
var oColumnNames = [];
$.each(oColumns, function(i, value) {
oColumnNames.push({
Text: oColumns[i]
});
});
oModel.setProperty("/columnNames", oColumnNames);
oModel.setProperty("/columnNames", oColumnNames);
var oTemplate = new Column({
header: new Label({
text: "{Text}"
})
});
oTable.bindAggregation("columns", "/columns", oTemplate);
};
};
},
РЕДАКТИРОВАТЬ Вот еще одна попытка, которую я пытался, при отладке все выглядит хорошо, нов любом случае таблица остается пустой ..
onXLSXupload : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]);
},
_import : function(file) {
console.log(file);
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
wb.SheetNames.forEach(function(first_sheet_name) {
var roa = XLSX.utils.sheet_to_json(wb.Sheets[first_sheet_name]);
if(roa.length > 0){
result[first_sheet_name] = roa;
}
});
var data = result[Object.keys(result)[0]];
for(var i=0; i<data.length; i++){
var excelRows = new sap.m.ColumnListItem({cells:[
new sap.m.Text({text: data[i][Object.keys(data[i])[0]]}),
new sap.m.Text({text: data[i][Object.keys(data[i])[1]]})
]});
that.getView().byId("testdata3").addItem(excelRows );
}
};
};
},
Я просто изо всех сил пытаюсь найти правильный способ привязки предметов к моему столу .. Мне интересно, имеет ли это какое-то отношение к моемуПредставление XML или файл контроллера ..
Обновление с ответом от @ MatthijsMennen Теперь все еще не удается, поскольку элементы заполняются только в одном столбце
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
var first_sheet_name = wb.SheetNames[0];
var worksheet = wb.Sheets[first_sheet_name];
var aColumns = that.getColumnNames(worksheet);
var aData = that.getRowData(worksheet, result);alert(aData);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumns,
rows: aData
});
oTable.setModel(oModel);
oTable.bindAggregation("columns", "/columns", function(index, context) {
return new sap.m.Column({
header: new sap.m.Label({
text: context.getObject().columnId
})
});
});
oTable.bindAggregation("items", "/rows", function(index, context){
return new sap.m.ColumnListItem({
cells: [
new sap.m.Text({text: context.getObject().cellId })
]
});
});
};
};
},
getColumnNames: function(worksheet) {
var oColumns = [];
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(cells).length; i++) {
if (cells[i].indexOf("1") > -1) {
var columnName = worksheet[cells[i]].v;
oColumns.push({
columnId: columnName
});
}
}
return oColumns;
},
getRowData: function(worksheet, result) {
var roa = XLSX.utils.sheet_to_json(worksheet);
if(roa.length > 0){
result[worksheet] = roa;
}
var data = result[Object.keys(result)[0]];
console.log(data.length);
var i; var x;
var oCells = []
for(i = 0; i < data.length; i++){
for(var x = 0; x < data.length; x ++) {
var excelRows = data[i][Object.keys(data[i])[x]];
console.log(data[i][Object.keys(data[i])[x]])
oCells.push({ cellId: excelRows});
}
}
return oCells;
},
обновление для цикла for для columnlistitems
oTable.bindAggregation("items", "/rows", function(index, context) {
var roa = XLSX.utils.sheet_to_json(worksheet);
if(roa.length > 0){
result[worksheet] = roa;
}
for(var i = 0; i < roa.length; i++){
return new sap.m.ColumnListItem({
cells: [
new Text({ text :context.getObject().cellId })
]
})
};
});