SAPUI5为TreeTable /空行创建JSON

时间：2014-09-19 06:38:03

标签： javascript json data-binding sapui5 treetable

我想从JSON请求创建一个SAPUI TreeTable，目前我的输出看起来像这样（你可以看到，每个节点都包含一个空行 - ＆gt;我不知道它来自哪里，我不想要拥有这些空行）：

emptyRows

我的表定义：

//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) {

    }
});

我的getJSON并将平面结构转换为父/子结构（感谢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',
        });

我的结果JSON（它的一部分）：我找不到为什么显示空行？有人知道吗？

JSON object

谢谢！

编辑：这是我完整的JSON结果（var root）（之前我将它移动到var data = {root：root，};它通过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",
      }
    ]
  }
}

在尝试删除项目符号时，我发现它们包含在HTML中，但我不知道为什么。如果我通过dev-tools删除它，那么子弹点就不见了......

bullet points

来自CSS图标类......

.sapUiTableTreeIconLeaf {  background-image：url（ico12_leaf.gif）; }

通过

解决了

.sapUiTableTreeIconLeaf {     background-image：none！important; }

1 个答案:

答案 0 :(得分：3)

只需摆脱__metadata，设置flat[key].__metadata = ""，我猜TreeTable渲染器必须将它带给另一个孩子。 

// 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 = "";
}

更新了代码段：

＆＃13;
＆＃13; 
    
    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");
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题