handsontable: поведение глобального фильтра поиска - PullRequest
Новая
       14

handsontable: поведение глобального фильтра поиска

0 голосов
/ 05 мая 2019

Я использую Handsontable 0.34.5 с оболочкой AngularJS 1.6.5 и ngHandsontable 0.13.

Мне нужно выполнить поиск по таблице.В результате поиска строки, которые не содержат найденных ячеек, должны быть скрыты.(это должен быть аналог фильтрации таблицы).

В настоящее время я использую плагин поиска, и он выделяет найденные ячейки в результате, но я бы хотел, чтобы строки с найденными ячейками оставались в таблице иостальные должны быть скрыты.

Вот шаблон HTML: 

<div ng-app='someApp'>
  <div ng-controller="SomeCtrl as ctrl">
<hot-table settings="tableSettings" datarows="items">
    <hot-column data="id" title="'ID'"></hot-column>
    <hot-column data="name.first" title="'First Name'" type="grayedOut" read-only></hot-column>
    <hot-column data="name.last" title="'Last Name'" type="grayedOut" read-only></hot-column>
    <hot-column data="address" title="'Address'" width="150"></hot-column>
    <hot-column data="price" title="'Price'" type="'numeric'" width="80" format="'$ 0,0.00'"></hot-column>
    <hot-column data="date" title="'Date'" width="150" date-format="'YYYY-MM-DD'" correct-format type="'date'"></hot-column>

    <hot-column data="isActive" title="'Is active'" type="'checkbox'" width="65" checked-template="'Yes'" unchecked-template="'No'"></hot-column>
</hot-table>

<input type="text" ng-change="search(query)" ng-model="query">

</div>
</div>

Вот контроллер: 

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 Ответ

0 голосов
/ 05 мая 2019

Я пытался использовать эту функцию для фильтрации источника.Это работает, но, возможно, это не лучший подход. 

            $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);
            }
...