我在Angular UI Grid中有一个项目列表。当我单击一行时，我想转到另一个页面。（换句话说，网格中的每一行都是一个链接。）
我想这肯定是一个非常普遍的愿望，尽管我还没有真正看到过有关如何实现的文档。什么是实现此目的的好方法？
我自己想出了答案。这是我的控制器（ES6）：
'use strict';
class TrackingRecordsCtrl {
constructor($scope) {
// The content of this template is included
// separately
$scope.gridOptions = {
rowTemplate: 'app/components/tracking-record/grid-row.html',
};
// This function is referenced from the row's template.
// I'm just console.logging the row but you can of
// course do anything you want with it.
$scope.gridRowClick = row => {
console.log(row);
// or maybe $location.path(row.url)?
};
$scope.gridOptions.data = {
// This of course can't just be an empty object.
// Chances are you already have something defined
// for gridOptions.data.
};
}
}
TrackingRecordsCtrl.$inject = ['$scope'];
export default TrackingRecordsCtrl;
这是我的行模板（Jade）：
.ui-grid-cell(
ng-repeat='(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name'
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
ui-grid-cell=''
ng-click='grid.appScope.gridRowClick(row)'
)
另外，这是我的样式表（SCSS）。我认为突出显示光标下的行并使用pointer光标使其更清楚可点击行是有意义的。
.ui-grid-row {
cursor: pointer;
&:hover .ui-grid-cell {
background-color: #CCC;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句