我试图让 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>
您会看到，在初始加载时，所有单元格都是灰色的。
当您滚动所有带有 sex:M 的单元格时，将获得红色背景。如果红色背景会在第一次加载时立即填充，我们会很高兴。
我们尝试过的事情:
- 为调用
.bindRows('/data', template1)提供模板，似乎提供给这个调用的模板类型是不同的，但几乎没有记录在SAP 网站。 - 调用
bindRows两次。 - 解决方法:>>> doing the styling on a timer, works but is ugly并且不够稳定。
- 我找不到
onParentChanged处理程序、onLoad或在数据绑定(bind)后触发的类似事件，而且我找不到类似于 thdonDataBinding与onRowCreated我习惯于 .NET 背景。 - 只需更改文本框本身的样式即可达到预期效果。
最佳答案
更好的解决方案
将 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);
关于javascript - 使用 JQuery 在 SAP UI5 模板处理程序中访问行样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23683627/