handsontable:全局搜索过滤器行为

时间:2019-05-05 08:36:06

标签: angularjs handsontable

我正在将Handsontable 0.34.5与AngularJS 1.6.5和ngHandsontable 0.13包装器一起使用。

我需要在桌子上进行搜索。搜索的结果是,不包含找到的单元格的行应被隐藏。 (它应该类似于表过滤)。

当前,我使用搜索插件,结果将突出显示找到的单元格,但我希望将带有找到的单元格的行保留在表中,并将其余部分隐藏。

这是html模板:

var app = angular.module("someApp", ['ngHandsontable']);
app.controller('SomeCtrl', function($scope, $timeout) {
$scope.items = [
  {
    "id": 1,
    "name": {
      "first": "John",
      "last": "Schmidt"
    },
    "address": "45024 France",
    "price": 760.41,
    "date" : '2019-04-16T00:00:00',
    "isActive": "Yes",
   },
  {
    "id": 2,
    "name": {
      "first": "John",
      "last": "Schmidt"
    },
    "address": "45024 France",
    "price": 550.55,
    "date" : '2019-04-17T00:00:00',
    "isActive": "No",
   },]  
$scope.tableSettings = {
    colHeaders: true,
  columnSorting: true,
  sortIndicator: true,
  manualColumnResize: true,
  persistentState: false,
  rowHeaders: true, 
  search: true,
  afterInit: function () {
      $scope.table = this;
    this.validateCells();
    }
};
$scope.search = function(query) {
  $scope.table.search.query(query);
  $scope.table.render();
}
});

这里是控制器:

{{1}}

演示可用here

1 个答案:

答案 0 :(得分:0)

我试图使用此功能来过滤源。它可以工作,但这也许不是最好的方法。

            $scope.search= function (query) {
                var row;
                var rLen;
                var data = $scope.rows;
                var array = [];
                for (row = 0, rLen = data.length; row < rLen; row++) {
                    for (col = 0, cLen = Object.keys(data[row]).length; col < cLen; col++) {
                        var x = Object.keys(data[row])[col];
                        if (('' + data[row][x]).toLowerCase().indexOf(query) > -1) {
                            array.push(data[row]);
                            break;
                        }
                    }
                }
                $scope.table.loadData(array);
            }