SAPUI5为TreeTable /空行创建JSON

Question

I want to create a SAPUI TreeTable from a JSON request, currently my output looks like this (as you can see, every node contains an empty row -> I do not know where this is coming from and I do not want to have these empty rows):

My Table definition:

//Create an instance of the table control
var oTreeTable = new sap.ui.table.TreeTable({
    columns: [
        new sap.ui.table.Column({
                label : new sap.ui.commons.Label({
                text : "",
            }),
            template : 
                new sap.ui.commons.TextView({
                text : "{Title}",
                textAlign : sap.ui.core.TextAlign.Begin,
            }),     
        }),
        //new sap.ui.table.Column({label: "Mon01", template: "Mon01"}),
        //new sap.ui.table.Column({label: "Mon02", template: "Mon02"}),
        //new sap.ui.table.Column({label: "Mon03", template: "Mon03"}),
        //new sap.ui.table.Column({label: "Mon04", template: "Mon04"}),
    ],
    selectionMode: sap.ui.table.SelectionMode.None,
    enableColumnReordering: false,
    expandFirstLevel: false,
    toggleOpenState: function(oEvent) {

    }
});

My getJSON and convert flat structure to parent/child structure (thanks to yaku )

    $.getJSON(sServiceUrl, function (data) {

        // flatten to object with string keys that can be easily referenced later
        var flat = {};
        for (var i = 0; i < data.d.results.length; i++) {
          var key = 'id' + data.d.results[i].ID;
          flat[key] = data.d.results[i];
        }

        // add child container array to each node
        for (var i in flat) {
          flat[i].children = []; // add children container
        }

        // populate the child container arrays
        for (var i in flat) {
          var parentkey = 'id' + flat[i].ParentId;
          if (flat[parentkey]) {
            flat[parentkey].children.push(flat[i]);
          }
        }

        // find the root nodes (no parent found) and create the hierarchy tree from them
        var root = [];
        for (var i in flat) {
          var parentkey = 'id' + flat[i].ParentId;
          if (!flat[parentkey]) {
              root.push(flat[i]);
          }
        }

        // here it is!          
        // console.log(root);    

        // to access the JSON via "/root" in bindRows(), could this be a problem?? 
        var data = {
                root  :  root,  
        };

        console.log(data);

        var oTreeModel = new sap.ui.model.json.JSONModel();
        oTreeModel.setData(data);
        oTreeTable.setModel(oTreeModel);
        oTreeTable.bindRows({
            path : '/root',
        });

My Result JSON (a part of it): where I can not find why there are empty rows shown ?? Anybody knows something?

Thanks!

Edit: this is my complete JSON result (var root) (BEFORE I move it to var data = { root : root, }; which is bound to the tree table via bindRows(/root).. )

{
  "d" : {
    "results" : [
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000001')",
          "uri" : "http://url/EntitySet('00000001')",
          "type" : " NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "09/2014",
        "Mon01" : "08/2014",
        "Title" : "Parent 1",
        "ID" : "00000001",
        "ParentId" : "",
        "ChildId" : "",
      },
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000002')",
          "uri" : "http://url/EntitySet('00000002')",
          "type" : "NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "1560",
        "Mon01" : "1550",
        "Title" : "Parent 2",
        "ID" : "00000002",
        "ParentId" : "",
        "ChildId" : "",
      },
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000003')",
          "uri" : "http://url/EntitySet('00000003')",
          "type" : "NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "1860",
        "Mon01" : "1750",
        "Title" : "Child 1",
        "ID" : "00000003",
        "ParentId" : "00000002",
        "ChildId" : "00000001",
      },
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000004')",
          "uri" : "http://url/EntitySet('00000004')",
          "type" : "NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "1860",
        "Mon01" : "1750",
        "Title" : "Child 1_1",
        "ID" : "00000004",
        "ParentId" : "00000003",
        "ChildId" : "00000001",
      },
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000005')",
          "uri" : "http://url/EntitySet('00000005')",
          "type" : "NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "2060",
        "Mon01" : "1950",
        "Title" : "Child 2",
        "ID" : "00000005",
        "ParentId" : "00000002",
        "ChildId" : "00000001",
      },
      {
        "__metadata" : {
          "id" : "http://url/EntitySet('00000006')",
          "uri" : "http://url/EntitySet('00000006')",
          "type" : "NAMESPACE_SRV.Entity"
        },
        "Mon04" : "",
        "Mon03" : "",
        "Mon02" : "2060",
        "Mon01" : "1950",
        "Title" : "Child 3",
        "ID" : "00000006",
        "ParentId" : "00000002",
        "ChildId" : "00000001",
      }
    ]
  }
}

