javascript - html表格项中的搜索过滤器[表格数组是异构的]

Question

我想将过滤功能放在表中，其中表数据是异构数组，如下所示:

let items [
        {
          "_resource":{
                   "values":[null, undefined, true, 'foobar', {'amount': 1111, 'isValid': true} , 1]// this table row, and each array's item represent individual column
             },
....
        },
        {
          "_resource":{
                   "values":[null, undefined, true, 'search in me', {'amount': 1111, 'isValid': true} , 1]// this table row, and each array's item represent individual column
             }
        }
....
]

我添加了如下过滤器代码:

function filterItesm(items, text) {
      if (text.length == 0) {
        return items;
      }
      var temp = items;
      items = [];
      for (var i = 0; i < temp.length; i++) {

        var item = items[i];
        var values = item._resource.values;
        var found = false;

        for (var j = 0; j < values.length; j++) {
           var currItem = values[j];
          if (typeof currItem === 'object') {
            for (var name in currItem) {
              if (currItem[name] != null) {
                if(typeof currItem[name] == 'number') {
                  if(text.toLowerCase().indexOf(currItem) > -1) {
                    found = true;
                    break;
                  }
                } else {
                  if (""+currItem.toLowerCase().indexOf(text.toLowerCase()) > -1) {
                    found = true;
                    break;
                  }
                }
              }
            }
          } else if(typeof currItem == 'number'){
            if(text.toLowerCase().indexOf(currItem) > -1) {
              found = true;
            }
          } else if(typeof currItem == 'string') {
            if (currItem.toLowerCase().indexOf(text.toLowerCase()) > -1) {
              found = true;
            }
          }
        }
        if (found == true) {
          items.push(item);
          found = false;
        }
      }
       return items;
    }

这里过滤器正在工作，但我正在寻找更好的方法。任何帮助将不胜感激。

Answer 1

如果您使用 Angular ，那么您可以按如下方式进行。

在component.html页面中，您可以对html表格进行以下修改。

<div class="search-hero">
                  <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search">
              </div>

               <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                  <tr>
                    <th>Thumbnail</th>
                    <th>Book Name</th>
                    <th>Author</th>
                    <th>Price</th>
                    <th> Edit</th>
                    <th> View</th>
                  </tr>
                </thead>

                <tbody>
                    <tr *ngFor ="let b of books | filter:searchText"> 
                        <td>  <img style="width: 5rem; height: 5rem;" src={{b.ThumbnailUrl}}></td>
                        <td>{{b.BookName}}</td>
                        <td>{{b.AuthorName}}</td>
                        <td>{{b.Price}}</td>
                        <td><button  class ="btn btn-primary"  (click)=editBookDetails(b)>Edit</button></td>  
                        <td><button  class ="btn btn-success"  (click)=viewBookDetails(b)>View</button></td>  
                    </tr>
                </tbody>


              </table>

在 component.ts 文件中，您可以执行以下操作，

searchText: String;