Question

我已经看过关于这个ui-grid的多篇文章，它给了我适合。我正在尝试获取所选的行对象。我要么得到一个未定义的或无法读取'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

如果要过滤掉并从所选行中选择一列，您可以运行一个小循环并过滤所需的值，如下所示：

if (passwordValidationPolicy.contains(..)) { /* validate ... */}

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

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

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

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

Answer 3

获取当前“点击，更改”以及任何活动所需的最简单方法是在 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的cliked行获取值。

获取选定的angularjs ui-grid行

3 个答案: