Mryqu's Notes


  • 首页

  • 搜索
close

[OpenUI5] 示例: Sorted, grouped and multi-selectable list

时间: 2015-05-02   |   分类: FrontEnd     |   阅读: 193 字 ~1分钟

做了一个可多选、使用定制分组和排序的list示例,示例位置:http://jsbin.com/jetena/1/edit?html,output

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:"sheet1", selected:true},
 {workbook:"2.xlsx", worksheet:"sheet1", selected:true},
 {workbook:"1.xlsx", worksheet:"sheet2", 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");

[OpenUI5] 示例: Sorted, grouped and multi-selectable list

参考

Custom Sorting and Grouping

标题:[OpenUI5] 示例: Sorted, grouped and multi-selectable list
作者:mryqu
声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!

#openui5# #list# #multi-selectable# #sorter# #grouper#
[OpenUI5] 控件ID实践与总结
非技术视角八卦一下docker
  • 文章目录
  • 站点概览

Programmer & Architect

662 日志
27 分类
1472 标签
GitHub Twitter FB Page
    • 参考
© 2009 - 2023 Mryqu's Notes
Powered by - Hugo v0.120.4
Theme by - NexT
0%