handsontable：全局搜索过滤器行为

Posted 2023-03-22

【中文标题】handsontable：全局搜索过滤器行为

【英文标题】：handsontable: global search filter behaviour

【发布时间】：2019-09-23 04:53:02

【问题描述】：

我将 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'" ></hot-column>
    <hot-column data="price" title="'Price'" type="'numeric'"  format="'$ 0,0.00'"></hot-column>
    <hot-column data="date" title="'Date'"  date-format="'YYYY-MM-DD'" correct-format type="'date'"></hot-column>

    <hot-column data="isActive" title="'Is active'" type="'checkbox'"  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();

);

演示可用here

【参考方案1】：

我尝试使用此功能过滤源。它有效，但也许这不是最好的方法。

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