在SAP UI5模板处理程序中使用JQuery进行样式设置的访问行
在SAP UI5模板处理程序中使用JQuery进行样式设置的访问行
提问于 2014-05-15 16:15:21
我试图让UI5根据字段的值更改行背景。这是在完成初始加载和滚动之后工作的，但是它在初始加载上不起作用。
这是不起作用的，因为据我所知，该单元格尚未添加到其父容器中，因此this.$().closest('tr')没有返回任何内容。滚动后，单元格已经添加到其父单元格中，然后一切正常工作。
<!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>你会看到，在初始载荷下，所有的细胞都是灰色的。
当你滚动所有的细胞与性别:M将得到一个红色的背景。如果红色背景从第一次加载就开始填充，我们会很高兴的。
JsBin链路
我们尝试过的事情：
- 将模板提供给对
.bindRows('/data', template1)的调用，似乎为该调用提供的模板类型是不同的，但在SAP上几乎没有文档。 - 给
bindRows打了两次电话。 - 解决办法：>>> 在计时器上做样式设计，效果很好，但是很难看。和不够稳定。
- 在数据绑定之后，我找不到一个
onParentChanged处理程序、onLoad或类似的事件触发，我也找不到一个类似于onDataBinding和onRowCreated的事件，这是我在.NET背景下所习惯的。 - 只要更改文本框本身的样式，就会像预期的那样工作。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-16 03:00:36
更好的解决方案
将addDelegate与垂直滚动条上的滚动处理程序组合起来，并不理想，因为它们都是无文档化的特性。
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示例
Stack Overflow用户
发布于 2014-05-15 19:26:48
解决办法
引入计时器似乎可以解决这个问题。我发现这是一个非常丑陋的解决方案，我更喜欢一个更好的解决方案，至少这似乎会让我们摆脱困境。非常开放给一个更好的解决方案：
var template1 = new sap.ui.commons.TextField().bindProperty("value", "sex",
function(sex){
var changeRow = function(cell)
{
var row = cell.$().closest("tr");
if (row != undefined)
{
if(sex == "m" ){
row.css("background-color", "red");
}
else
{
row.css("background-color", "inherit");
}
}
};
var row = this.$().closest("tr");
if (row.length != 0)
{
changeRow(this);
}
else
{
// might need to increase the timeout. in the demo 150ms seems to be enough.
window.setTimeout(changeRow, 150, this);
}
return sex ;
}
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23683627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号