文章/答案/技术大牛

发布

社区首页 >问答首页 >如何搜索sap.m.Tree中的所有节点？

问如何搜索sap.m.Tree中的所有节点？
EN

Stack Overflow用户

提问于 2018-02-20 15:24:29

回答 3查看 4.8K关注 0票数 4

我目前正在为我的公司开发一个MasterDetail应用程序，该应用程序提供可扩展的节点分类。

节点及其子节点与导航属性的绑定不是问题。但是，如果我想在上面的搜索字段中搜索某个组节点，它只会在四个最高节点之间过滤。它可以搜索第一级的节点，但如果节点低于第一级，则无法找到它们。

树的绑定：

<Tree
    selectionChange="onSelectionChange"
    id="list"
    noDataText="{masterView>/noDataText}"
    busyIndicatorDelay="{masterView>/delay}"
    items="{path: '/GroupNodes',
                parameters : {
                expand: 'ChildGroupNodes',
                navigation: {
                    'GroupNodes': 'ChildGroupNodes'
                    }
            }
    }">
    <StandardTreeItem 
        title="{Stext}"
        type="Navigation"
        press="onSelectionChange"/>
</Tree>

onSearch:

    onSearch: function(oEvent) {
        if (oEvent.getParameters().refreshButtonPressed) {
            this.onRefresh();
            return;
        }

        var sQuery = oEvent.getParameter("query");
        if (sQuery) {
            this._oListFilterState.aSearch = [new Filter("Stext", FilterOperator.Contains, sQuery)];
        } else {
            this._oListFilterState.aSearch = [];
        }
        this._applyFilterSearch();
    },

_applyFilterSearch:

    _applyFilterSearch: function() {
        var aFilters = this._oListFilterState.aSearch.concat(this._oListFilterState.aFilter),
            oViewModel = this.getModel();

        this._oList.getBinding("items").filter(aFilters, "Application");
        
        if (aFilters.length !== 0) {
            oViewModel.setProperty("/noDataText", this.getResourceBundle().getText("masterListNoDataWithFilterOrSearchText"));
        } else if (this._oListFilterState.aSearch.length > 0) {
            oViewModel.setProperty("/noDataText", this.getResourceBundle().getText("masterListNoDataText"));
        }
    },

onInit()函数中的Filterstate：

this._oListFilterState = {
    aFilter: [],
    aSearch: []
};

元数据：

<EntityType Name="GroupNode" sap:content-version="1">
      <Key>
         <PropertyRef Name="Grpid"/>
      </Key>
      <Property Name="Grpid" Type="Edm.String" Nullable="false" MaxLength="8" sap:unicode="false" sap:label="Id Trainingsgruppe" sap:creatable="false" sap:updatable="false" sap:filterable="false"/>
      <Property Name="Short" Type="Edm.String" MaxLength="12" sap:unicode="false" sap:label="Kürzel Trainingsgruppe" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
      <Property Name="Stext" Type="Edm.String" MaxLength="40" sap:unicode="false" sap:label="Bezeichnung Trainingsgruppe" sap:creatable="false" sap:updatable="false" sap:filterable="false"/>
      <Property Name="Begda" Type="Edm.DateTime" Precision="0" sap:unicode="false" sap:label="Beginndatum" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
      <Property Name="Endda" Type="Edm.DateTime" Precision="0" sap:unicode="false" sap:label="Endedatum" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
      <Property Name="Level" Type="Edm.Int32" sap:unicode="false" sap:label="Level" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
      <Property Name="Parentid" Type="Edm.String" Nullable="false" MaxLength="8" sap:unicode="false" sap:label="ParentId" sap:creatable="false" sap:updatable="false" sap:filterable="false"/>
      <NavigationProperty Name="ChildGroupNodes" Relationship="Z_HR_LSO_WORKCENTER_SRV.GroupNodeToParent" FromRole="FromRole_GroupNodeToParent" ToRole="ToRole_GroupNodeToParent"/>
      <NavigationProperty Name="GroupToTrainingType" Relationship="Z_HR_LSO_WORKCENTER_SRV.GroupToTrainingType" FromRole="FromRole_GroupToTrainingType" ToRole="ToRole_GroupToTrainingType"/>
</EntityType>

我们正在使用OData V2，因此不可能实现FilterContains.All过滤器。

甚至可以在前端过滤sap.m.Tree的子节点吗？

odata

sapui5

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-03-15 10:20:13

首先，从1.44开始，通过不受欢迎构建树层次结构。相反，SAP建议利用元数据注释。

建议使用导航属性来构建层次结构，并建议使用层次结构注释.

一旦迁移到注释方法，过滤客户端或服务器端。

客户端

operationMode的ODataTreeBinding (或v2.ODataModel的defaultOperationMode )需要是"Client"。
当调用.filter时，FilterType作为第二个参数需要是"Control"。
下面是一个实用的示例： https://embed.plnkr.co/moTGOT

服务器端

对于服务器端筛选，只支持FilterType "Application"和operationMode: "Server" .在这种情况下，服务器需要用现成的树结构来响应$filter请求。对于兄弟节点和子节点的分页请求也是如此。

局限性

绑定信息中的suspended: true还不支持(第3161期)。
以上内容仅适用于OData V2 。 V4 ODataModel根本不支持树绑定，但是(第2728期)。

票数 4

Stack Overflow用户

发布于 2018-03-08 15:35:00

