[英]angular ui-grid highlight entire row by cell click
这看起来很简单,但是我已经花了4个小时来找到解决方案。 如何通过单元格单击突出显示整个行?
在注册API上我有下一个
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope,function(selected){
if('.ui-grid-cell-focus '){
console.log("fired class")
$(selected.row.entity).addClass('ui-grid-cell-focus')
}
console.log("fired cell")
$(selected.row.entity).addClass('ui-grid-cell-focus')
});
};
我看到如何触发单击单元格的方式,但是我不能强制为行着色,也不想选择该行,因为我为此使用了复选框选择,所以我只想通过单击任何单元格来突出显示该行在这一行。 有人可以告诉我我的错误在哪里吗?
附带的插棒
一种实现所需目标的方法是将cellClass定义添加到columnDefs。 该函数有两个参数:网格和行。
$scope.gridOptions.columnDefs = [{
name: 'id',
width: '150',
cellTemplate: "",
cellClass: getCellClass
}, {
name: 'name',
width: '200',
cellClass: getCellClass
} ...
];
function getCellClass(grid, row) {
return row.uid === selectedRow ? 'highlight' : '';
}
单击时,您可以将变量设置为该行的uid,在cellClass函数内部,您可以检查当前行的uid是否与所选uid匹配,如果可以,则可以将该类设置为可以正确反映该类的类。所选行的背景色。
var selectedRow = null;
gridApi.cellNav.on.navigate($scope, function(selected) {
if ('.ui-grid-cell-focus ') {
selectedRow = selected.row.uid;
gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
}
});
这是您更新的插件的链接: http ://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview
如果您不喜欢cellClass方法,则可以定义自定义cellTemplates并类似地对在行实体上设置的属性做出反应。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.