Question

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

通过这种方式将表放置在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视图中

1 个答案: