У меня есть список элементов в 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 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;
}
}
Вот решение, которое я использовал. fooobar.com/questions/383729/...
yourCtrl.gridOptions = {
enableFiltering: true,
enableHiding : false,
enableSorting: true,
appScopeProvider : yourCtrl,
rowTemplate: '<div ng-click="grid.appScope.doSomething(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="col.colIndex()" ui-grid-cell></div>',
};
yourCtrl.doSomething = function(row) {
alert("lala");
}
Вопрос, как я понимаю: щелчок строки в Angular сетке пользовательского интерфейса должен привести к навигации по связанной странице (т.е. строка должна вести себя как ссылка). Например, список контактов отображается в сетке, и нажатие на строку выводит вас на страницу контактной информации.
Престижность OP за то, что он ответил на свой вопрос инновационным способом. Тем не менее, я предпочитаю этот ответ, поскольку он не требует создания настраиваемого шаблона строки. Я немного изменил его, поскольку OP не казался удовлетворенным примером Катира.
Во-первых, поймите, что следующий код устанавливает функцию прослушивателя для всякий раз, когда изменяется свойство row.isSelected:
gridApi.selection.on.rowSelectionChanged($scope,function(row){
//Do something when a row is selected
});
т.е. всякий раз, когда нажимается строка, эта функция будет вызываться. Обратите внимание на параметр row, переданный функции, которая может использоваться для доступа к сущности, которую представляет строка. Например, если строка представляет собой контактную сущность, вы можете получить доступ к свойству contactId выбранной строки/объекта. В следующем примере используется служба UI Router $state для перехода на страницу контактной информации, передающую contactId, полученную из свойства row.entity:
this.gridOptions.onRegisterApi = function (gridApi) {
//set gridApi to controller property
this.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$state.go("contact.details.view", {contactId: row.entity.contactId});
});
}
Обратите внимание, что объект $scope требуется передать, даже если вы используете синтаксис Controller as. Обратитесь к этой статье статьи о синтаксисе Controller as.
Для полного примера с использованием Typescript (ссылки на ссылки опущены для краткости):
"use strict"
export class ContactsCtrl {
title: string;
contacts: interfaces.IContact[] = [];
gridAPI: any;
gridOptions: any = {
enableFullRowSelection: true,
enableRowSelection: true,
multiSelect: false,
enableRowHeaderSelection: false,
data: "vm.contacts",
columnDefs: [
{ field: "contactId", displayName: "Contact ID", width: 100 },
{ field: "name", displayName: "Contact Name" } ]
}
static $inject = ["$scope", "$state"];
constructor(private $scope : ng.IScope, private $state : ng.ui.IStateService) {
this.gridOptions.onRegisterApi = function (gridApi) {
//set gridApi on scope
this.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$state.go("contact.details.view", {contactId: row.entity.contactId});
});
}
}
}
angular.module("app.contacts").controller("ContactsCtrl", contacts.controllers.ContactsCtrl);
}
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
var msg = 'row selected ' + row.isSelected;
//Open your link here.
});
};