Question

Ui-Grid外部过滤不起作用，也没有向我显示对象Json的数据。我正在从服务器中检索数据并且它很复杂。

HTML ---＆GT;

   <div ng-controller="MainCtrl">
        <input ng-model='filterValue'/>
        <button ng-click='filter()'>Filter</button>

      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('')">Filter Clear</button>
      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('1')">Filter (1)</button>
      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('5')">Filter (5)</button>

      <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>
      <br />
      <div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
      <hr />
    </div>

AngularJS ----＆GT;

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 = {
          enableFullRowSelection: true,
          modifierKeysToMultiSelect: true,
          enableRowSelection: true,
          enableSelectAll: true,
          showGridFooter:true,
          enableFiltering: true
      };

      $scope.gridOptions.columnDefs = [
       { name: 'id' },
       { name: 'title'},
       { name: 'createdDate' },
       { name: 'description' }
     ];

    $scope.gridOptions.multiSelect = true;


    $scope.filter = function() {
      $scope.gridApi.grid.refresh();
    };

    $scope.singleFilter = function( renderableRows ){
     var matcher = new RegExp($scope.filterValue);
     renderableRows.forEach( function( row ) {
      var match = false;
      [
        'id',
        'title',
        'createdDate',
        'description',
        ].forEach(function( field ){
            if (row.entity[field].match(matcher)) {
              match = true;
            }
          });
          if (!match) {
            row.visible = false;
          }
        });
        return renderableRows;
  };


  $http.get('test.json')
    .success(function(data) {
      console.log(data);
      $scope.gridOptions.data = data;
      $timeout(function() {
        if($scope.gridApi.selection.selectRow){
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        }
      });
    });

    $scope.info = {};

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

    $scope.clearAll = function() {
      $scope.gridApi.selection.clearSelectedRows();
    };
    $scope.changeFilter = function(val){
      $scope.filterValue = val;
      $scope.gridApi.grid.refresh();
    }

    $scope.gridOptions.onRegisterApi = 
       function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
 gridApi.selection.on.rowSelectionChanged($scope, function (row) {

                    });
      $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );

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

服务器响应和简化版本的复杂性---＆gt ;;

[ {
    "id": 1882,
    "eventTypeId": 1,
    "occuredDate": "2016-06-06T00:00:00",
    "title": "Event Refresh",
    "description": "Test for auto refresh",
    "studyId": 2,
    "statusId": 1,
    "severityId": 3,
    "priorityId": 2,
    "status": 1,
    "createdDate": "2016-06-06T13:53:42",
    "$$hashKey": "uiGrid-0014"
    },
    {
    "id": 1879,
    "eventTypeId": 2,
    "occuredDate": "2016-06-03T00:00:00",
    "title": "Test one more timeout",
    "description": "testing timeout",
    "studyId": 4,
  "statusId": 5,
  "severityId": 2,
  "priorityId": 2,
  "status": 1,
  "createdDate": "2016-06-06T13:53:42",
  "$$hashKey": "uiGrid-001A"
},
  {
  "id": 1882,
  "eventTypeId": 1,
  "occuredDate": "2016-06-06T00:00:00",
  "title": "Event Refresh",
  "description": "Test for auto refresh",
  "studyId": 2,
  "statusId": 1,
  "severityId": 3,
  "priorityId": 2,
  "status": 1,
  "createdDate": "2016-06-06T13:53:42",
  "$$hashKey": "uiGrid-0014"
}]

这是一个对象，我可以访问服务器响应的任何数据，但是当时间到了显示ui-grid上的数据时，它会忽略整个数据，就像我创建的plunker一样。

这是我创建的一个plunker。请看看我在这里缺少的东西？如果有任何解决方案，请更新插件。感谢

Answer 1

代码row.entity[field].match(matcher)存在问题，因为没有匹配功能，您需要使用.test：

$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
  var match = false;
  ['id','title','createdDate','description',].forEach(function( field ){
        if (matcher.test(row.entity[field])) {
          match = true;
        }
      });
      if (match) {
        row.visible = true;
      }
      else{
        row.visible = false;
      }

    });
    return renderableRows;
 };

值得注意的是，您的过滤器实际上区分大小写，因此如果您搜索“事件”，您将无法获得任何内容，但“事件”将为您提供三个结果。

Working plnkr

AngularJs Ui-Grid无法显示数据，带有按钮和功能的外部过滤器无法使用Complex JSON

1 个答案: