Question

我正在尝试在SAPUI5中显示复杂的json数据。

这是我的复杂数据：

results:{
         "name" : "sample",
         "child" : [
                    "name" : "sample",
                    "child" : [
                        "name" : "sample",
                        "child" : [
                                    "name" : "sample",
                                    "child" : [

                                     ]
                                  ]
                     ]
                 ]
        }

这里内在的孩子是无限的。这取决于我的数据。

所以我的问题是如何在xml视图中显示这种类型的数据。

以前我使用行转发器显示此类数据。那里的数据只有3个级别。但现在它有无限的。那么我如何使用行中继器来显示这种类型的数据。

这是我的3级行中继器。

<c:RowRepeater rows="{path: bindingpath}" id="rowRepeater" >
      <c:RowRepeater rows="{path: bindingpath/somePath}" >
            <c:RowRepeater rows="{path: bindingpath/somePath/anotherpath}">

            </c:RowRepeater>
      </c:RowRepeater>
</c:RowRepeater>

Answer 1

这是一个非常有趣的问题，但我不认为rowRepeater会帮助你。

如果要绑定 rowRepeater 控件的行属性，则应传递一个数组，其中数组中的每个位置都是输出中的一行。

在结果对象中，您只有一个“根节点”。如果您有两个或更多节点，rowRepeater将呈现您的输出。此外，绑定路径只能保存一个值，因此如果您考虑动态更改它，它将不适用于模型中的所有数据级别。

请参阅以下示例：

<!DOCTYPE html>
<html>
<head>

  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons"></script>
  
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  
  <script>


 // create the row repeater control
		var oRowRepeater = new sap.ui.commons.RowRepeater("rr1");
		oRowRepeater.setNoData(new sap.ui.commons.TextView({text: "Sorry, no data available!"}));
    
   
        //var dataObject = {data: ["a","b"]};
        var dataObject = { data: [
          { name: "A",
          children: [
                     {name: "A1",
                      children: [
                          {name: "A1a"}
                          ]
                      },
                     {name: "A2"}
                     ]
          },
          {name: "B"} // try to remove this line... the rowRepeater won't be rendered as there will be one position
          
        ]};
    
    
		// create JSON model
		var oModel = new sap.ui.model.json.JSONModel(dataObject);
		sap.ui.getCore().setModel(oModel);


		//create title
		var oTitle = new sap.ui.core.Title({text:"Letters"});

        oRowRepeater.setTitle(oTitle);

		//configure the RowRepeater
		oRowRepeater.setDesign("Standard");
//		oRowRepeater.setNumberOfRows(5);
//		oRowRepeater.setCurrentPage(1);
		oRowRepeater.setTitle(oTitle);


        var oRowTemplate = new sap.ui.commons.TextView({
          text: "{name}",
        });
    


		oRowRepeater.bindRows("/data", oRowTemplate);

		oRowRepeater.placeAt("content");
  </script>
</head>
  
  
<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

您需要的内容与Element binding比Aggregation binding更相关。

因此，如果您的模型上有多个级别，我建议使用Tree或TreeTable等控件。

Answer 2

我会创建一个自定义控件（可能基于RowRepeater，Panel，自定义FlexBox布局），您可以在最高级别绑定聚合

然后，自定义控件应检查类型Array的特定节点，如果它有1个或更多项，则从该路径上递归渲染子元素，等等。

如何在SAPUI5的Xml视图中编写无限行中继器

2 个答案: