UI5树绑定到JSON

时间:2014-10-27 14:34:38

标签: sapui5

我有以下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。

马丁

1 个答案:

答案 0 :(得分:0)

//数据必须是树形结构

    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