在 sapUI5 XML 视图中放置动态 table

Question

我正在尝试使用 sap.ui.table.Table 在 sapui5 中添加动态 table。但是在这个例子中使用了 HTML 视图，但是我想要 XML 用于我的视图。

使用这种方式将 table 放入 XML 的替代方法是什么

<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON model" />
 <meta http-equiv='X-UA-Compatible' content='IE=edge' />
 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
 
 <title>SAPUI5 Dynamic Table</title>
 

 <script id='sap-ui-bootstrap' type='text/javascript'
  src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
  data-sap-ui-theme='sap_bluecrystal'
  data-sap-ui-libs='sap.m,sap.ui.table'></script>
 
 <script>
 
  var columnData = [{
      columnName: "firstName"
  }, {
      columnName: "lastName"
  }, {
      columnName: "department"
  }];



  var rowData = [{
      firstName: "Sachin",
      lastName: "Tendulkar",
      department: "Cricket"
  }, {
      firstName: "Lionel",
      lastName: "Messi",
      department: "Football"
  }, {
      firstName: "Mohan",
      lastName: "Lal",
      department: "Film"
  }];
      
        var oTable = new sap.ui.table.Table({
      visibleRowCount: 3
  });


  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData({
      rows: rowData,
      columns: columnData
  });
  oTable.setModel(oModel);
      
  oTable.bindColumns("/columns", function(sId, oContext) {
      var columnName = oContext.getObject().columnName;
      return new sap.ui.table.Column({
          label: columnName,
          template: columnName,
      });
  });
      
  oTable.bindRows("/rows");
      page = new sap.m.Page({content:[
        oTable
      ]});
      app = new sap.m.App();
app.addPage(page);

  app.placeAt("content"); 
 </script>
 
 </head>
 <body class='sapUiBody'>
  <div id='content'></div>
 </body>
</html>

我的 XML 文件看起来像

<mvc:View
controllerName="sap.ui.demo.toolpageapp.controller.Statistics"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page showHeader="false">
    <content>
<!-- want to place the table here -->
    </content>
</Page>

Answer 1

您可以使用 bindColumns() 和 bindRows()

来实现

XML 查看

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:ui="sap.ui.table"       
    controllerName="XXXX.Main" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Dynamic Binding" class="sapUiContentPadding">
        <content>
            <ui:Table id="reOrderTable"></ui:Table>
        </content>
    </Page>
</core:View>

Controller.js

  onInit: function() {
    var oModel = this.getTableData(this);
    this.createDynTable(this, oModel);
  } 
  /**
   *  Get Data
   */
  getTableData: function(that) {
    var columnData = [
     { "colId": "Amt", "colName": "Amount", "colVisibility": true, "colPosition": 0  },
     { "colId": "Qty", "colName": "Quantity", "colVisibility": true, "colPosition": 1 },
     { "colId": "Unt", "colName": "Unit", "colVisibility": true, "colPosition": 2 },
     { "colId": "OPA", "colName": "OpenPOAmount", "colVisibility": true, "colPosition": 3 },
     { "colId": "OPQ", "colName": "OpenPOQuantity", "colVisibility": true, "colPosition": 4 }
    ];

    var rowData = [{
        "Amount": "200",
        "Quantity": "RF",
        "Unit": "CV",
        "OpenPOAmount": "5988",
        "OpenPOQuantity": "YY",
        "EXT_FLDS": {
          "PRINTING_NUM": {
            "fieldvalue": 10,
            "fieldlabel": "Printing Number",
            "uictrl": "sap.m.Input"
          },
          "COUNTRY": {
            "fieldvalue": "Thailand",
            "fieldlabel": "Country",
            "uictrl": "sap.m.ComboBox"
          }
        }
      },
      {
        "Amount": "80",
        "Quantity": "UG",
        "Unit": "RT",
        "OpenPOAmount": "878",
        "OpenPOQuantity": "RF",
        "EXT_FLDS": {
          "PRINTING_NUM": {
            "fieldvalue": 11,
            "fieldlabel": "Printing Number",
            "uictrl": "sap.m.Input"
          },
          "COUNTRY": {
            "fieldvalue": "Thailand",
            "fieldlabel": "Country",
            "uictrl": "sap.m.ComboBox"
          }
        }
      },
      {
        "Amount": "789",
        "Quantity": "GV",
        "Unit": "ED",
        "OpenPOAmount": "8989",
        "OpenPOQuantity": "FGG",
        "EXT_FLDS": {
          "PRINTING_NUM": {
            "fieldvalue": 12,
            "fieldlabel": "Printing Number",
            "uictrl": "sap.m.Input"
          },
          "COUNTRY": {
            "fieldvalue": "Thailand",
            "fieldlabel": "Country",
            "uictrl": "sap.m.ComboBox"
          }
        }
      }
    ];
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
      rows: rowData,
      columns: columnData
    });
    return oModel;
  },
  /**
   *  Creating Dynamic table
   */
  createDynTable: function(that, oModel) {
    var oTable = this.byId("reOrderTable");
    oTable.setModel(oModel);
    oTable.bindColumns("/columns", function(sId, oContext) {
      var columnName = oContext.getObject().colName;
      return new sap.ui.table.Column({
        label: columnName,
        template: columnName,
      });
    });
    oTable.bindRows("/rows");
  }

在 sapUI5 XML 视图中放置动态 table

Placing dynamic table in sapUI5 XML view

sapui5