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

這是根據標題以不同顏色呈現復選框的鏈接。