1

ユーザー入力からデータを取得し、そのデータをテーブルまたはリストに挿入したいと考えています。ユーザーが挿入ボタンをクリックすると、データがテーブルに挿入されます。ユーザーが削除ボタンをクリックすると、選択した行が削除されます。

これは私の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();
}
4

2 に答える 2

2

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

例

于 2015-09-01T15:50:06.947 に答える
0

挿入ボタンをクリックした後、ID を使用して姓名を取得できます。値を取得したら、オブジェクトを作成します

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

次に、テーブルモデルに挿入します。つまり、

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

テーブルを新しい行で更新します。

于 2015-08-30T03:59:21.810 に答える