Question

我有一个指定角色和操作的表，如果我签入角色并按下删除按钮，那么我应该得到一个指示特定角色的对话框
如果我点击添加按钮，我会得到一个对话框或消息框，其中包含其他几个角色的列表，点击该角色后，应显示一个必须添加到相应表格的角色名称
我创建了sap.m.Table并且我绑定了JSON数据
附上用户界面的Image：

我尝试过各种方法，并附上我的代码

这是代码..

我可以从表格中删除该项目，但是我应该收到一个对话框/消息框，指出表格中已选中的核对角色已被删除

    <script>
    function delete1()
    {
        var v = false;
        $('input[type="checkbox"]:checked').each(function() {
            v = true;
            alert("Checked item in the table will be deleted from the table");
      });

      if (v == false)
      {
        alert("Please check the item to be deleted");
      }
      $('input[type="checkbox"]:checked').closest("tr").remove();
    }
    var oModel = new sap.ui.model.json.JSONModel("JSon/etc5.json");
        // Load JSON in model
        sap.ui.getCore().setModel(oModel,"model1");
        //create table                          
        //"cells"  
        var oRoles = new sap.m.Text({text: "{model1>Role}"});   
        var oAction = new sap.m.Button({text: "DETAILS", 
                                         type : sap.m.ButtonType.Emphasized,

                        });
                         // corresponding columns  

                        var oColAbbr = new sap.m.Column({header: new sap.m.Text({text:"ROLES"}) });  
                        var oColAct = new sap.m.Column({header: new sap.m.Text({text:"ACTION"}) }); 
                        // row template  
                        var oRow = new sap.m.ColumnListItem();  
                        oRow.addCell(oRoles).addCell(oAction);  

                     // instantiating the table  
                        var oTab = new sap.m.Table("app",{
                            inset : true,
                            headerText : "SOME DATA",
                            headerDesign : sap.m.ListHeaderDesign.Standard,         
                            includeItemInSelection : false,
                        });  
                        oTab.addColumn(oColAbbr).addColumn(oColAct);  
                        oTab.bindItems("model1>/emp", oRow); //binding data to the tables
                        oTab.setMode(sap.m.ListMode.MultiSelect);

                        var oButton = new sap.m.Toolbar({
                    content: [
                              new sap.m.ToolbarSpacer(),
                              new sap.m.Button({
                                text : "ADD",
                                textAlign : "Center",
                                width : "10%",
                                type: sap.m.ButtonType.Emphasized,
                                press: function() {
                        //              oCDialog2.open();
                                        },
                            }),
                            new sap.m.Label({text:""}),
                            new sap.m.Button({
                                    text : "DELETE",
                                    textAlign : "Center",
                                    width : "10%",
                                    type: sap.m.ButtonType.Reject,
                                    press: function() {
                            //          oCDialog1.open(); 
                                         delete1();
                                    }
                            }),
                        ]
                    });
                    //creating the icons
                     var iTab = new sap.m.IconTabBar({

                         items:[

                                 new sap.m.IconTabFilter({
                                    text: "HR",
                                    icon: "sap-icon://group",
                                    content:[oTab]         
                                 }),                                     
                            ]
                      });           
                    var page = sap.m.Page({
        content: [iTab,oButton],
        showHeader : false,
        enableScrolling : true,
    });
    var app = sap.m.App();
    app.addPage(page);
    app.placeAt("content");
</script>

Answer 1

最简单的方法是使用Checkbox控件并将其值绑定到与项目行来源相同的模型（model1＆gt; / emp）。在您的删除方法中，您可以轻松地遍历emp数组并测试代表该复选框的值。

每当从数组中删除条目时，UI5的MessageToast或MessageBox控件都会显示该消息。某些浏览器中的“选中此处可禁用此网站的提醒”功能可能会阻止提醒。

您可能还想将$.each更改为$.grep。它以与$.each几乎相同的方式循环遍历数组，但有一个例外。如果从回调中返回true，则保留该元素。否则，它将从数组中删除。

您的代码应如下所示：

items = this.getView().getModel("model1").getProperty("/emp");
items = $.grep(items, function (el, i) {
    if (el.propertyBoundToCheckbox) { 
        MessageToast.show("Deleting entry: " + el.getName())
        return false;
    }
    return true; // keep the element in the array
});

注意：上面的代码从视图中提取模型，因为这是最佳实践。尽量不要将任何内容绑定到核心，因为核心在浏览器窗口中运行的所有应用程序之间共享（例如，在Fiori Launch Pad场景中）。

按下“删除”按钮时如何在对话框中显示角色名称

1 个答案: