Angular UI Grid 点击行

Question

我有一个项目列表在Angular UI Grid中。当我点击一行时，我希望跳转到另一个页面。（换句话说，网格中的每一行都将是一个链接。）

我想这一定是一个非常普遍的需求，不过我确实没有看到任何关于如何实现它的文档。有什么好方法可以实现这个功能吗？

- Jason Swett

Answer 1

我自己想出了答案。以下是我的控制器（使用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;
  }
}

- Jason Swett

Answer 2

这是我使用的解决方案。 https://dev59.com/0H3aa4cB1Zd3GeqPXgYL#32815458

        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");
    }

- KuN

Answer 3

根据我的理解，问题是：点击 Angular UI Grid 中的一行应该导航到相关页面（即行为类似链接）。例如，在网格中显示联系人列表，点击一行会带您进入联系人详细信息页。

表扬原作者以创新的方式回答自己的问题。然而，我更喜欢这个答案，因为它不需要创建自定义行模板。由于原作者对 Kathir 的示例似乎不太满意，我在其中加入了更多细节。

首先，要明白以下代码设置了一个监听函数，用于每当 row.isSelected 属性更改时：

gridApi.selection.on.rowSelectionChanged($scope,function(row){
        //Do something when a row is selected
      });

即每当单击一行时，将调用此函数。请注意传递给函数的row参数，可以用来访问该行代表的实体。例如，如果一行代表联系人实体，则可以访问选择的行/实体的contactId属性。以下示例使用UI Router的$state服务导航到联系人详细信息页面，传递从row.entity属性获得的contactId：

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});
                });
            }

请注意，即使使用Controller as语法，也需要传递$scope对象。有关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);
}

- Blake Mumford

---

嗨，我刚看到你的回答，我认为你不能以那种方式调用$state，首先这个变量是私有的，所以你需要使用this.$scope，然后因为this被绑定到gridApi上了，不是吗？ - felix at housecat

Answer 4

  $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.
      });
  };

http://plnkr.co/edit/EO920wsxuqr3YU8931GF?p=preview

- Kathir

---

嗯，我不认为这回答了问题。我无法在您的 Plunker 中单击任何行，如果有一种方法可以调整您的自定义模板以使其成为可点击的行，则对我来说并不明显。我是否误解了什么？ - Jason Swett

抱歉，我重新阅读了我的问题，意识到可能不太清楚。我想要的是让我的网格的每一行都成为一个链接，带我到另一个页面。（我也更新了我的问题以使其更清晰。） - Jason Swett

检查新的 Plnkr 并查看。 - Kathir

这更接近了，但我不确定它是否对我来说是一个可接受的解决方案。行选择似乎与仅单击一行不相关。 - Jason Swett

假定所选行包含有关您想要发生的事情的某些信息。 api.selection.on.rowSelectionChanged 事件只是您执行任何操作的位置（在提问者的情况下是视图更改），并获取行数据以完成该操作。这是 UI-Grid 中 onClick 的等效项。 - krimhorn