Use breadcrumbs with tree dynamically SAPUI

问题

I am trying to extend the tree basic sample and adding breadcrumbs depending on the tree level.

This is my 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>

And here is my controller:

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;

});

The tree.json is a simple json with nodes, like this . The breadcrumbs controls, doesn't create the levels and each time I expand a node it rewrites the last level. Any ideas? Thank you

回答1:

I finally figure it out, doing this:

View file:

<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>

Controller:

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);
    }

来源：https://stackoverflow.com/questions/52951236/use-breadcrumbs-with-tree-dynamically-sapui