程序员经验分享-hwhale

SAPUI5 为 TreeTable/空行创建 JSON

2023-12-13

我想从 JSON 请求创建 SAPUI TreeTable，目前我的输出如下所示（如您所见，每个节点都包含一个空行 -> 我不知道这是从哪里来的，我不想让这些空行行）：

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

Thanks!

编辑：这是我完整的 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 中，但我不知道为什么。如果我通过开发工具删除它，那么要点就会消失......

bullet points

它来自 CSS 图标类...

.sapUiTableTreeIconLeaf { 背景图像：url(ico12_leaf.gif)； }

通过解决它

.sapUiTableTreeIconLeaf { 背景图像：无！重要； }


只需删除 __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 = "";
}

更新的代码片段：

    
    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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

json

databinding

sapui5

treetable

SAPUI5 为 TreeTable/空行创建 JSON 的相关文章

随机推荐

  • 如何动态新的匿名类？

    在 C 3 0 中 您可以使用以下语法创建匿名类 var o1 new Id 1 Name Foo 有没有办法动态创建这些匿名类到变量 Example var o1 new Id 1 Name Foo var o2 new SQ 2 Bir

  • 在一个查询 MYSQL 中插入和更新

    我有一个简单的 INSERT 查询 在单击按钮的事件上运行 这会获取变量并将它们插入到order table 我也想更新我的bands表将库存减少 1 直到达到 0 然后显示空或已售完 而不是变为负数 例如 6 要知道选择了什么频段 我可以

  • Android逐字符显示文字动画

    任何人都知道执行动画的任何有效方法 所要做的就是逐个字符地显示文本 喜欢 T Th Thi This This i This is 等等 Thanks 这可能不是最优雅的解决方案 但最简单的可能是一个快速子类TextView with a

  • XSL 在 CDATA 中取消转义 HTML

    我正在尝试转换 XML

  • WebDriver 模拟桌面浏览器中的触摸事件

    我正在尝试使用 Chrome 和 Firefox 浏览器在基于 Web 的应用程序中模拟一些触摸事件 例如交换 点击 我尝试用以下方法模拟触摸事件Actions Hammer js Yahoo lib YUI 但它们都不适合我 在桌面浏览器

  • Django：CSV模型导入[重复]

    这个问题在这里已经有答案了 我需要一种将数据简历导入数据库的方法 csv 在字段方面与我的模型之一匹配 在 Django 中 有没有推荐的方法 包来做这样的事情 我查看了此处的 django csvimport http pypi pyth

  • 使用 jQuery select2 设置多个值[重复]

    这个问题在这里已经有答案了 我使用 jQuery select2 选择多个列表项 但不幸的是 下面的代码必须将所有 3 个值加载到选择字段中 但是它只加载第一个项目 如何将所有 3 个项目加载到 select2 列表中

  • 防止一段代码在协程中同时执行

    我需要保护一段代码免于在协程 中同时执行 防止多线程环境中的并发执行很简单 只需使用std lock guard类模板 然而 我的协程是从单个线程调用的 因此该解决方案不适用 以下是我想要完成的 伪 代码 future

  • Phoenix 夹具 json 文件

    如何在我的 phoenix 项目中加载 JSON 夹具文件 当我尝试像 Application app dir my app priv 这样的东西时 它给了我一个编译路径 我不能在我的测试中使用它 还有其他方法可以从 test suppor

  • 当我关闭 Pygame 时屏幕冻结

    该代码加载了一个 pygame 屏幕窗口 但是当我单击 X 关闭它时 它变得没有响应 我在 64 位系统上运行 使用 32 位 python 和 32 位 pygame from livewires import games color g

  • 不带 GROUP BY 子句的 MySQL 聚合函数

    在 MySQL 中 我观察到尽管没有 GROUP BY 子句 但在 SELECT 列表中使用 AGGREGATE FUNCTION 的语句仍会被执行 如果我们这样做 其他 RDBMS 产品 例如 SQL Server 会抛出错误 例如 SE

  • 关于 git pull 的合并/变基步骤的困惑

    来自 Loeliger 2ed 的 Version Control with Git 关于 git pull 中的合并或变基步骤 在拉取操作的第二步中 Git 执行 合并 默认 或变基操作 关于 git pull 中的合并步骤 在此示例中

  • 对出现错误的行使用带有重复标识符的扩展

    我的数据如下所示 df lt read table header T text GeneID Gene Name Species Paralogues Domains Functional Diversity 1234 DDR1 hsapi

  • 如何在android中动态启动和结束进度条

    当我从第一个活动类跳过第二个活动类时 我将开始对第二个活动中的某些图像进行图像处理 然后直到新图像出现在屏幕上时 我不想启动进度栏 然后在新图像出现在屏幕上时完成 我怎样才能做到这一点 使用 ProgreaaDialog 和 AsyncTa

  • 调用方法 Location.toString 的权限被拒绝

    我用的是YUI 有时我会看到 调用方法 Location toString 的权限被拒绝 错误 它在connection js中报告 我还没有找到任何线索为什么会出现这个错误 很奇怪 如果您通过跨域 iframe 处理任何 Flash 那么

  • 如何在 Pyspark 中注册不带参数的 UDF

    我已经尝试使用 lambda 函数带参数的 Spark UDF 并注册它 但是我怎样才能创建没有参数和注册器的 udf 我已经尝试过这个我的示例代码将期望显示当前时间 从日期时间导入日期时间 从 pyspark sql functions

  • 如何删除等号（'='）之前的所有字符串文本Java

    我想解析一个字符串 以便构建一个 XML 文档 I have String value path Some Xpath Here 我是这样解析的 private void parseXpath String s path Some Xpat

  • JVM 如何确保 System.identityHashCode() 永远不会改变？

    通常默认实现Object hashCode 是内存中对象分配地址的某个函数 尽管这不是由JLS 鉴于虚拟机在内存中分流对象 为什么返回的值System identityHashCode 在对象的生命周期中永远不会改变 如果是 一次性 计算

  • 在 Rust 中处理 GTK+ 事件的替代方法

    目前 我管理 GTK 活动Rc and RefCell如下例所示 extern crate gtk use std cell RefCell use std rc Rc use gtk Button ButtonExt ContainerE

  • SAPUI5 为 TreeTable/空行创建 JSON

    我想从 JSON 请求创建 SAPUI TreeTable 目前我的输出如下所示 如您所见 每个节点都包含一个空行 gt 我不知道这是从哪里来的 我不想让这些空行行 我的表定义 Create an instance of the table

热门标签