动态使用带有树的面包屑 SAPUI答案

【问题标题】：Use breadcrumbs with tree dynamically SAPUI动态使用带有树的面包屑 SAPUI
【发布时间】：2019-03-27 19:41:51
【问题描述】：

我正在尝试扩展 tree basic sample 并根据树级别添加面包屑。

这是我的 xml：

<mvc:View
controllerName="sap.m.sample.Tree.Page"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Breadcrumbs id="bread" currentLocationText="Start">
    <Link text="{/lItem}"/>
</Breadcrumbs>
    <Tree
        id="Tree"
        items="{path: '/'}"
        toggleOpenState="onToggle">
        <StandardTreeItem id="item" title="{text}"/>
    </Tree>

这是我的控制器：

sap.ui.define(['sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel'],
function(Controller, JSONModel) {
"use strict";

var PageController = Controller.extend("sap.m.sample.Tree.Page", {
    onInit : function (evt) {
        // set explored app's demo model on this sample
        var oModel = new JSONModel(jQuery.sap.getModulePath("sap.m.sample.Tree", "/Tree.json"));
        this.getView().setModel(oModel);
    },

    onToggle: function(oEvent) {
        var data = this.getView().getModel().getData();
        //var lItem = this.byId("Tree").getBindingContextPath();
        var lItem = oEvent.getParameters().itemIndex;
        var oBreadCrumbs = this.byId("bread");
        oBreadCrumbs.setCurrentLocationText(lItem);
        console.log(lItem);

    }

});

return PageController;

});

tree.json 是一个带有节点的简单 json，例如 this 。面包屑控件不会创建级别，并且每次我展开一个节点时它都会重写最后一个级别。有任何想法吗？谢谢你

【问题讨论】：

标签： json model-view-controller controller sapui5

【解决方案1】：

我终于弄明白了，这样做：

查看文件：

<mvc:View
controllerName="sap.m.sample.Tree.Page"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Breadcrumbs id="bread" currentLocationText="{/sNode}">
    <!-- <Link id="link" text="paly"/> -->
</Breadcrumbs>
    <Tree
        id="Tree"
        items="{path: '/'}"
        toggleOpenState="onToggle">
        <StandardTreeItem id="item" title="{title}"/>
    </Tree>

控制器：

onToggle: function(oEvent) {

        var lItem = oEvent.getParameters().itemContext.sPath;
        var sNode = this.getView().getModel().getProperty(lItem).title;
        var oBreadCrumbs = this.byId("bread");

        arr.push(sNode);

        oBreadCrumbs.removeAllLinks();
        for(var i=0; i<arr.length; i++){
            if(i == arr.length -1){
                oBreadCrumbs.setCurrentLocationText(arr[i]);
            }
            else{
                var link = new sap.m.Link({
                    text: arr[i],
                    press: this.generateLinks, sNode
                });
                oBreadCrumbs.addLink(link);
            }

        }

    },

    generateLinks : function(sNode)
    {   
        console.log(sNode);
    }

【讨论】：