SAPUI5表格点击按钮添加新行的实现疑问

Hey there! I get that adding a new row to your SAPUI5 table with Mock Server can feel tricky when you're starting out—let's break this down step by step and fix that issue you're having with push().

First, Why Your Current Approach Isn't Working #

When you directly modify oModel.oData, you're bypassing the SAPUI5 model's built-in change detection. The UI won't automatically refresh because the model doesn't know you've changed the data. Instead, we should use the model's official APIs to handle data updates properly.

Solution 1: If You're Using OData Model (Mock Server for OData V2) #

Since you're using a Mock Server, chances are you're working with an sap.ui.model.odata.v2.ODataModel. Here's the correct way to add a new row:

addRow: function() {
  // Get the table and its items binding
  const oTable = this.getView().byId("ins");
  const oItemsBinding = oTable.getBinding("items");
  const oInvoiceModel = oItemsBinding.getModel(); // This is your "invoice" named model
  const sEntitySetPath = oItemsBinding.getPath(); // Should be "/Invoices"

  // Define default values for the new row (match your existing data structure!)
  const oNewInvoice = {
    ProductName: "",
    Quantity: 0,
    ExtendedPrice: 0.00,
    ShipperName: "",
    ShippedDate: new Date().toISOString(), // Use ISO format to match your existing data
    Status: ""
  };

  // Create a new entry in the model (this auto-updates the table!)
  oInvoiceModel.createEntry(sEntitySetPath, {
    properties: oNewInvoice,
    success: () => {
      sap.m.MessageBox.success("New row added successfully!");
    },
    error: (oError) => {
      sap.m.MessageBox.error(`Failed to add row: ${oError.message}`);
    }
  });
}

Why This Works:

• createEntry is the standard OData way to create new entities—it handles binding updates automatically, so your table will show the new row right away.
• It follows SAPUI5 best practices and works seamlessly with Mock Server (and real OData services later if you switch).

Solution 2: If You're Using JSONModel (Direct Mock JSON Load) #

If you're loading the JSON data directly into a sap.ui.model.json.JSONModel instead of using an OData Mock Server, use this approach:

addRow: function() {
  const oTable = this.getView().byId("ins");
  const oInvoiceModel = this.getView().getModel("invoice"); // Get your named model

  // Get the current array of invoices
  const aInvoices = oInvoiceModel.getProperty("/Invoices");

  // Create new row data (match existing structure)
  const newRow = {
    ProductName: "",
    Quantity: 0,
    ExtendedPrice: 0.00,
    ShipperName: "",
    ShippedDate: new Date().toISOString(),
    Status: ""
  };

  // Add the new row to the array and update the model
  aInvoices.push(newRow);
  oInvoiceModel.setProperty("/Invoices", aInvoices); // Triggers UI refresh
}

Key Note:

Never modify oModel.oData directly! Always use getProperty and setProperty to interact with JSONModel data—this ensures the model fires change events and the UI updates correctly.

Important Tips #

• Match Data Structure: Make sure your new row has all the same fields as your existing Invoices entries (like ProductName, Quantity, etc.). Missing fields could break bindings or formatters in your table.
• Default Values: Set sensible defaults (like 0 for numbers, empty strings for text) to avoid issues with your table's formatters (e.g., the currency formatter or status text formatter).

内容的提问来源于stack exchange，提问作者Iakovos