<!DOCTYPE HTML>
<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://openui5.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>
</html>
<mvc:View
controllerName="sap.m.sample.Tree.Page"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Tree
id="Tree"
items="{
path: '/',
filters:[{path:'text', test:'.testFilter'}],
parameters:{
arrayNames:['nodes']
}
}">
<!--play around by removing the "parameters" in above binding-->
<StandardTreeItem title="{text}"/>
</Tree>
</mvc:View>
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"
]
}
}
});
return Component;
});
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/sample/Tree/ClientTreeBindingOverride', //Toggle this on or of to test the difference
'sap/ui/model/Filter' //just a dummy here so you don't have to fiddle around with the commas
],
function(Controller, JSONModel) {
"use strict";
var jsondata = [
{
"text": "Node1",
"ref": "sap-icon://attachment-audio",
"blabla":{"type":"jeuj"},
"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"
}
];
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(jsondata);
this.getView().setModel(oModel);
}
});
PageController.prototype.testFilter = function(oNode){
if((""+oNode).includes("2") ){ //filter out all nodes containing 2
return false;
}
return true;
}
return PageController;
});
sap.ui.define([
"sap/ui/model/ClientTreeBinding"
],
function (ClientTreeBinding) {
/**
* @todo This is a custom implementation of the treebinding filtering, because the standard one is missing functionality
**/
ClientTreeBinding.prototype.getNodeContexts = function (oContext, iStartIndex, iLength) {
if (!iStartIndex) {
iStartIndex = 0;
}
if (!iLength) {
iLength = this.oModel.iSizeLimit;
}
var sContextPath = this._sanitizePath(oContext.getPath());
var aContexts = [],
that = this,
oNode = this.oModel._getObject(sContextPath),
aArrayNames = this.mParameters && this.mParameters.arrayNames,
aChildArray;
if (oNode) {
if (Array.isArray(aArrayNames)) {
aArrayNames.forEach(function (sArrayName) {
if (Array.isArray(oNode)) {
that._saveSubContext(oNode[i], aContexts, sContextPath, i + "/" + sArrayName);
for(var i=0; i< oNode.length; i++) {
aChildArray = oNode[i][sArrayName];
that._saveSubContext(oNode[i], aContexts, sContextPath, i );
if (aChildArray instanceof Array ) {
for (var j = 0; j < aChildArray.length; j++) {
that._saveSubContext(aChildArray[j], aContexts, sContextPath, i + "/" + sArrayName + "/" + j);
};
}
};
} else {
aChildArray = oNode[sArrayName];
if (aChildArray) {
jQuery.each(aChildArray, function (sSubName, oSubChild) {
that._saveSubContext(oSubChild, aContexts, sContextPath, sArrayName + "/" + sSubName);
});
}
}
});
} else {
jQuery.sap.each(oNode, function (sName, oChild) {
if (Array.isArray(oChild)) {
oChild.forEach(function (oSubChild, sSubName) {
that._saveSubContext(oSubChild, aContexts, sContextPath, sName + "/" + sSubName);
});
} else if (typeof oChild == "object") {
that._saveSubContext(oChild, aContexts, sContextPath, sName);
}
});
}
}
this._applySorter(aContexts);
this._setLengthCache(sContextPath, aContexts.length);
return aContexts.slice(iStartIndex, iStartIndex + iLength);
};
return ClientTreeBinding;
}
);