Question

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

我的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

我不知道如何制作xml视图，但也许这可以帮到你。

首先，您需要一个包含模型的表。例如（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();
}

最后，对于删除用户，您必须将其添加到表中。

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

Answer 2

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

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

然后，插入表格模型，即

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

它将使用新行更新您的表格。

如何在Sapui5中将数据存储到表或列表中

2 个答案: