Fatal编程技术网
  • javascript/
  • 在JavaScript控制器中填充XML表后填充它

在JavaScript控制器中填充XML表后填充它

javascript sapui5

在JavaScript控制器中填充XML表后填充它,javascript,sapui5,innerhtml,xmltable,Javascript,Sapui5,Innerhtml,Xmltable,我的SAPUi5应用程序中有一个空XML表： <m:Table id="testdata3"></m:Table> 更新：型号代码 _import : function(file) { var oTable = this.getView().byId('testdata3'); if(file && window.FileReader){ var reader = new

我的SAPUi5应用程序中有一个空XML表：

<m:Table id="testdata3"></m:Table>
更新：型号代码

_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);
                    };
                };
            },

\u导入：函数（文件）{
var oTable=this.getView（）.byId（'testdata3'）；
if（文件和窗口.FileReader）{
var reader=new FileReader（）；
var result={}，数据；
var=这个；
reader.readAsBinaryString（文件）；
reader.onload=函数（e）{
var rawLog=reader.result；
数据=e.target.result；
var wb=XLSX.read（数据，{type:'binary'}）；
var first_sheet_name=wb.SheetNames[0]；
var工作表=工作表[第一张工作表名称]；
var oModel=new sap.ui.model.json.JSONModel（）；
setModel（oModel，'myResultModel'）；
getView（）.byId（“testdata3”）.setModel（oModel）；
var oColumns=[]；
*//我对列名进行迭代并将其推送到我的表中效果很好，但随后我不得不继续并将其余的数据推送到我的表中*
变量单元格=Object.keys（工作表）；
对于（var i=0；i-1）
{
oColumns.push（工作表[cells[i]].v）；
}
}
var oColumnNames=[]；
$。每个（O列，函数（i，值）{
oColumnNames.push({
正文：奥运会开幕式[i]
});
});
setProperty（“/columnNames”，oColumnNames）；
setProperty（“/columnNames”，oColumnNames）；
var-oTemplate=新列({
标题：新标签({
正文：“{text}”
})
});
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 );

                       }
            };
        };
    },

onXLSXupload:函数（e）{
此.u导入（e.getParameter（“文件”）和&e.getParameter（“文件”）[0]）；
},
_导入：函数（文件）{
console.log（文件）；
var oTable=this.getView（）.byId（'testdata3'）；
if（文件和窗口.FileReader）{
var reader=new FileReader（）；
var result={}，数据；
var=这个；
reader.readAsBinaryString（文件）；
reader.onload=函数（e）{
var rawLog=reader.result；
数据=e.target.result；
var wb=XLSX.read（数据，{type:'binary'}）；
var first_sheet_name=wb.SheetNames[0]；
var工作表=工作表[第一张工作表名称]；
wb.SheetNames.forEach（函数（第一张工作表名称）{
var roa=XLSX.utils.sheet_to_json（wb.Sheets[第一张工作表名称]）；
如果（roa.length>0）{
结果[第一张工作表名称]=roa；
}
});
var data=result[Object.keys（result）[0]]；
对于（变量i=0；i-1）{
var columnName=工作表[cells[i]].v；
推({
columnId:columnName
});
}
}
返回oColumns；
},
getRowData:函数（工作表、结果）{
var roa=XLSX.utils.sheet_to_json（工作表）；
如果（roa.length>0）{
结果[工作表]=roa；
}
var data=result[Object.keys（result）[0]]；
console.log（data.length）；
VarI；VarX；
变量oCells=[]
对于（i=0；i
使用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 })
                                ]
                        })
                    };
                });

oTable.bindAggregation（“项”，“行”），函数（索引，上下文）{
var roa=XLSX.utils.sheet_to_json（工作表）；
如果（roa.length>0）{
结果[工作表]=roa；
}
对于（变量i=0；i
在我的一个项目中，我需要从controller动态创建表

以下是我所做的，希望它能帮助你：

查看

            <Table id="tableTask"
            inset="false">
            <headerToolbar>
                <OverflowToolbar id="otbSubheader">
                    <ToolbarSpacer/>
                    <SearchField id="taskSearchBox" search="onSearchOrClearPressed" liveChange="onSearchTasks" showSearchButton="false">
                        <layoutData><OverflowToolbarLayoutData minWidth="200px" maxWidth="300px" shrinkable="true"/></layoutData>
                    </SearchField>
                </OverflowToolbar>
            </headerToolbar>
            <columns>
                <!-- Columns created in controller -->
            </columns>
            <items>
                <ColumnListItem id="columnsListItemTask" press="onPressListItem" type="Navigation">
                    <cells>
                        <!-- Cells created in controller -->
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
更新

您可以执行for循环以动态添加任意数量的列：

onInit:function（）{

我在这里用SheetJS创建了一个小示例。列名是从工作表中提取的，但您仍然需要从工作表中获取行。我为行添加了一些虚拟数据

希望这有帮助

查看

    <Table id="testdata3" />
    <u:FileUploader change="onChange" buttonText="Upload" />
控制器

    onChange: function(oEvent) {
        var file = oEvent.getParameter("files")[0];
        var oTable = this.byId("testdata3");
        var reader = new FileReader();
        var that = this;
        reader.readAsBinaryString(file);
        reader.onload = function(e) {
            var data = e.target.result;
            var wb = XLSX.read(data, {
                type: "binary"
            });

            var firstSheetName = wb.SheetNames[0];
            var worksheet = wb.Sheets[firstSheetName];
            var oModel = new sap.ui.model.json.JSONModel();
            var aColumns = that.getColumnNames(worksheet);
            var aData = that.getRowData(worksheet);
            var aCells = that.getCells(aColumns);

            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", new sap.m.ColumnListItem({
                // CHANGE ACCORDINGLY OR MAKE DYNAMIC
                cells: aCells
            }));
        };

    },

    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() {
        var aItems = [];
        // DO YOUR THING HERE
        aItems[0] = {
            value0: "testvalue0",
            value1: "testvalue1",
            value2: "testvalue2",
            value3: "testvalue3",
            value4: "testvalue4"
        };

        return aItems;
    },

    getCells: function(aColumns) {
        var cells = [];
        for (var i = 0; i < aColumns.length; i++) {
            cells[i] = new sap.m.Text({
                text: "{value" + i + "}"
            });

        }

        return cells;
    }

onChange:function（oEvent）{
var file=oEvent.getParameter（“文件”）[0]；
var oTable=this.byId（“testdata3”）；
var reader=new FileReader（）；
var=这个；
reader.readAsBinaryStrin

onInit: function(){

    ...

    // Get columns aggregation of table
    let oColumns = this.getView().byId('columnsListItemTask');

    // Define table cells
    let cellToAdd1 = new sap.m.Text('textCell1',{            
        text: "{path/to/modelValue1}"
    });

    let cellToAdd2 = new sap.m.Text('textCell2',{            
        text: "{path/to/modelValue2}"
    });

    let cellToAdd3 = new sap.m.Text('textCell3',{            
        text: "{path/to/modelValue3}"
    });

    let cellToAdd4 = new sap.m.Text('textCell4',{            
        text: "{path/to/modelValue4}"
    });

    // Add cells (in this case 4 columns)
    oColumns.addCell(cellToAdd1); 
    oColumns.addCell(cellToAdd2); 
    oColumns.addCell(cellToAdd3); 
    oColumns.addCell(cellToAdd4);

    var jsonModel = new JSONModel(yourModel);
    this.getView().setModel(jsonModel);

    // Get Table by id
    let oTable = this.getView().byId('tableTask');
    oTable.removeAllItems();        //Remove old items if present                                       
    oTable.removeAllAggregation();  //Remove aggregations 
    oTable.bindAggregation('items', {
        path:'/rowsData',   // field name of you JSONModel containing data rows
        template: oColumns,  // rowTemplate of cells
    });

    ...

}



...

// Get columns aggregation of table
let oColumns = this.getView().byId('columnsListItemTask');

let cellToAdd;

// This for loop in each columns I need to generate
// (in my case they are defined in a database and I get it with AJAX request)
for(let key in allCellsToGenearte){
    cellToAdd = new sap.m.Text({            
        text: allCellsToGenearte["modelPath"]
    });
    oColumns.addCell(cellToAdd); 
}

// Get Table by id
let oTable = this.getView().byId('tableTask');
oTable.removeAllItems();        //Remove old items if present                                       
oTable.removeAllAggregation();  //Remove aggregations 
oTable.bindAggregation('items', {
    path:'/rowsData',   // field name of JSON Model containing data rows
    template: oColumns,  // rowTemplate of cells
});

...

}



    <Table id="testdata3" />
    <u:FileUploader change="onChange" buttonText="Upload" />



    onChange: function(oEvent) {
        var file = oEvent.getParameter("files")[0];
        var oTable = this.byId("testdata3");
        var reader = new FileReader();
        var that = this;
        reader.readAsBinaryString(file);
        reader.onload = function(e) {
            var data = e.target.result;
            var wb = XLSX.read(data, {
                type: "binary"
            });

            var firstSheetName = wb.SheetNames[0];
            var worksheet = wb.Sheets[firstSheetName];
            var oModel = new sap.ui.model.json.JSONModel();
            var aColumns = that.getColumnNames(worksheet);
            var aData = that.getRowData(worksheet);
            var aCells = that.getCells(aColumns);

            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", new sap.m.ColumnListItem({
                // CHANGE ACCORDINGLY OR MAKE DYNAMIC
                cells: aCells
            }));
        };

    },

    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() {
        var aItems = [];
        // DO YOUR THING HERE
        aItems[0] = {
            value0: "testvalue0",
            value1: "testvalue1",
            value2: "testvalue2",
            value3: "testvalue3",
            value4: "testvalue4"
        };

        return aItems;
    },

    getCells: function(aColumns) {
        var cells = [];
        for (var i = 0; i < aColumns.length; i++) {
            cells[i] = new sap.m.Text({
                text: "{value" + i + "}"
            });

        }

        return cells;
    }