TreeTable设计

Question

我遇到了sap.ui.table.TreeTable的问题，这也适用于一些同事。 我看了桌子的Fiori Guidelines，我喜欢带有符合普通SAPUI5风格的箭头的样式。 在我的应用程序中包含TreeTable后，it has a really inapplicable style。

现在我的问题是：我如何实现理想的外观？我做错了什么或者我错过了任何其他款式或选项吗？

的相关信息：

• 使用SAPUI5 1.38.7
• 使用表：sap.ui.table.Treetable

• 控制器：

  var testModel = new sap.ui.model.json.JSONModel();
      var testData = { 
          data:{
              subItems:[
                  {
                      name:"NAME 1",
                      subItems:[
                          {
                              name:"NAME 1-1",
                              subItems:[
                                  {
                                      name:"NAME 1-1-1"
                                  },
                                  {
                                      name:"NAME 1-1-2",
                                      subItems:[
                                          {
                                              name:"NAME 1-1-2-1"
                                          }
                                      ]
                                  }
                              ]
                          },
                          {
                              name:"NAME 1-2",
                              subItems:[
                                  {
                                      name:"NAME 1-2-1"
                                  },
                                  {
                                      name:"NAME 1-2-2",
                                      subItems:[
                                          {
                                              name:"NAME 1-2-2-1"
                                          }
                                      ]
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      name:"NAME 2",
                      subItems:[
                          {
                              name:"NAME 2-1",
                              subItems:[
                                  {
                                      name:"NAME 2-1-1"
                                  },
                                  {
                                      name:"NAME 2-1-2",
                                      subItems:[
                                          {
                                              name:"NAME 2-1-2-1"
                                          }
                                      ]
                                  }
                              ]
                          },
                          {
                              name:"NAME 2-2",
                              subItems:[
                                  {
                                      name:"NAME 2-2-1"
                                  },
                                  {
                                      name:"NAME 1-2-2",
                                      subItems:[
                                          {
                                              name:"NAME 1-2-2-1"
                                          }
                                      ]
                                  }
                              ]
                          }
                      ]
                  },
                  {
                      name:"NAME 3"
                  },
                  {
                      name:"NAME 4"
                  },
                  {
                      name:"NAME 5",
                      subItems:[
                          {
                              name:"NAME 5-1"
                          },
                          {
                              name:"NAME 5-2",
                              subItems:[
                                  {
                                      name:"NAME 5-2-1"
                                  }
                              ]
                          }
                      ]
                  }
              ]
          }
      };
      testModel.setData(testData);
      this.getView().byId("sapEquipmentTree").setModel(testModel,"testModel");
  

• 查看

  <t:TreeTable
      id="sapEquipmentTree"
      rows="{path:'/data', parameters: {arrayNames:['subItems']}}"
      selectionMode="MultiToggle"
      enableSelectAll="false"
      ariaLabelledBy="titleSAPTree">
          <t:toolbar>
              <Toolbar>
                  <content>
                      <Title id="titleSAPTree" text="HEADER" />
                  </content>
              </Toolbar>
          </t:toolbar>
      <t:columns>
          <t:Column width="13rem">
              <Label text="ColumnHeader"/>
              <t:template>
                  <Text text="{name}"/>
              </t:template>
          </t:Column>
      </t:columns>
   </t:TreeTable>
  

感谢您的帮助。

Answer 1

对于版本1.38，必须设置显式形状因子CSS类（例如sapUiSizeCozy）才能获得箭头样式。 请参阅Content Density

如果没有形状因子CSS，表传统模式仅生成+/-图像。

从版本1.40开始，不再需要这个，并且应该替换+/-图标。