Загрузите файл TXT и отобразите данные в адаптивной таблице SAPUI5.

Я хочу создать sap.m.Table в sapui5, в которой данные в строках будут заполняться при загрузке текстового файла (.txt), который содержит некоторые детали.

Например

Test.txt

1[tab]ABC Q

2[tab]PQR

3[tab]XYZ

В приведенном выше text.txt,

1,2,3… — это номера клиентов, а ABC, PQR… — сведения о клиентах. Я написал логику для чтения данных из файла test.txt при загрузке (см. Пример ссылки jsbin ниже) и назначил данные в многомерный массив, как показано на изображении ниже.

http://jsbin.com/fenexuqule/edit?html,output

значение многомерного массива при проверке

Когда я загружаю текстовый файл, я хочу динамически создать таблицу sap.m.table, в которой будет 2 столбца № клиента и сведения о клиенте, и данные должны быть заполнены в соответствующей строке.

См. ниже структуру таблицы (ожидаемая таблица)

----------------------------------
| customer no | customer details |
----------------------------------
|         1   | ABC Q            |
|         2   | PQR              |
|         3   | XYZ              |

Заранее благодарим вас.


sapui5
person Prashob Thekkyal    schedule 23.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что бы я сделал...

Преобразуйте файл CSV в формат JSON и создайте объект модели

var aCSV = strCSV.split('\n'), row = {};

for (var i = 0; i < aCSV.length; ++i) {
     row = aCSV[i].split(';');
     aCSV[i] = { 
         "cusno": row[0], 
         "cusdetail" : row[1]
     }
}

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

Создайте свою таблицу

var oTable = new sap.m.Table({
    columns: [
        new sap.m.Column({
            header: new sap.m.Text({text: "Custom No"})
        }),
        new sap.m.Column({
            header: new sap.m.Text({text: "Customer Details"})
        })
    ]
});

oTable.placeAt("content");

Привязать данные к таблице

oTable.setModel(oModel);

oTable.bindAggregation("items", {
    path: "/", //json is an array of rows
    factory: function(sId, oContext) { //this function is applied to each row
        var cusno = new sap.m.Text({text: oContext.getProperty("cusno")});
        var cusdet = new sap.m.Text({text: oContext.getProperty("cusdetail")});

        return new sap.m.ColumnListItem({
            cells:[cusno, cusdet]
        });
    }
});

Полный пример: http://jsbin.com/tobifiqoto/2/edit?html,output< /а>

person Marc    schedule 23.11.2015
comment
Спасибо за ваш ответ. Это решило мою проблему, я хочу дать вам плюс 10 голосов, но, поскольку я новичок в переполнении стека, и у меня меньше репутации. - person Prashob Thekkyal; 23.11.2015
comment
@Prashob, поскольку вы новичок, я надеюсь, что вы не просто скопируете и вставите мой код, но и попытаетесь понять, что я там делал. - person Marc; 23.11.2015