我认为这可能与绑定项的方式有关，因为在我的示例中，我可以使用JS对子节点进行过滤。

在执行筛选之前，检查this._oList.getItems()是否包含它中的所有项。

我将发布我的代码，这样您就可以重新构建我的项目，并了解它是如何工作的。如果你还有其他问题，请告诉我。

Page.view.xml

  <mvc:View
    controllerName="sap.m.sample.Tree.Page"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <SearchField value="{json>/search}" search="onSearch"/>
        <Tree
            id="Tree"
            items="{path: '/'}">
            <StandardTreeItem title="{text}"/>
        </Tree>
</mvc:View>

Page.controller.js

sap.ui.define(['sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel', 'sap/ui/model/Filter', 'sap/ui/model/FilterOperator'],
function(Controller, JSONModel, Filter, FilterOperator) {
    "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);

            var oJSONModel = new JSONModel();
            this.getView().setModel("json", oJSONModel);

            this._oList = this.byId("Tree");
            this._oListFilterState = {
                aFilter: [],
                aSearch: []
            };
        },

        onSearch: function(oEvent) {
            if (oEvent.getParameters().refreshButtonPressed) {
                this.onRefresh();
                return;
            }

            var sQuery = oEvent.getParameter("query");
            if (sQuery) {
                this._oListFilterState.aSearch = [new Filter("text", FilterOperator.Contains, sQuery)];
            } else {
                this._oListFilterState.aSearch = [];
            }
            this._applyFilterSearch();
        },

        _applyFilterSearch: function() {
            var aFilters = this._oListFilterState.aSearch.concat(this._oListFilterState.aFilter);
                //oViewModel = this.getModel();

            this._oList.getBinding("items").filter(aFilters, "Application");

            // if (aFilters.length !== 0) {
            //  oViewModel.setProperty("/noDataText", this.getResourceBundle().getText("masterListNoDataWithFilterOrSearchText"));
            // } else if (this._oListFilterState.aSearch.length > 0) {
            //  oViewModel.setProperty("/noDataText", this.getResourceBundle().getText("masterListNoDataText"));
            // }
        }

    });

    return PageController;

});

Tree.json

[
{
    "text": "Node1",
    "ref": "sap-icon://attachment-audio",
    "nodes":
    [
        {
            "text": "Node1-1",
            "ref": "sap-icon://attachment-e-pub",
            "nodes":[
                {
                    "text": "Node1-1-1",
                    "ref": "sap-icon://attachment-html"
                },
                {
                    "text": "Node1-1-2",
                    "ref": "sap-icon://attachment-photo",
                    "nodes":[
                        {
                            "text": "Node1-1-2-1",
                            "ref": "sap-icon://attachment-text-file",
                            "nodes":[
                                {
                                    "text": "Node1-1-2-1-1",
                                    "ref": "sap-icon://attachment-video"
                                },
                                {
                                    "text": "Node1-1-2-1-2",
                                    "ref": "sap-icon://attachment-zip-file"
                                },
                                {
                                    "text": "Node1-1-2-1-3",
                                    "ref": "sap-icon://course-program"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "text": "Node1-2",
            "ref": "sap-icon://create"
        }
    ]
},
{
    "text": "Node2",
    "ref": "sap-icon://customer-financial-fact-sheet"
}

]

你只需要这些，但万一你也需要这些的话.index.html

<!DOCTYPE HTML>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">

    <title>Tree - Basic</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-preload="async"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"sap.m.sample.Tree": "./", "sap.ui.demo.mock": "mockdata"}'>
    </script>

    <!-- Application launch configuration -->
    <script>

        sap.ui.getCore().attachInit(function() {
            new sap.m.App ({
                pages: [
                    new sap.m.Page({
                        title: "Tree - Basic",
                        enableScrolling : true,
                        content: [ new sap.ui.core.ComponentContainer({
                            name : "sap.m.sample.Tree"
                        })]
                    })
                ]
            }).placeAt("content");
        });

    </script>
</head>

<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>

Component.js

sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";

var Component = UIComponent.extend("sap.m.sample.Tree.Component", {

    metadata : {
        rootView : "sap.m.sample.Tree.Page",
        dependencies : {
            libs : [
                "sap.m",
                "sap.ui.layout"
            ]
        },
        config : {
            sample : {
                files : [
                    "Page.view.xml",
                    "Page.controller.js",
                    "Tree.json"
                ]
            }
        }
    }
});

return Component;

})；

票数 0

Stack Overflow用户

发布于 2018-03-15 07:58:04

不知道你是否解决了你的问题，但几个月前我确实做了这件事。

在控制器中，放入以下函数：

    onSearch: function(oEvent) {

        var searchVal = oEvent.getParameter("newValue");
        var treeFilter = new sap.ui.model.Filter("Text", sap.ui.model.FilterOperator.Contains, searchVal);
        var oBinding = this.getView().byId("tree").mBindingInfos.rows.binding;

        oBinding.filter(treeFilter, FilterType.Application);
        oBinding.expandToLevel(3);
    },

这应该马上就行。无论您在搜索框中输入什么，它都将使用您的筛选器填充树(最多3层，但可以更改)。

当然，onSearch函数是在搜索字段的livechange上执行的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48888628

复制

相似问题

问如何搜索sap.m.Tree中的所有节点？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何搜索sap.m.Tree中的所有节点？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何搜索sap.m.Tree中的所有节点？
EN