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

Question

我想设置sap.m.Tree items的自定义颜色。 查看sap.m.List其他示例，我实现了onAfterRendering的sap.m.StandardTreeItem ：

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:{}

 });

我在这里放了一个例子。

从 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]
 });

这是根据标题以不同颜色呈现复选框的链接。