使用JQuery在SAP UI5模板处理程序中访问行样式 [英] Access row for styling in SAP UI5 template handler using JQuery
问题描述
我试图让UI5根据一个字段的值来更改反向行的行。在初始加载完成后，您可以滚动，但在初始加载时不起作用。
I'm trying to get UI5 to change the row backgound based on the value of a field. This works after the initial load has been done and you scroll, but it doesn't work on the initial load.
这不工作，因为单元格没有已被添加到其父容器中，只要我可以告诉 this。$（）。nearest（'tr'）什么都不返回。滚动后，单元格已添加到其父项，然后所有的东西都很好。
This isn't working because the cell hasn't been added to its parent container as far as I can tell this.$().closest('tr') returns nothing. Upon scrolling the cell has been added to its parent, and then everything woks just fine.
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Bindign Rows</title>
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>
<script>
var data = [
{sex: 'm', fname: 'XXX' , lname : 'YYYYY'},
{sex: 'm', fname: 'XXX' , lname : 'YYYYY'},
{sex: 'f', fname: 'XXX', lname : 'YYYYY'},
{sex: 'f', fname: 'XXX', lname : 'YYYYY'} ,
{sex: 'm', fname: 'XXX', lname : 'YYYYY'},
{sex: 'f', fname: 'XXX', lname : 'YYYYY'}
];
var oTable = new sap.ui.table.Table({visibleRowCount: 3});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: data});
oTable.setModel(oModel);
var template1 = new sap.ui.commons.TextField().bindProperty("value", "sex",
function(sex){
if(sex == "m" ){
// !! the below parent can't be found.
this.$().closest("tr").css("background-color", "red");
} else if(sex == "f" )
{
this.$().closest("tr").css("background-color", "inherit");
}
return sex ;
}
);
oTable.addColumn(new sap.ui.table.Column({ label: "Sex",
template: template1}));
oTable.placeAt('content');
oTable.bindRows("/modelData");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
您将看到的是，初始加载时，所有单元格都为灰色。
What you'll see is that upon initial load all cells are grey.
当您使用性别滚动所有单元格时：M将获得红色背景。如果红色背景将从第一次加载中填充，我们会喜欢它。
When you scroll all cells with sex:M will get a red background. We'd love it if the red background would populate right from the first load.
我们尝试过的东西：
- 将模板提供给调用
.bindRows（'/ data'，template1），似乎提供给此呼叫的模板类型是不同的，但在SAP网站上几乎没有记录。 - 调用
bindRows两次。 / li>
- 替代方法：>>> 做一个样式定时器，工作，但是是丑陋的，而且不够稳定。
- 我找不到一个
onParentChanged处理程序，onLoad或在数据绑定后触发的类似事件，我找不到事件ak在我的.NET背景中，我习惯了 onDataBinding vsonRowCreated。 - 只是改变文本框的样式本身就是预期的。
- Supplying the template to the call to
.bindRows('/data', template1), it seems that the type of template to supply to this call is a different one, but hardly documented on the SAP website. - Calling
bindRowstwice. - WORKAROUND: >>> doing the styling on a timer, works but is ugly and not stable enough.
- I can't find a
onParentChangedhandler,onLoador similar event that triggers after the data has been bound and I can't find an event akin to thdonDataBindingvsonRowCreatedthat I'm used to from my .NET background. - Just changing the style of the textbox itself works as is to be expected.
推荐答案
更好的解决方案
将组合的addDelegate与垂直滚动条上的滚动处理程序组合在一起，不理想，因为它们都是未记录的功能
Better Solution
Combined addDelegate with the scroll handler on the vertical scrollbar, not ideal because they are both undocumented features
function updateRows(oEvent) {
if (oEvent.type !== 'AfterRendering'){
this.onvscroll(oEvent);
}
var rows = this.getVisibleRowCount(); //number of rows on tab
var rowStart = this.getFirstVisibleRow();
var ctx;
for (var i=0; i<rows; i++){
ctx = this.getContextByIndex(rowStart + i); //content
this.getRows()[i].$().toggleClass("male",ctx?ctx.getObject().sex === 'm':false);
}
};
oTable.addDelegate({ onAfterRendering : $.proxy(this.updateRows, oTable)});
oTable._oVSb.attachScroll(this.updateRows,oTable);
请参阅更新jsBin示例
这篇关于使用JQuery在SAP UI5模板处理程序中访问行样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
