Angular UI 网格点击行

Question

我在 Angular UI Grid 中有一个项目列表。当我点击一行时，我想被带到不同的页面。（换句话说，网格中的每一行都是一个link。）

我想这一定是一个非常普遍的愿望，尽管我还没有真正看到任何关于如何做到这一点的文档。什么是完成此任务的好方法？

Answer 1

  $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

Answer 2

我自己想出了答案。这是我的控制器 (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;
  }
}

Answer 3

据我了解，问题是：单击 Angular UI 网格中的一行应导致导航到相关页面（即该行的行为应类似于 link） .例如，联系人列表显示在网格中，单击一行会将您带到联系人详细信息页面。

感谢 OP 以创新的方式回答了他自己的问题。但是，我更喜欢这个，因为它不需要创建自定义行模板。我已经充实了一点，因为 OP 似乎对 Kathir 的例子不满意。

首先，了解以下代码为 row.isSelected 属性更改时设置监听函数：

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

即每当单击一行时，都会调用此函数。请注意传递给函数的 row 参数，该参数可用于访问该行表示的实体。例如，如果一行代表联系人实体，则您可以访问所选 row/entity 的 contactId 属性。以下示例使用 UI 路由器的 $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 对象。请参阅此 article 关于 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);
}

Answer 4

这是我使用的解决方案。

        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 UI 网格点击行

Angular UI Grid click row

angularjs

angular-ui-grid