Question

这是ui网格代码（最少）

// js文件

vm.gridOptions1 = {
      enableColumnResizing: true,
      enableAutoResizing: false,

 columnDefs: [


        {
          field: 'createdDate',
          displayName: 'Created Date',
          type: 'date',
          cellFilter: 'date:"dd-MM-yyyy"',
          enableHiding: false, headerTooltip: 'Created Date'
        },{
          name: 'Refer',
          displayName: 'Refer', enableSorting: false, headerTooltip: 'Refer',
          cellTemplate: '<input type="checkbox" ng-model="row.entity.isReferred" />'
        }

]});

单击此byutton时，我需要过滤，仅获取选中了复选框的行（isReferred = true） // html文件

<button type="button"  class="btn btn-primary-joli " ng-click="srchctrl.send">Send</button>

这是试图根据重新分配的复选框值获取过滤列表的文件，但该文件不起作用。 // JS文件

 vm.send = function () {
      if (vm.gridApi.selection.data != null && vm.gridApi.selection.data != undefined) {
         vm.referredList = filterFilter(vm.gridApi.selection.data, {
          isReferred: true
        });
        console.log("referredList :"+JSON.stringify(referredList));
      }
    };

如何获取所有勾选的值。我不想在复选框的每个click事件上调用方法。

Answer 1

我认为最简单的方法是使用gridApi.grid.registerRowsProcessor函数。我改编了一个Plunker以显示我的意思：

http://plnkr.co/edit/lyXcb90yQ0ErUJnSH7yF

Apps.js：

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

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

  $scope.gridOptions = {
    columnDefs: [
        {field: 'col1', displayName: 'Column 1', width: 175},
      {field: 'col2', displayName: 'isReferred', width: '*'}
    ],
    data: [
      { col1: "Hello 1",col2: true},
      { col1: "Hello 2", col2: false},
      { col1: "Hello 3", col2: true},
      { col1: "Hello 4", col2: false},
      { col1: "Hello 5", col2: true}
    ],
    enableFiltering: true,
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
    }
    };

  $scope.Filter = Filter;
  $scope.ShowAll = ShowAll;

  function ShowAll() {
    $scope.gridApi.grid.removeRowsProcessor(myFilter);
    $scope.gridApi.core.queueGridRefresh();
  }

  function Filter() {
    $scope.gridApi.grid.registerRowsProcessor(myFilter, 150);
    $scope.gridApi.core.queueGridRefresh();
  }

  function myFilter(renderableRows) {
    renderableRows.forEach( function(row) {
      row.visible = row.entity.col2;
    });
    return renderableRows;
  }
}]);

单击 Filter 按钮将注册 myFilter RowsProcessor，它将遍历所有行以更改可见属性。单击 ShowAll 按钮将删除RowsProcessor，从而再次显示所有以前隐藏的行。

每当 isReferred 值更改时，过滤器就会使网格自动更新此更改。

基于行过滤用户界面网格值复选框

1 个答案: