อัปโหลดไฟล์ 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              |

ขอขอบคุณล่วงหน้า


person Prashob Thekkyal    schedule 23.11.2015    source แหล่งที่มา


คำตอบ (1)


ฉันจะทำอย่างไร...

แปลง 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