Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 MVC example: Sorted, grouped and multi-selectable list" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    
    <title>UI5 MVC example: Sorted, grouped and multi-selectable list</title>
    
    <!-- Load UI5, select gold reflection theme and the "commons" control library -->
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.m'></script>
    
    <script>
        /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
​
                var fGrouper = function(oContext) {  
                 var v = oContext.getProperty("workbook");  
                 return { key: v, text: v };  
                }  
                        
                var oSorter = new sap.ui.model.Sorter("", false, fGrouper);  
                oSorter.fnCompare = function(a, b) {  
                 // Determine the group and group order  
                 var agroup = a.workbook;  
                 var bgroup = b.workbook;  
                 // Return sort result, by group ...  
                 if (agroup < bgroup) return -1;  
                 if (agroup > bgroup) return  1;  
                  // ... and then within group (when relevant)  
                 if (a.worksheet < b.worksheet) return -1;  
                 if (a.worksheet == b.worksheet) return 0;  
                 if (a.worksheet > b.worksheet) return  1;  
                }  
                  
        var sheetSelList = new sap.m.List({
         id: "workSheetSelectionList",
         mode: sap.m.ListMode.MultiSelect,
         headerToolbar: new sap.m.Toolbar({
          content: [
           new sap.m.CheckBox({
            id:"workSheetSelectionList-selAll",
            text: "All",
            selected: true,
            select : function() {
             if(this.getSelected()) {
              sheetSelList.selectAll();
             }
            }
           })
          ]
         }),
         items:{
          path: '/modelData',
          template: new sap.m.StandardListItem({
           title: '{worksheet}',
           selected: "{selected}"
          }),
          sorter: oSorter,
          groupHeaderFactory: function (oGroup) {
           return new sap.m.GroupHeaderListItem({
            title: oGroup.key,
            upperCase: false
           });
          }
         },
         selectionChange: function(ev) {
          if(!ev.getParameters().selected) {
           var oCB = sap.ui.getCore().byId("workSheetSelectionList-selAll");
           oCB.setSelected(false);
          } 
         }
        });
​
        var workbookInfo= [
         {workbook:"1.xlsx", worksheet:"sheet2", selected:true},
         {workbook:"2.xlsx", worksheet:"sheet1", selected:true},  
         {workbook:"1.xlsx", worksheet:"sheet1", selected:true},
         {workbook:"1.xlsx", worksheet:"sheet3", selected:true}
        ];
​
        var listModel = new sap.ui.model.json.JSONModel();
        listModel.setData({modelData:workbookInfo});
        sheetSelList.setModel(listModel);
      
         sheetSelList.placeAt("content");
    
    </script>
    
    </head>
    <body class='sapUiBody'>
        <div id='content'></div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mryqupro
0viewers