During trying to remove the bullet points I found that they are included in HTML, but I dont know why. If I remove this via dev-tools, the bullet point is gone...

which comes from CSS icon class...

.sapUiTableTreeIconLeaf { background-image: url(ico12_leaf.gif); }

solved it via

.sapUiTableTreeIconLeaf { background-image: none !important; }

Answer 1

just get rid of the __metadata, set flat[key].__metadata = "" , i guess TreeTable renderer must take it for another child.

// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.d.results.length; i++) {
    var key = 'id' + data.d.results[i].ID;
    flat[key] = data.d.results[i];
    flat[key].__metadata = "";
}

Updated Code Snippet:

 sap.ui.jsview("test.view", { getControllerName: function() { return "test.controller"; }, createContent: function(oController) { var oTreeTable = new sap.ui.table.TreeTable({ columns: [ new sap.ui.table.Column({ label: "Title", template: "Title" }), new sap.ui.table.Column({ label: "Mon01", template: "Mon01" }), new sap.ui.table.Column({ label: "Mon02", template: "Mon02" }), new sap.ui.table.Column({ label: "Mon03", template: "Mon03" }), new sap.ui.table.Column({ label: "Mon04", template: "Mon04" }), ], selectionMode: sap.ui.table.SelectionMode.None, enableColumnReordering: false, expandFirstLevel: false, toggleOpenState: function(oEvent) { } }); var data = { "d": { "results": [{ "__metadata": { "id": "http://url/EntitySet('00000001')", "uri": "http://url/EntitySet('00000001')", "type": " NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "09/2014", "Mon01": "08/2014", "Title": "Parent 1", "ID": "00000001", "ParentId": "", "ChildId": "", }, { "__metadata": { "id": "http://url/EntitySet('00000002')", "uri": "http://url/EntitySet('00000002')", "type": "NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "1560", "Mon01": "1550", "Title": "Parent 2", "ID": "00000002", "ParentId": "", "ChildId": "", }, { "__metadata": { "id": "http://url/EntitySet('00000003')", "uri": "http://url/EntitySet('00000003')", "type": "NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "1860", "Mon01": "1750", "Title": "Child 1", "ID": "00000003", "ParentId": "00000002", "ChildId": "00000001", }, { "__metadata": { "id": "http://url/EntitySet('00000004')", "uri": "http://url/EntitySet('00000004')", "type": "NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "1860", "Mon01": "1750", "Title": "Child 1_1", "ID": "00000004", "ParentId": "00000003", "ChildId": "00000001", }, { "__metadata": { "id": "http://url/EntitySet('00000005')", "uri": "http://url/EntitySet('00000005')", "type": "NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "2060", "Mon01": "1950", "Title": "Child 2", "ID": "00000005", "ParentId": "00000002", "ChildId": "00000001", }, { "__metadata": { "id": "http://url/EntitySet('00000006')", "uri": "http://url/EntitySet('00000006')", "type": "NAMESPACE_SRV.Entity" }, "Mon04": "", "Mon03": "", "Mon02": "2060", "Mon01": "1950", "Title": "Child 3", "ID": "00000006", "ParentId": "00000002", "ChildId": "00000001", }] } }; var flat = {}; for (var i = 0; i < data.d.results.length; i++) { var key = 'id' + data.d.results[i].ID; flat[key] = data.d.results[i]; flat[key].__metadata = ""; } // add child container array to each node for (var i in flat) { flat[i].children = []; // add children container } // populate the child container arrays for (var i in flat) { var parentkey = 'id' + flat[i].ParentId; if (flat[parentkey]) { flat[parentkey].children.push(flat[i]); } } // find the root nodes (no parent found) and create the hierarchy tree from them var root = []; for (var i in flat) { var parentkey = 'id' + flat[i].ParentId; if (!flat[parentkey]) { root.push(flat[i]); } } // here it is! // console.log(root); // to access the JSON via "/root" in bindRows(), could this be a problem?? var data = { root: root, }; console.log(data); var oTreeModel = new sap.ui.model.json.JSONModel(); oTreeModel.setData(data); oTreeTable.setModel(oTreeModel); oTreeTable.bindRows({ path: '/root', }); return oTreeTable; }, }); sap.ui.controller("test.controller", { onInit: function() { } }); sap.ui.view({ type: sap.ui.core.mvc.ViewType.JS, viewName: "test.view" }) .placeAt("uiArea"); 

 <script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script> <body class="sapUiBody"> <div id="uiArea"></div> </body>