Question

我想设置sap.m.List的自定义颜色。查看onAfterRendering中的其他示例，我实施了sap.m.StandardTreeItem的{{1}}：

snip
    sap.m.StandardTreeItem.extend('MySuperDuperTreeItem', {
     metadata: {
     properties: {
         status: 'string'
     }
     },      
     onAfterRendering: function() {
     if (sap.m.StandardTreeItem.prototype.onAfterRendering) {
         sap.m.StandardTreeItem.prototype.onAfterRendering.apply(this, arguments);
     }
     //var a = getItem(); NOT WORKING
     this.$().find('div').each(function() {
         if ($(this).hasClass('sapMCbBg')) {
         $(this).addClass("myPurple");
         }
     });
     },
     renderer:{}

 });

我举了一个例子here。

从JSBin链接，您可以看到复选框有自定义颜色，但我想根据项目的标题设置颜色。此外，树项详细信息按钮未正确显示为展开和折叠。

有没有其他方法来检查颜色复选框？为什么在onAfterRendering函数中无法访问sap.m.StandardTreeItem成员（如getTitle()）？

Answer 1

在 onAfterRendering 方法中使用 this.getTitle（）来获取标题。根据该标题，您可以根据标题添加您的样式类，如下所示

    onAfterRendering: function() {
         sap.m.StandardTreeItem.prototype.onAfterRendering.apply(this, arguments);
         var title = this.getTitle();
         this.$().find('div').each(function() {
             if ($(this).hasClass('sapMCbBg')) {
               if (jQuery.sap.startsWith(title, "A-Node")) {
                 $(this).addClass("myPurple");
               } else if (jQuery.sap.startsWith(title, "B-Node")) {
                 $(this).addClass("myYellow");
               }
             }
         });
     }

关于树项详细信息按钮的内容未正确显示为展开和折叠，您只需稍微修改您的代码，如下所示

 var oStandardTreeItem = new MySuperDuperTreeItem({
     title: "{text}",
     type: sap.m.ListType.Detail
 });
 oTree.bindItems("/", oStandardTreeItem);
 oTree.expandToLevel(3);
 oTree.setMode(sap.m.ListMode.MultiSelect);
 var oPage = new sap.m.Page("TreeTest", {
     title : "Test Page for sap.m.Tree",
     content : [oTree]
 });

以下是link根据标题呈现不同颜色的复选框。

如何设置SAPUI5 sap.m.StandardTreeItem的背景颜色？

1 个答案: