动态将面包屑与树一起使用SAPUI [英] Use breadcrumbs with tree dynamically SAPUI

问题描述

我正在尝试扩展树基本示例并根据树级别添加面包屑.

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

这是我的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，例如此.面包屑控件不会创建级别，并且每次我扩展节点时，它都会重写最后一个级别.有任何想法吗? 谢谢

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

推荐答案

我终于弄清楚了，这样做:

I finally figure it out, doing this:

查看文件:

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

这篇关于动态将面包屑与树一起使用SAPUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！