标准树项 更改标题的字体?

  • 本文关键字:字体 标题 标准 sapui5
  • 更新时间 :
  • 英文 :


我有一个多级sap.m.Tree,我真的很想根据一些输入数据更改sap.m.StandardTreeItem的字体或项目颜色。

例如,如果字符串输入等于"1",则第一个节点应获得黄色文本等。

有没有方便的方法来访问节点,因为我似乎只得到顶级节点

var treeItems = oTree.getItems(); 

我想我可以使用 jQuery 搜索类 'sapMCbBg',但它看起来很不吸引人。如果有人有更好的想法,我将不胜感激。

您可以创建自定义控件来处理此问题。这是一个例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Example</title>
<style>
.node1 {
color: red;
}
</style>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"myControls": "./"}'>
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m" 
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:my="myControls">
<Tree items="{/}">
<items>
<my:StandardTreeItem title="{text}" />
</items>
</Tree>
</mvc:View>
</script>
<script>
jQuery.sap.declare("myControls.StandardTreeItem");
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/StandardTreeItem'
], function(jQuery, Controller, JSONModel, StandardTreeItem) {
"use strict";
var oData = [{
text: "Node1",
nodes: [{
text: "Node1-1"
}]
}, {
text: "Node2",
nodes: [{
text: "Node2-1"
}]
}];
StandardTreeItem.extend("myControls.StandardTreeItem", {
renderer: {},
onAfterRendering: function() {
if (StandardTreeItem.prototype.onAfterRendering) {
StandardTreeItem.prototype.onAfterRendering.apply(this, null);
}
var text = this.getBindingContext().getObject().text;
if (text.indexOf('Node1') === 0) {
this.$().find(".sapMLIBContent").addClass("node1");
}
}
});

var oController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
this.getView().setModel(new JSONModel(oData));
},
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>

http://jsbin.com/zijajas/edit?html,js,output

最新更新