获取 angularjs ui-grid 的选定行

Question

我看过多篇关于这个 ui-grid 的文章，它让我很满意。我正在尝试获取选定的行对象。我得到一个未定义或无法读取属性 of 'getSelectedRows'。非常感谢任何帮助。

我是从这篇文章开始的 here，文档似乎也不是那么好。

这是我的代码：

        vm.gridOptions = {
        enableRowSelection: false,
        enableSelectAll: false,
        showGridFooter:true

    };

    vm.gridOptions.columnDefs = [
        { name: 'productName' },
        { name: 'unitPrice' }
    ];

    vm.gridOptions.multiSelect = false;

    vm.getSelectedRows = function () {
        vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
    }

     productDataService.getProductList()
         .then(function (result) {                 
             vm.gridOptions.data = result.data;
             vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();<--Property undefined error here
             $timeout(function() {
                 if (vm.gridApi.selection.selectedRow) {
                     vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
                 }
             });
         });

    vm.gridOptions.onRegisterApi = function(gridApi) {
        vm.gridApi = gridApi;
    }

Answer 1

希望对您有所帮助：

angular.module('app', ['ui.grid', 'ui.grid.selection'])
  .controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    var vm = this;
    vm.gridOptions = {
      enableRowSelection: false,
      enableSelectAll: false,
      showGridFooter:true,
      data: [{productName: "Moroni", unitPrice: 50},
             {productName: "Tiancum", unitPrice: 43},
             {productName: "Jacob", unitPrice: 27},
             {productName: "Nephi", unitPrice: 29},
             {productName: "Enos", unitPrice: 34}]
    };
    vm.gridOptions.columnDefs = [
        { name: 'productName' },
        { name: 'unitPrice' }
    ];
    vm.gridOptions.multiSelect = false;
    vm.getSelectedRows = function () {
        vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
    }
    vm.getProductList = function() {
      vm.gridOptions.data = vm.resultSimulatedData;
      vm.mySelectedRows = vm.gridApi.selection.getSelectedRows(); //<--Property undefined error here
      if (vm.mySelectedRows[0]) {
        alert('Selected Row: ' + vm.mySelectedRows[0].productName + ', ' + vm.mySelectedRows[0].unitPrice + '.');
      } else {
        alert('Select a row first');
      }
      $timeout(function() {
          if (vm.gridApi.selection.selectedRow) {
              vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
          }
      });
    };
    vm.gridOptions.onRegisterApi = function(gridApi) {
      vm.gridApi = gridApi;
    };
    vm.resultSimulatedData = [{productName: "Moroni1", unitPrice: 50},
                               {productName: "Tiancum1", unitPrice: 43},
                               {productName: "Jacob1", unitPrice: 27},
                               {productName: "Nephi1", unitPrice: 29},
                               {productName: "Enos1", unitPrice: 34}];
    return vm;
  }]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl as vm">
  <button ng-click="vm.getProductList()">Get Product List</button>
  <div ui-grid="vm.gridOptions" ui-grid-selection class="gridStyle">
  </div>
</div>

如果您可以分享更多您的代码，这可能有助于我进一步帮助您。

Answer 2

如果你想从 selected 行中过滤掉并 select 列，你可以运行一个小循环并过滤你需要的值作为如下：

 $scope.Grid.onRegisterApi = function (gridApi) { $scope.Grid= gridApi; };

然后对于网格外的按钮，您可以将以下方法添加到它的 ng-click 事件中。

$scope.DoSomthing= function () {
    var rows = $scope.Grid.selection.getSelectedRows();
    angular.forEach(rows, function (row, key) {
        angular.forEach(row, function (column, colKey) {
            if (colKey == "Your Column binding string")
            {
                console.log(column);
            }
        });   
    });

然后您可能可以创建一个列值数组并在需要的地方使用它。

我希望这对寻找类似功能的任何人有所帮助！

Answer 3

获取当前 "clicked, changed" 和任何事件所需的最简单方法是在 gridOptions:

中添加这样的单元格模板

vm.gridOptions = {
    enableColumnMenus: false,
    enableHorizontalScrollbar: 0,
    enableVerticalScrollbar: 0,
    enableRowSelection: false,
    enableRowHeaderSelection: false,
    rowHeight: 30,
    multiSelect: false,
    appScopeProvider: vm,
    onRegisterApi: function(gridApi) {
   vm.gridApi = gridApi;
},
columnDefs: [{
    {
    displayName: "",
    field: "delete",
    enableSorting: false,
    width: "80",
    cellTemplate: '<div class="ui-grid-cell-contents"><span class="grid-cell-icon fa fa-trash" ng-click="grid.appScope.vm.deleteRowModal(row.entity)"></span></div>'
    }
    ...
    ] 
}

所以row.entity是控制器中行的传递数据！

如果你想显示来自 JSON 的网格数据值而不是像在这种情况下那样删除图标，请输入 {{COL_FIELD}} 希望现在每个人都可以从 ui-grid.

的点击行中获取值

获取 angularjs ui-grid 的选定行

Get selected row of angularjs ui-grid

angularjs

angular-ui-grid

ui-grid