二十九、UI-Grid Selection 选择

2017-06-20 · 555 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

此示例使用 ui-grid-selection 指令来选择行。若要启用, 必须包括 “ui.grid.selection” 模块, 并且必须在表格元素上写入 ui-grid-selection指令。

选择功能的文档在 api 文档中提供, 特别是：

gridOptions
publicApi

使用 gridOptions onRegisterApi 回调在选定行时注册 rowSelectionChanged 事件和日志。默认情况下, 选择功能将选择更改划分为批处理事件和单个事件, api 中提供了两个不同的事件。通过设置 enableSelectionBatchEvent: false, 您可以使它改为只调用循环中的单个事件, 这在做客户端而不是服务器端处理更改时可能会很有用。默认情况下, 该模块将提供一个可以选择单个行的复选框。如果将 gridOption 中的enableRowHeaderSelection 设置为 false, 则会隐藏该复选框, 不过仍然可以通过单击该行来选择。你可以看到, 在本教程中的 grid1 通过查看浏览器的控制台。

如果要允许同时单击该行, 也可以单击 rowHeader, 则可将 enableFullRowSelection 设置为 true。

在 gridOption 中的设置multiSelect 为 true 将允许选择多个行, 设置为 false 将允许每次只选择一行。

如果 multiSelect：false, 则附加选项 noUnselect 将意味着始终选择行。您可以选择其他行 (这将取消选中当前行), 但不能通过单击来手动取消选中当前行。这意味着, 除了第一次打开表格时, 至少总是选择一行。如果需要, 可以初始化选择一行后, 打开页面。第二个表格说明了这一点。

如果 multiSelect：true, 则可以使用另一个选项 modifierKeysToMultiSelect。如果设置为 true, 则仅当选择了 ctrl 键、cmd 键 (mac) 或 shift 键时才允许选择多个行, 如果设置为 false, 则允许通过逐个单击来选择多个行。

默认情况下, selectAll 框显示在 rowHeader 的顶部。如果multiSelect设置为 true, 则将允许您选择所有可见行。请注意, selectAll 不监视新数据, 因此, 如果使用的是 selectAll 函数, 并且将数据添加到表格中, 则需要检查 grid.api.selection.getSelectAllState, 如果当前已打勾, 则在添加数据后手动调用 grid.api.selection.selectAllVisibleRows。

通过将 enableSelectAll 设置为 false, 可以禁用 selectAll 框。

通过设置 “selectionRowHeaderWidth” 选项, 可以设置选择行标题列的宽度。

可以使用 isRowSelectable 函数来确定哪些行是可选择的。如果在网格初始后的选项中设置此函数, 则需要调用 gridApi. notifyDataChange (uiGridConstants datachange 选项) 以启用该选项。在下面的网格中按下按钮 “设置可选” 将设置任何有年龄30的行不能被选择, 并且还将第一行的年龄设置为31。

Example

提供了两个例子, 第一个与 rowHeaderSelection 和 multi-select, 第二个没有。第一个示例在加载数据后 auto-selects 第一行。

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button type="button" class="btn btn-success" ng-click="toggleMultiSelect()">Toggle multiSelect</button>  <strong>MultiSelect:</strong> <span ng-bind="gridApi.grid.options.multiSelect"></span>
      <button type="button" class="btn btn-success" ng-click="toggleRow1()">Toggle Row 0</button>
      <br/>
      <br/>
      <button type="button" class="btn btn-success" ng-click="toggleModifierKeysToMultiSelect()">Toggle modifierKeysToMultiSelect</button>  <strong>ModifierKeysToMultiSelect:</strong> <span ng-bind="gridApi.grid.options.modifierKeysToMultiSelect"> </span>
      <br/>
      <br/>
      <button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
      <button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button>
      <button type="button" class="btn btn-success" ng-click="setSelectable()">Set Selectable</button>
      <button type="button" class="btn btn-success" ng-click="toggleFullRowSelection()">Toggle full row selection</button>
      <br/>

      <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
    </div>
    <div ng-controller="SecondCtrl">
      Single selection grid without rowHeader, and allowing rowSelection to be toggled on and off dynamically:
      <br/>
      <button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button>  <strong>rowSelection:</strong> <span ng-bind="gridApi.grid.options.enableRowSelection"></span>
      <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 100%;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', function ($scope, $http, $log, $timeout, uiGridConstants) {
  $scope.gridOptions = {
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35,
    rowHeight: 35,
    showGridFooter:true
  };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

  $scope.gridOptions.multiSelect = true;

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      $timeout(function() {
        if($scope.gridApi.selection.selectRow){
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        }
      });
    });

    $scope.info = {};

    $scope.toggleMultiSelect = function() {
      $scope.gridApi.selection.setMultiSelect(!$scope.gridApi.grid.options.multiSelect);
    };

    $scope.toggleModifierKeysToMultiSelect = function() {
      $scope.gridApi.selection.setModifierKeysToMultiSelect(!$scope.gridApi.grid.options.modifierKeysToMultiSelect);
    };

    $scope.selectAll = function() {
      $scope.gridApi.selection.selectAllRows();
    };

    $scope.clearAll = function() {
      $scope.gridApi.selection.clearSelectedRows();
    };

    $scope.toggleRow1 = function() {
      $scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
    };

    $scope.toggleFullRowSelection = function() {
      $scope.gridOptions.enableFullRowSelection = !$scope.gridOptions.enableFullRowSelection;
      $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
    };

    $scope.setSelectable = function() {
      $scope.gridApi.selection.clearSelectedRows();

      $scope.gridOptions.isRowSelectable = function(row){
        if(row.entity.age > 30){
          return false;
        } else {
          return true;
        }
      };
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);

      $scope.gridOptions.data[0].age = 31;
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.EDIT);
    };

    $scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.isSelected;
        $log.log(msg);
      });

      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        var msg = 'rows changed ' + rows.length;
        $log.log(msg);
      });
    };
}]);

app.controller('SecondCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;
  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;
  };

  $scope.toggleRowSelection = function() {
    $scope.gridApi.selection.clearSelectedRows();
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;

      // $interval whilst we wait for the grid to digest the data we just gave it
      $interval( function() {$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
    });
}]);

Example

关注微信公众号，与我交流吧~