如何将数据合并到 table 或在 Sapui5 中列出

Question

我想从用户输入中获取数据并将该数据插入到 table 或列表中。当用户点击插入按钮时，数据将被插入到table中。如果用户点击删除按钮，所选行将被删除。

这是我的 home.view.xml:

<Button text="insert" type="Unstyled" press="insContent"></Button>
<Button text="delete" type="Unstyled" press="deleteContent"></Button>
<l:Grid defaultSpan="L12 M12 S12" width="auto">
    <l:content>
        <f:SimpleForm columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" id="SimpleForm" labelSpanL="3" labelSpanM="3" layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
            <f:content>
                <Label text="Name" id="lname"></Label>
                <Input value="" id="iname"></Input>
                <Label text="surname" id="lsurname"></Label>
                <Input value="" id="isurname"></Input>
            </f:content>
        </f:SimpleForm>
    </l:content>
</l:Grid>
<Table class="nwEpmRefappsShopControlLayout" growing="true" growingScrollToLoad="true" id="catalogTable">
    <columns>
        <Column demandPopin="true" id="descriptionColumn"></Column>
        <Column demandPopin="true" id="descriptionColumn2"></Column>
    </columns>
    <ColumnListItem class="nwEpmRefappsShopTableItemLayout" id="columnListItem" type="Active" vAlign="Middle">
        <cells>
            .
            .
        </cells>
    </ColumnListItem>
</Table>

这是我的 home.controller.js:

insContent: function () {
    // Get data from input 
    this.byId("iname").getValue();
    this.byId("isurname").getValue();
}

Answer 1

单击插入按钮后，您可以使用 ID 获取名字和姓氏。获得值后，创建一个对象

var object = {
    firstName: user_enteredValue,
    lasName: userEnteredSirName
};

然后，插入到您的 table 模型中，即

table.getModel().getData().push(object);
table.getModel().refresh();

它将用新行更新您的 table。

Answer 2

我不知道如何获得 xml 观看次数，但也许这可以帮助你。

首先，你需要有一个table的模型。例如（oTableData 是一个 sap.m.Table 对象）：

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
oTableData.setModel(oModel);
oTableData.bindItems("/modelData", oRow);

您还需要一个用于存储数据的数组（在 index.html 中）。

var aData = [];

添加用户需要以下功能。

save: function(firstName, lastName) {
    // Add object to array
    aData.push({firstName: firstName, lastName: lastName});

    // Refresh model
    var oTableData = sap.ui.getCore().byId(this.createId("table"));
    oTableData.getModel().refresh();
}

最后，要删除用户，您必须将此添加到 table。

oTableData.setMode(sap.m.ListMode.Delete);
oTableData.attachDelete(function(oEvent) {
    var oSelectedItem = oEvent.getParameter("listItem");
    var sItemName = oSelectedItem.getBindingContext().getProperty("firstName");
    var path = oSelectedItem.getBindingContext().getPath();
    path = path.substring(path.lastIndexOf('/') +1);
    var model = oSelectedItem.getModel();
    var data = model.getProperty('/modelData');
    data.splice(parseInt(path), 1);
    model.setProperty('/modelData', data);

    sap.m.MessageToast.show("Deleted");
});

我做了一个仓库供参考：

https://github.com/aosepulveda/sapui5-model-crud

如何将数据合并到 table 或在 Sapui5 中列出

How can I bin data to table or list in Sapui5

sapui5

sap-fiori