从 SAP Fiori Elements List Report 中获取表格某行数据

2024-02-18 22:44:44

步骤 1：创建 SAP Fiori Elements List Report

打开 SAP Web IDE 或 Eclipse 中的 SAP Fiori 开发工具。
创建一个新的 SAP Fiori Elements 项目。
选择 "List Report" 模板。
输入项目名称和包。
单击 "创建项目"。

步骤 2：配置数据模型

在项目资源管理器中，双击 "model" 文件夹下的 "cds" 文件。
在 CDS 视图中，定义数据模型。例如：

define view ZDEMO_EMPLOYEES as select from DEMO_EMPLOYEES {
  EmployeeID,
  FirstName,
  LastName,
  Email,
  Phone
};

步骤 3：创建 SAP Fiori Elements List Report

在项目资源管理器中，双击 "webapp" 文件夹下的 "view" 文件夹。
右键单击 "List.view.xml" 文件，然后选择 "打开"。
在视图文件中，添加以下代码：

<Table id="Table" items="{
  path: '/ZDEMO_EMPLOYEES',
  parameters: {
    $skip: 0,
    $top: 10
  }
}">
  <columns>
    <Column id="EmployeeID" demandPopin="true">
      <Label text="Employee ID"/>
      <template>
        <Text text="{EmployeeID}"/>
      </template>
    </Column>
    <Column id="FirstName" demandPopin="true">
      <Label text="First Name"/>
      <template>
        <Text text="{FirstName}"/>
      </template>
    </Column>
    <Column id="LastName" demandPopin="true">
      <Label text="Last Name"/>
      <template>
        <Text text="{LastName}"/>
      </template>
    </Column>
    <Column id="Email" demandPopin="true">
      <Label text="Email"/>
      <template>
        <Text text="{Email}"/>
      </template>
    </Column>
    <Column id="Phone" demandPopin="true">
      <Label text="Phone"/>
      <template>
        <Text text="{Phone}"/>
      </template>
    </Column>
  </columns>
</Table>

步骤 4：添加表格点击事件响应函数

在 "List.controller.js" 文件中，添加以下代码：

onInit: function () {
  this.byId("Table").attachRowSelectionChange(this.onRowSelectionChange, this);
},

onRowSelectionChange: function (oEvent) {
  var selectedRowContext = oEvent.getParameter("rowContext");
  var selectedRowIndex = selectedRowContext.getPath().split("/")[2];
  var selectedRowData = this.byId("Table").getModel().getProperty("/" + selectedRowIndex);
  console.log(selectedRowData);
}