UI5 树绑定到 JSON答案

【问题标题】：UI5 Tree Binding to JSONUI5 树绑定到 JSON
【发布时间】：2014-10-27 14:34:37
【问题描述】：

我有以下 JSON 文件。

"idocs": [

{

   "Docnum": "00063463",

   "Mestyp": "MATMAS",

   "Status": "53",   

   "Sndprn": "EXTSYS1",

   "Direct": "Inbound",

   "Message": "Material 00002342 Created",

   "messages":    [{                       

             "message": "Material 00002342 Created"                              

        }],

   "segments":     [{                       

                    "segment": "E1MARAM",

                    "fields":     [{                       

                                "fieldName": "MATNR"                              

                         }]                                  

            }]                        

    }

我想把它绑定到一个树节点。我有以下代码来“尝试”执行此操作，但它什么也没做。甚至没有错误。

var oTree = new sap.ui.commons.Tree("tree")

                                    .placeAt("idViewRoot--idViewDetail--toolBar-content");



                            oTree.bindAggregation("nodes", tgtPath, function(

                                    sId, oContext) {



                                alert("stuff");

                                var treePath = oContext.getPath();

                                var bindTextName = '';

                                if (treePath.indexOf("fields") !== -1) {

                                    bindTextName = "fieldName";

                                } else {

                                    bindTextName = "segment";

                                }

                                return new sap.ui.commons.TreeNode()

                                        .bindProperty("text", bindTextName);

                            });

如果有人能看一看并指出正确的方向，我将不胜感激。

我是否应该看到出现警报“东西”，因为我什至没有看到。会不会是绑定的问题。

tgtPath 的值为 /idocs/0/segments。

马丁

【问题讨论】：

标签： sapui5

【解决方案1】：

// 数据必须是树形结构的

    var oData = {
            root:{
                name: "root",
                0: {
                    name: "item1",
                    0: {
                        name: "subitem1",
                        0: {
                            name: "subsubitem1"
                        },
                        1: {
                            name: "subsubitem2"
                        }
                    },
                    1: {
                        name: "subitem2",
                        0: {
                            name: "subsubitem3"
                        }
                    }

                },
                1:{
                    name: "item2",
                    0: {
                        name: "subitem3"
                    }
                }

            }
    };
      var oModel = new sap.ui.model.json.JSONModel();
      // set the data to the model
      oModel.setData(oData);

      var oTree = new sap.ui.commons.Tree("tree");
      oTree.setWidth("100%");
      // set the model to the tree
      oTree.setModel(oModel);

      var oTreeNodeTemplate = new sap.ui.commons.TreeNode("node");
      oTreeNodeTemplate.bindProperty("text", "name");
      oTreeNodeTemplate.setExpanded(true);

      oTree.bindAggregation("nodes", "/root", oTreeNodeTemplate);

      oTree.placeAt("body");

这里是示例https://jsbin.com/rexahoquso/edit?html,js,output

【讨论】：