首页 文章

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

提问于
浏览
0
  • 我有一个指定角色和操作的表,如果我签入角色并按下删除按钮,那么我应该得到一个对话框,指出该特定角色

  • 如果我点击添加按钮,我应该得到一个对话框或消息框,其中包含其他几个角色的列表,点击该角色后,应显示一个必须添加到相应表格的角色名称

  • 我've created the sap.m.Table and I' m绑定JSON数据

  • 附上了UI的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>

1 回答

  • 0

    最简单的方法是使用Checkbox控件并将其值绑定到与项目行来源相同的模型(model1> / 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场景中) .

相关问题